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(); })