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