木禾讲解Ext JS界面设计（布局,xtype,items,vbox,form,column）

关键词：
xtype,items,vbox,hbox,anchor,defaults,padding,frame,ui,form,column,

实例一：
要做成的界面如下：

1，那么第一步，就是先划分大的版块，如下，因为大体是以行为主，所以先分行。同时关注到左上角是有标签页，是更大的版块。总体思想是大涵盖小的来划分。

2，第二步，划每个大版块里的小版块。像这里是下面的一行分成了两块。

3，第三步，划分完后，就可以开始写了，写的时候就是一个items一个items地一层一层地往下写。写的时候再去看他的样式，慢慢调。上面的代码如下。
1）首先是标签页，他最大。

   padding: "2 0 0 0",//边框距离外部的距离，四个数字分别对应上右下左
             xtype: 'tabpanel',  //这个就是标签页类型了！
             plain: true,//简单的纯色样式
             region: 'center',
             //margins: '0 5 5 5',//内部间距
             activeTab: 0,
             items: [
                 //------------innertab1----------
                 {

                 },
                 //-------------innertab2------------
                 poHeader //因为有在其它地方定义了这个页面里的内容，这里直接写定义的函数名即可。
             ]  

2）接下来是这两个行。

             padding: "2 0 0 0",
             xtype: 'tabpanel',
             plain: true,//简单的纯色样式
             region: 'center',
             //margins: '0 5 5 5',//内部间距
             activeTab: 0,
             items: [
                 //------------innertab1----------
                 {
                     title:'红包方案',//第一个标签页的名字
                     layout: {
                         type: 'vbox', //垂直盒子 //就是以行形式排列的布局，平时用到的行的有“vbox”和“form”,列的有“hbox”“column”，各个的用法都有所以不同，请自行百度。
                         align: 'stretch', //布满
                         pack: 'start' //从上面开始
                     },
                     items: [
                         {},//这里两个花括号就是要写的行的内容。
                         {}
                                                ]
                 },
                 //-------------innertab2------------
                 poHeader
             ]  

3）接下来是再写下一层。

             padding: "2 0 0 0",
             xtype: 'tabpanel',
             plain: true,//简单的纯色样式
             region: 'center',
             //margins: '0 5 5 5',//内部间距
             activeTab: 0,
             items: [
                 //------------innertab1----------
                 {
                     title:'红包方案',
                     layout: {
                         type: 'vbox', //垂直盒子
                         align: 'stretch', //布满
                         pack: 'start' //从上面开始
                     },
                     items: [
                         {
                             flex:6,//flex是用于vbox或hbox的，用于两个框的占比。如这里的6和下面的4，就说明这个框占比6/10,下面的框占比4/10。
                             layout: 'fit',//fit就是铺满的意思，因为这个框里就只要放满一个内容所以就铺满。
                             items: [
                                 rppHeader//放的内容，已经在别的地方定义好了。
                             ]
                          },
                         {
                             flex:4,
                             layout: {
                                 type: 'hbox',//水平盒子，用于这里成列的排布。
                                 align: 'stretch'
                                     },
                           items: [
                                lrpHeader,
                                suHeader

                                  ]
                         }
                     ]
                 },
                 //-------------innertab2------------
                 poHeader
             ]

实例二：
要做这个，主要介绍表格的上面部分。

1，第一步，大的行先划分了，如下。

             border: false,
             layout: {
                 type: 'vbox', //垂直盒子
                 align: 'stretch', //布满
                 pack: 'start' //从上面开始
             },
             //default: { flex: 3 },
             items: [
                 //最上面
                 {
                     layout: 'anchor',
                     autoheight: true,
                     padding: '2 0 0 5',
                     frame: true,
                     ui: 'light',
                     items: warehouseInfoPanel
                 },
                 //中间层
                 {
                 height:240,//这里定义了总高度
                 layout: {
                     type: 'vbox', //垂直盒子
                     align: 'stretch',//布满
                     pack: 'start'//从上面开始
                 },
                 frame: true,
                 ui: 'light',
                 defaults: {
                     flex: 3
                 },
                 items: [
                     warehouseOrder,
                     warehouseOrderDetail
                 ]

             },
                 //下面仓库
                 stockOccupancy
             ]

2，第二步，针对最上面部分，我们进行细致划分。先分行，再分一个一个的列。

(1)分form:

(2)然后分column:

如上面两图，先分行，因为这样一行的列比较多，也可以先分列，但先分行代码写起来明显比先分列简便。
要先注意到，上面引用之前是写了xtype为anchor,所以接下来这两行可以使用anchor的属性，如anchor:’-50 -50’,anchor:’80%’之类的东西。

items: [
            //第一行
       {
           padding: '5px',  //这个框四边都跟别人相距5个元素
           anchor: '-50 -50', //高度等于容器高-50，宽度=容器宽度-50
           layout: "column",      //这里是写分列用的，不用hbox，因为这里想要用到columnwidth
           defaults: {      //这里写了默认属性，相当于让下面的items里的所有｛｝里具有了这个属性，这样就可以不用一个个去加。
               labelWidth: 60,//此为各标签前面文字的宽度。
               columnWidth: .16,//此为各标签的宽度百分比，用这个可以使各个标签相接近。
               padding: '2 5 2 5'//此为各的标签的四边的对外距离。
           },
           defaultType: 'displayfield',//这里使得各个字段文本显示为无框文本。
           items: [
                          //第一行内容
           ]
       },
                   //第二行
               {
                   padding: '5px',
                   anchor: '-50 -50',
                   layout: "column",
                   defaults: {
                       labelWidth: 60,//此为各标签前面文字的宽度。
                       columnWidth: .16,//此为各标签的宽度百分比，用这个可以使各个标签相接近。
                       padding: '2 5 2 5'//此为各的标签的四边的对外距离。
                   },
                   defaultType: 'displayfield',
                   items: [     
                                                            //第二行内容
                                                                ]
               }
            ]

3，这两行完整的代码如下

 items: [
            //第一行
       {
           padding: '5px',
           anchor: '-50 -50',
           layout: "column",
           defaults: {
               labelWidth: 60,//此为各标签前面文字的宽度。
               columnWidth: .16,//此为各标签的宽度百分比，用这个可以使各个标签相接近。
               padding: '2 5 2 5'//此为各的标签的四边的对外距离。
           },
           defaultType: 'displayfield',
           items: [
               {
                   id: 'WHID',
                   name: 'WHID',
                   fieldLabel: '序号',
                   labelWidth: 30,
                   allowBlank: false,
                   hidden: true
               },
                warecombox,

               {
                   id: 'WareHouseName',
                   name: 'WareHouseName',
                   value: record.get('WareHouseName'),
                   fieldLabel: '仓库名称'
               },
               {
                   id: 'WareHouseCategory',
                   name: 'WareHouseCategory',
                   value: record.get('WareHouseCategory'),
                   fieldLabel: '仓库类别'
               },
               {
                   id: 'OrgStructure',
                   name: 'OrgStructure',
                   value: record.get('OrgStructure'),
                   fieldLabel: '组织结构'
               },
               {
                   id: 'RealOrderNum',
                   name: 'RealOrderNum',
                   value: record.get('RealOrderNum'),
                   fieldLabel: '现存订单'
               }
           ]
       },
                   //第二行
               {
                   padding: '5px',
                   anchor: '-50 -50',
                   layout: "column",
                   defaults: {
                       labelWidth: 60,//此为各标签前面文字的宽度。
                       columnWidth: .16,//此为各标签的宽度百分比，用这个可以使各个标签相接近。
                       padding: '2 5 2 5'//此为各的标签的四边的对外距离。
                   },
                   defaultType: 'displayfield',
                   items: [
             {
                 id: 'InvCapacity',
                 name: 'InvCapacity',
                 fieldLabel: '库存容量',
                 value: record.get('InvCapacity'),
                 allowBlank: false,
                 anchor: '100%'
             },
             {
                 id: 'LockCapacity',
                 name: 'LockCapacity',
                 fieldLabel: '锁定容量',
                 value: record.get('LockCapacity'),
                 allowBlank: false,
                 anchor: '100%'
             },
               {
                   id: 'RealUseCapacity',
                   name: 'RealUseCapacity',
                   value: record.get('RealUseCapacity'),
                   fieldLabel: '实际占用'
               },
               {
                   id: 'RemainCapacity',
                   name: 'RemainCapacity',
                   value: record.get('RemainCapacity'),
                   fieldLabel: '剩余容量'
               },
               {
                   id: 'PlanOrderNum',
                   name: 'PlanOrderNum',
                   value: record.get('PlanOrderNum'),
                   fieldLabel: '预排订单'
               }
                   ]
               }
            ]  

讲完了，相信大家会做了。有什么问题可以邮箱或V信交流~
邮箱：1750956847@qq.com.