ExtJs布局使用小结

题外话，Ext一个比较好用的地方：

       Ext.panel.Panel 这个类的 xtype 中有个属性值 htmleditor
       可以达到一种文本编辑器的效果，类似于下面这张图，但不一样。

正式开始布局使用小结！暂时是4个比较容易用到的布局。

1.column(列布局)

使用方法：
       step1. 引入 Ext.panel.Panel 类
       step2. layout:’column’
       step3. items:[{columnWidth:.5(列宽比例,注意有个小数点)}]

2.border(分成东西南北中五个区域)

使用方法：
       step1. 引入 Ext.panel.Panel 类
       step2. items:[{region:’north’}]

3.grid(网格布局，可用于表格数据显示)

使用方法：
       step1. 引入 Ext.data.Store 类
       step2. storeId:’你的store名称’
       step3. fields:[‘a’,’b’,’c’]
       step4. data:[{‘a的值’,’b的值’,’c的值’}]
       step5. 引入 Ext.grid.Panel 类
       step6. store:Ext.data.StoreManager.lookup(‘你的store名称’)
       step7. columns:[{text:’要显示的a的名称’,dataIndex:’a’},
                                     {text:’要显示的b的名称’,dataIndex:’b’},
                                     {text:’要显示的c的名称’,dataIndex:’c’}]

4.tree(树形结构，可用于树形的文件夹之类的显示)

使用方法：
       step1. var store 接收 Ext.data.TreeStore 类
       step2. root:{expanded:true(展开树),
                             children:[{text:’名称A’,leaf:true(不再有子节点)},
                                              {text:’名称B’,expanded:true,children:[{……},{……}]}
                   ]}
       step3. 引入Ext.tree.Panel类
       step4. store:store(就是step1中定义的store)
       step5. rootVisible:false(默认值为true，表示是否显示根节点)

题外话2，关于一些特殊符号的使用含义：

       1. - ：表示垂直分离两个按钮
       2. ->：表示按钮右靠齐
       3. 空格：表示水平分离

Tips: regex、regexText属性的使用。

       regex:/^\d*$/（匹配数字的正则表达式）
       regexText：输入必须是数字（匹配失败时的提示文字）