Extjs 界面布局

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