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

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

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

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

<ext:PageManager ID="PageManager1" AutoSizePanelID="Panel1" HideScrollbar="true" runat="server" />  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.