Extjs 界面布局

js 代码

 Ext.onReady(function(){        Ext.QuickTips.init();//初始化错误信息提示函数        Ext.form.Field.prototype.msgTarget = 'qtip';//设置错误信息显示方式        var proviceDate = [{pname:'小箱子',pvalue:'xiao'},{pname:'大箱子',pvalue:'da'},                                           {pname:'白箱子',pvalue:'bai'},{pname:'黑箱子',pvalue:'hei'},                                           {pname:'其他',pvalue:'others'}];        var provice_store = new Ext.data.JsonStore({        data :proviceDate,        fields :[{name:'ContainerType',mapping:'pname'},{name:'ContainerValue',mapping:'pvalue'}]       })       var panel = new Ext.form.FormPanel({         renderTo : 'form-tt',        layout:"form",       labelWidth: 60,       labelAlign:"left",       title:'更新领料单行',         frame:true,//是否渲染面板         formId :'fm1',//form的id属性，在不设置的情况下会自动生成         contentEl :'mid',//加载本地资源到panel里面         width:600,         collapsible :true,//是否允许收起或展开          items:[{  //1h        layout:"column",        items:[{        columnwidth:.5, //1L        layout:"form",        items:[{        xtype:"textfield",        fieldLabel:'单号'        }]        }]        },{ //2h        layout:"column",        items:[{        columnwidth:.5, //1L        layout:"form",        items:[{        xtype:"textfield",        fieldLabel:'出廠單號'        }]        }]},{//3h        layout:"column",        items:[{        columnWidth:.5,//1L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'由倉庫',                   name:'FrmWarehouse'        }]        },{        columnWidth:.5,//2L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'至倉庫',                   name:'ToWarehouse'        }]}        ]},{//4h        layout:"column",        items:[{        columnWidth:.5,//1L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'由位置',                   name:'FrmLocation'        }]        },{        columnWidth:.5,//2L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'至位置',                   name:'ToLocation'        }]}        ]},{//5h        layout:"column",        items:[{        columnWidth:.5,//1L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'由項目',                   name:'FrmProjId'        }]        },{        columnWidth:.5,//2L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'至項目',                   name:'ToProjId'        }]}        ]},{//6h        layout:"column",        items:[{        columnWidth:.5,//1L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'由SKU',                   name:'FrmSKU'        }]        },{        columnWidth:.5,//2L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'至SKU',                   name:'ToSKU'        }]}        ]},{//7h        layout:"column",        items:[{        columnWidth:.5,//1L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'由批號',                   name:'FrmBatchId'        }]        },{        columnWidth:.5,//2L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'至批號',                   name:'ToBatchId'        }]}        ]},{//8h      layout:"column",        items:[{        columnWidth:.5,//1L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'洋行模號',                   name:'MouldId'        }]        },{        columnWidth:.5,//2L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'模廠模號',                   name:''     //----------------        }]        },{        columnWidth:.5,//3L        layout:"form",        items:[{        xtype:'textfield',                     fieldLabel:'模版本',                   name:'MouldVersion'        }]        }]        },{//9h        layout:"column",        items:[{        columnWidth:.5,         layout:"form",        items:[{          xtype:'combo',                    fieldLabel:'箱類型',                    store:provice_store,//绑定是数据源                   mode : 'local',//设置下拉列表读取数据的模式,local表示本地读取，remote表示远程读取                    displayField :'ContainerType',//被显示在下拉列表框中的值所对于的字段名，比如本类中省份对应的provice_name                    valueField : 'ContainerValue',//设置数据值对应的字段                    forceSelection : true,//是否严格匹配列表中的值，true表示只能输入列表中的值                    editable:false,//是否可以编辑                    forceSelection : true,//当获取焦点的时候立即选择一个已存在的列表项,与editable:true一起使用,否则无意义                    triggerAction : 'all',//单击触发按钮的时候显示全部查询的数据,默认为query,设置all会执行allQuery查询                    handleHeight:10,//设置下来手柄的高度                   name:'ContainerType',                  emptyText:"请选择箱子的類型"//没有选择时候的默认值                  }]        }]        },{        layout:"column",        items:[{//        columnWidth:.5, //若指定備註框的width 註釋該語句，否則界面不協調        layout:"form",        items:[{          xtype:'textarea',                    fieldLabel:'備註',                    width:500                  }]        }]        }]       });      var win =new Ext.Window({      id:"window",      title:"更改領料單行信息",      layout:'border',      width:600,      height:500,      closeAction:'hide',      plain:true,            items:[new Ext.TabPanel({      region:'center',      deferredRender:false,      layoutOnTabChange:true,      activeTab:0,      items:[{      title:'更改領料單行信息',      layout:'fit',      //margins:'0 5 0 0',      items:[panel]      }]      })],      buttons:[{      text:'更改',      disabled:true      },{      text:'取消',      handler:function(){      panel.form.reset();       }      },{      text:'關閉',      handler:function(){      win.hide();      }      }]      });       win.show(); })