这两天SFCS的项目需要对架在的ext架构上的进行修改和优化，在这个过程中，初学ext，开始对所学内容进行整理，希望在未来一个月的时间能慢慢从初学者变成ext的真正用户.

第一部分还是以界面的学习为主，学习的三个阶段What->Why->How, 目前会把遇到的问题收集起来，更多的问题基于What,然后是Why。下面case-by-case的开始破冰，旅途愉快;

1.  创建Grid时，Grid内容全部堆在上面，中间空出很大一部分:

[ext 界面] 初学: 一些项目上的接触_第1张图片

通过比较程序发现一个笔误导致这个问题:

  AutoSizePanelID这个属性可以帮助格式化Panel,但如果指定的Panel与下面的Panel ID不一致，问题就出来了，而我的错误就在于Panel的ID与指定自动格式化的Panel ID不一致.

   
   
   
   
    
    
    
    
    
  1. <body> 
    2. 
    
    
    
    
  2.     <form id="form1" runat="server"> 
    3. 
    
    
    
    
  3.     <ext:PageLoading runat="server" ID="PageLoading1" /> 
    4. 
    
    
    
    
  4.     <ext:PageManager ID="PageManager1" AutoSizePanelID="Panel1" HideScrollbar="true" runat="server" /> 
    5. 
    
    
    
    
  5.     <ext:Panel ID="Panel" runat="server" EnableBackgroundColor="true" BodyPadding="3px" 
    6. 
    
    
    
    
  6.         EnableLargeHeader="true" ShowBorder="false" ShowHeader="True" Layout="Anchor"> 
    7. 
    
    
    
    
  7.         <Items> 
    8. 
    
    
    
    
  8.             <ext:Form ID="Form2" runat="server" Height="36px" BodyPadding="5px" ShowHeader="false" 
    9. 
    
    
    
    
  9.                 ShowBorder="false" EnableBackgroundColor="true" Width="600px" LabelWidth="40px"> 
    10. 
    
    
    
    
  10.                 <Rows> 
    11. 
    
    
    
    
  11.                     <ext:FormRow ID="FormRow2" runat="server"> 
    12. 
    
    
    
    
  12.                         <Items> 
    13. 
    
    
    
    
  13.                             <ext:TwinTriggerBox ID="ttbSearchCarton" runat="server" Label="包装批次" EmptyText="" 
    14. 
    
    
    
    
  14.                                 Trigger1Icon="Clear" Trigger2Icon="Search" ShowTrigger1="false" OnTrigger2Click="ttbSearchCarton_Trigger2Click" 
    15. 
    
    
    
    
  15.                                 OnTrigger1Click="ttbSearchCarton_Trigger1Click"> 
    16. 
    
    
    
    
  16.                             ext:TwinTriggerBox> 
    17. 
    
    
    
    
  17.                             <ext:TwinTriggerBox ID="ttbSearchDN" runat="server" Label="出货单号" EmptyText="" Trigger1Icon="Clear" 
    18. 
    
    
    
    
  18.                                 Trigger2Icon="Search" ShowTrigger1="false" OnTrigger2Click="ttbSearchDN_Trigger2Click" 
    19. 
    
    
    
    
  19.                                 OnTrigger1Click="ttbSearchDN_Trigger1Click"> 
    20. 
    
    
    
    
  20.                             ext:TwinTriggerBox> 
    21. 
    
    
    
    
  21.                         Items> 
    22. 
    
    
    
    
  22.                     ext:FormRow> 
    23. 
    
    
    
    
  23.                 Rows> 
    24. 
    
    
    
    
  24.             ext:Form> 
    25. 
    
    
    
    
  25.             <ext:Grid ID="Grid1" Title="Grid1" PageSize="15" ShowBorder="false" AllowPaging="true" 
    26. 
    
    
    
    
  26.                 ShowHeader="False" runat="server" DataKeyNames="PCBSN" EnableRowNumber="True" 
    27. 
    
    
    
    
  27.                 OnRowDataBound="Grid1_RowDataBound" EnableCheckBoxSelect="True" OnPageIndexChange="Grid1_PageIndexChange" 
    28. 
    
    
    
    
  28.                 Height="100%" AnchorValue="100% -36px"> 
    29. 
    
    
    
    
  29.                 <Toolbars> 
    30. 
    
    
    
    
  30.                     <ext:Toolbar ID="Toolbar1" runat="server"> 
    31. 
    
    
    
    
  31.                         <Items> 
    32. 
    
    
    
    
  32.                             <ext:Button ID="btnsearch" Text="查询" runat="server" Icon="SystemSearch" ValidateForms="Form2" 
    33. 
    
    
    
    
  33.                                 OnClick="btnsearch_Click"> 
    34. 
    
    
    
    
  34.                             ext:Button> 
    35. 
    
    
    
    
  35.                             <ext:Button ID="btnprint" Text="打印" runat="server" Icon="PageWhiteExcel" EnableAjax="false" 
    36. 
    
    
    
    
  36.                                 OnClick="btnprint_Click" DisableControlBeforePostBack="false"> 
    37. 
    
    
    
    
  37.                             ext:Button> 
    38. 
    
    
    
    
  38.                         Items> 
    39. 
    
    
    
    
  39.                     ext:Toolbar> 
    40. 
    
    
    
    
  40.                 Toolbars> 
    41. 
    
    
    
    
  41.                 <Columns> 
    42. 
    
    
    
    
  42.                     <ext:BoundField Width="60px" DataField="SN" HeaderText="SN" /> 
    43. 
    
    
    
    
  43.                     <ext:BoundField Width="60px" DataField="CARTON_ID" HeaderText="CARTON_ID" /> 
    44. 
    
    
    
    
  44.                     <ext:BoundField Width="60px" DataField="PRODUCT" HeaderText="PRODUCT" /> 
    45. 
    
    
    
    
  45.                     <ext:BoundField Width="60px" DataField="DELIVERY_NO" HeaderText="DELIVERY_NO" /> 
    46. 
    
    
    
    
  46.                     <ext:BoundField Width="60px" DataField="SHIPPED_DATE" HeaderText="SHIPPED_DATE" /> 
    47. 
    
    
    
    
  47.                     <ext:BoundField Width="60px" DataField="DATE_CODE" HeaderText="DATE_CODE" /> 
    48. 
    
    
    
    
  48.                 Columns> 
    49. 
    
    
    
    
  49.             ext:Grid> 
    50. 
    
    
    
    
  50.         Items> 
    51. 
    
    
    
    
  51.     ext:Panel> 
    52. 
    
    
    
    
  52.     form> 
    53. 
    
    
    
    
  53. body> 
    54.