我是ext js的新手。我的要求是OnClick of a button,它调用一个弹出窗口的js函数。在这个窗口中我有一个formPanel和一个嵌入其中的网格。在窗口项属性中,如果我添加网格,则窗口不显示。如果我只保留表单变量,则显示窗口。
items : [filterPIDForm,pidGrid]
无效,而
items: [filterPIDForm]
工作正常。
以下是代码段
<script type="text/javascript">
jQuery(document).ready(function(){
// eCube search
jQuery('#eCubeSearch').click(function(){
pidSearch();
});
});
function pidSearch()
{
var filterPIDForm = new Ext.form.FormPanel({
title : 'Job Filters',
floatable : false,
id : 'filterForm',
tabTip : 'woot',
labelAlign :'top',
region :'west',
collapsible : true,
bodyStyle : 'padding: 5px; background-color: #DFE8F6',
border : false,
// style : 'border-top: 1px solid #99BBE8;',
width : 220,
items : [
{
xtype : 'combo',
width : 200,
id :'emailCombo',
fieldLabel :'Filter by Owner',
valueField :'emailValue',
displayField :'emailDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
},
{
xtype : 'combo',
width : 200,
id :'statusCombo',
fieldLabel :'Filter by Status',
valueField :'statusValue',
displayField :'statusDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
//value :'ALL'
},
{
xtype : 'textfield',
fieldLabel : 'PID/Description Search',
width : 200,
id :'searchText'
}
],
buttons: [
{
text : 'Clear Filter(s)',
id : 'clear'
},
{
text : 'Apply Filter(s)',
id : 'apply'
}
]
});
var pidGrid = new Ext.grid.GridPanel({
title : 'Job List',
id : 'pidList',
columns: [
//new Ext.grid.RowNumberer(),
{
header : 'PID',
width : 70,
dataIndex : 'pid',
sortable : true
},
{
header : 'Description',
id : 'description',
dataIndex : 'description',
sortable : true
}
]
});
var win = new Ext.Window({
modal:true,
title: 'PID Search',
layout:'absolute',
id: 'eCubeSearchWin',
width:1000,
height:400,
resizable: false,
plain: false,
resizable: false,
border: true,
closeAction :'close',
items : [filterPIDForm,pidGrid],
//items : [filterPIDForm],
buttons : [
{
text : 'OK',
id : 'test'
},
{
text : 'Close',
handler : function(){
Ext.getCmp('eCubeSearchWin').close();
}
}
]
});
win.show();
}
</script>
答案 0 :(得分:1)
尝试在窗口中设置布局
var win = new Ext.Window({
renderTo : Ext.getBody(),
width : 500,
height : 500,
layout : 'border',
items : [{
items : filterPIDForm
,layout :'fit'
,region : 'north'
,height : 300
},{
items : pidGrid
,layout :'fit'
,region :'center'
}]
}).show();