看代码：
//创建窗口==============
//表格选项卡
var usetd = new Ext.toolbar.Toolbar({
border:false,
items: [
{ text: '选择资产', iconCls: 'fa fa-folder-open-o'},
{ text: '删除选中', iconCls: 'fa fa-refresh', handler: refresh}
]
});
//表格获取数据
var usestore = Ext.create('Ext.data.Store', {
maxPageSize:30,
proxy : {
type : 'dwr',
remoteSort : true,
paramOrder : [ 'page', 'limit'],
dwrFn : AssetUseDwr.chooseAsset,
reader : {
type : 'json',
rootProperty : 'datas',
messageProperty : 'message',
totalProperty : 'total'
}
},
fields : ["id","assetno","assetname","model","assettype","putindate","usedepart"]
});
//表格列
var usecolumns = [{ text: 'id', dataIndex: 'id', hidden: true },
{ xtype: 'rownumberer', width: 50, text: '序号', align:'center'},
{ text: '资产编号', dataIndex: 'assetno', width: 250,renderer: renderderFn},
{ text: '资产名称', dataIndex: 'assetname', width: 250,renderer: renderderFn},
{ text: '规格型号', dataIndex: 'model', width: 150,renderer: renderderFn},
{ text: '资产类别', dataIndex: 'assettype', width: 150,renderer: renderderFn},
{ text: '入库时间', dataIndex: 'putindate',width: 150,renderer: renderderFn},
{ text: '使用部门', dataIndex: 'usedepart',width: 150,renderer: renderderFn}
];
//创建表格
var usegrid = Ext.create('Ext.grid.Panel', {
selModel: { selType: 'checkboxmodel' },
columns:usecolumns,
store:usestore,
height : 340,
tbar : usetd
});
//创建窗口
function queryWindows() {
var win = new Ext.Window({
title:'资产借用',
height:document.body.clientHeight*0.93, //根据客户端当前屏幕的大小显示高度
width:document.body.clientWidth*0.8, //根据客户端当前屏幕的大小显示宽度
maximizable:true,
modal: true,
layout: 'vbox',
autoScroll:true,
//窗口关闭按钮
closeAction: 'close',
defaultType:"textfield",
items:[
//放置表单
{
xtype:"form",
width : '100%',
height:150,
layout:'column',
border:false,
margin:'10px 20px',
items:[{
editable :true,xtype: 'textfield',fieldLabel: '借用人<span style="color:red;">*</span>',labelWidth:100,
height:30,width:250,style:'margin:5px 20px',name:'useperson',columnWidth:.33
},
{
editable :true,xtype: 'datefield',format : 'Y-m-d',fieldLabel: '借用日期<span style="color:red;">*</span>',
labelWidth:100,height:30,width:250,style:'margin:5px 20px',
columnWidth:.33
},
{
editable :true,xtype: 'textfield',fieldLabel: '借用部门<span style="color:red;">*</span>',
labelWidth:100,width:250,height:30,style:'margin:5px 20px',
columnWidth:.33
},
{
editable :true,xtype: 'textfield',fieldLabel: '借用使用地<span style="color:red;">*</span>',
labelWidth:100,width:250,height:30,style:'margin:5px 20px',
columnWidth:.33
},
{
editable :true,xtype: 'textarea',fieldLabel: '备注<span style="color:red;">*</span>',
labelWidth:100,width:250,height:30,style:'margin:5px 20px',
columnWidth:1
}
]
},
//创建panel，放置表格
{ xtype:"panel",
width : '100%',
height:350,
items:[usegrid],
border:false
}
],
//窗口按钮
buttons:[
{xtype:'button',text:'保存',handler:function(){
//窗口获取表单
var form = win.down('form');
var useperson = form.down('textfield[name="useperson"]').getValue();
alert(useperson);
}},
{xtype:'button',text:'取消',handler:function (btn) {
//窗口关闭
btn.up('window').close();
}}
],
listeners:{ //监听事件 ，当window窗体被关闭时就会触发改事件，并执行该事件里面的回调函数。把当前全局变量的属性window置为空。为下一次创建窗体做准备。
close:function () {
var IS_VIEW = false;
queryWindow.window=null;
win.down('form').reset();
}
}
});
return win;
}调用：
var queryWindow={ //我们为这个对象定义两个属性，第一个是window，我们要通过这个属性的值是否为null,来判断当前是否有窗体被创建，如果有则不创建。
window:null,
choosewindow:null,
show:function () {
if(!this.window){ //当当前window为null的情况下 则立即创建窗体。
this.window=queryWindows();
}
//这段保证窗口每次打开，表格都会重新初始化
usegrid.store.reload();
this.window.show();//调用当前窗体show()方法来显示窗体，窗体只被创建 而显示是不起作用的。
},
showchoosewin:function(){
}
}注意点：
一、窗口里表格初始化实现，数据刷新：
usegrid.store.reload(); usegrid：是表格的组件名称。
二、点击窗口按钮，获取窗口里面定义的form表单实现：
//win是窗口的名称，上面的代码有 var win = new Ext.Window();
var form = win.down('form');
var useperson = form.down('textfield[name="useperson"]').getValue();
三、window布局设置
如下图：
上布局套了一个form，下布局套了一个panel，大致框架如下：
function queryWindows() {
var win = new Ext.Window({
title:'资产借用',
height:document.body.clientHeight*0.93, //根据客户端当前屏幕的大小显示高度
width:document.body.clientWidth*0.8, //根据客户端当前屏幕的大小显示宽度
maximizable:true,
modal: true,
layout: 'vbox',
autoScroll:true,
//窗口关闭按钮
closeAction: 'close',
defaultType:"textfield",
items:[
{
xtype:'form',
....
},
{
xtype:'panel',
items:[usegrid]
....
}
]
});
return win;
}要点：
1、在form布局里，我用了layout:'column'就是列布局。border:false设置为：false，隐藏自带的边框。margin:'10px 20px' 设置form的margin样式。
2、{
editable :true,xtype: 'textfield',fieldLabel: '借用人<span style="color:red;">*</span>',labelWidth:100,
height:30,width:250,style:'margin:5px 20px',name:'useperson',columnWidth:.33
}
通过columnWidth 来调整form里面元素在列占有的宽度，和为 1。如下图：
这样会让你的form布局变得很好看，form布局实现代码如下：
{
xtype:"form",
width : '100%',
height:150,
layout:'column',
border:false,
margin:'10px 20px',
items:[{
editable :true,xtype: 'textfield',fieldLabel: '借用人<span style="color:red;">*</span>',labelWidth:100,
height:30,width:250,style:'margin:5px 20px',name:'useperson',columnWidth:.33
},
{
editable :true,xtype: 'datefield',format : 'Y-m-d',fieldLabel: '借用日期<span style="color:red;">*</span>',
labelWidth:100,height:30,width:250,style:'margin:5px 20px',
columnWidth:.33
},
{
editable :true,xtype: 'textfield',fieldLabel: '借用部门<span style="color:red;">*</span>',
labelWidth:100,width:250,height:30,style:'margin:5px 20px',
columnWidth:.33
},
{
editable :true,xtype: 'textfield',fieldLabel: '借用使用地<span style="color:red;">*</span>',
labelWidth:100,width:250,height:30,style:'margin:5px 20px',
columnWidth:.33
},
{
editable :true,xtype: 'textarea',fieldLabel: '备注<span style="color:red;">*</span>',
labelWidth:100,width:250,height:30,style:'margin:5px 20px',
columnWidth:1
}
]
}参考：
window加载jsp：https://blog.csdn.net/davisdws/article/details/79071699
数据重置：https://blog.csdn.net/woyizhizaizhaoni/article/details/81161827
form布局：https://blog.csdn.net/shuyizhi/article/details/45671205
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
