PDA

View Full Version : Grid not displaying in window



ragendu
29 Feb 2012, 2:23 AM
Hi,

OnClick of a button, it calls a js function which pops up a window. Within this window I have a form and a grid embedded in it. In the window items properties, if I add grid, the window is not showing. If I keep only form variable, then the window is displayed.
items : [filterPIDForm,pidGrid] is not working whereas items: [filterPIDForm] is working fine.
This is the code snippet

<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',
//store :emailStore,
valueField :'emailValue',
displayField :'emailDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
//value : cfEmail
//value :'ALL' //,
//disabled :(cfARR?false:true)
},
{
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',
//myLast : false,
id : 'pidList',
region : 'center',
//store : pidStore,
autoExpandColumn : 'description',
autoExpandMin : 150,
//reserveScrollOffset : true
//style : 'border-left: 1px solid #99BBE8;',
columns: [
//new Ext.grid.RowNumberer(),
{
xtype : 'gridcolumn',
header : 'PID',
//sortable : true,
resizable : true,
width : 70,
dataIndex : 'PID',
id : 'pid'
//hidden : false
},
{
xtype : 'gridcolumn',
header : 'Description',
// sortable : true,
resizable : true,
//width : 100,
dataIndex : 'DESCRIPTION',
id : 'description'
//hidden : false
}
]
});

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>


items : [filterPIDForm,pidGrid] is not working whereas items: [filterPIDForm] is working fine.

Can anyone please help me..

Many thanks in advance..

Farish
29 Feb 2012, 2:30 AM
try after removing:


region: 'center',from your grid.

ragendu
29 Feb 2012, 2:40 AM
Hi,
I removed
region : 'center' but still its not displaying...

Farish
29 Feb 2012, 3:42 AM
try adding height config to your grid. also, try to just put the grid in the window and see if that does anything. do u see any errors in the console?

ragendu
29 Feb 2012, 4:17 AM
Hi,
I am not getting any errors. Can you please try this code in yours and let me know if the grid is displaying or not?
Thank you

friend
29 Feb 2012, 4:26 AM
The main problem appears to be a misuse/abuse of layouts in general...

Below is a functional code sample you can build from, noting that since I don't declare a layout for the Window it defaults to auto and child components stack vertically:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Window and Form/Grid Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

Ext.create('Ext.window.Window', {
title: 'Form/Grid Window Test',
width: 400,
items: [{
xtype: 'form',
bodyPadding: 5,
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'lastName',
width: 250
},{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'firstName',
width: 250
}]
},{
xtype: 'grid',
columnLines: true,
columns: [{
header: 'Last Name', dataIndex: 'lastName', sortable: true, width: 150
},{
header: 'First Name', dataIndex: 'firstName', sortable: true, width: 150
}],
height: 150,
store: {
fields: [{
name: 'firstName', type: 'string'
},{
name: 'lastName', type: 'string'
}],
data: [
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Jadji', lastName: 'Bandito'},
{firstName: 'Slim', lastName: 'Whitman'},
{firstName: 'Gulliver', lastName: 'Foyle'}
]
},
width: 390
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
}).show();
});

</script>
</head>

<body></body>
</html>

ragendu
29 Feb 2012, 4:44 AM
Thanks for giving me this sample code. I tried with no layout(defaulting to auto) but still the window is not opening when i include my grid inside the window. Can you try out with my code and see if the window is poped up or not?

ragendu
29 Feb 2012, 4:53 AM
I used the firebug to check what is causing the issue. The error its displaying is "this.ds is undefined ext-all.js (line 11).
Does anybody have any clue on this?

friend
29 Feb 2012, 4:59 AM
Here's the code sample reworked to include your grid. Note that I removed the obsolete autoExpand config bits for the description column and instead use the new flex: 1 attribute on that column:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Window and Form/Grid Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

var pidGrid = new Ext.grid.GridPanel({
title : 'Job List',
columns: [{
xtype : 'gridcolumn', header : 'PID', width : 70, dataIndex : 'PID'
},{
xtype : 'gridcolumn', header : 'Description', resizable : true, dataIndex : 'DESCRIPTION', flex: 1
}],
height: 200
});


Ext.create('Ext.window.Window', {
title: 'Form/Grid Window Test',
width: 400,
items: [{
xtype: 'form',
bodyPadding: 5,
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'lastName',
width: 250
},{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'firstName',
width: 250
}]
},
pidGrid
],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
}).show();

});

</script>
</head>

<body>
</body>
</html>

ragendu
29 Feb 2012, 8:31 PM
Hi,
I tried with these settings inside the window
items : [{
items : filterPIDForm
,layout :'fit'
,region : 'north'
,height : 300
},{
items : pidGrid
,layout :'fit'
,region :'center'
}]
With this inside the window now a portion of the grid is displaying..Now its displaying form panel on the left part and grid on bottom of that. Actually I wanted the structure like this.Inside the window, form panel on the left with the 2 buttons on the bottom of form panel and the grid on the right side (adjacent to the form panel).Hope you understand my requirement
I am not sure how to align this inside the window..
Could some body please guide me on this??
Thanks in advance...

Farish
29 Feb 2012, 11:33 PM
horizontal alignment can be achieved by placing the grid and form in a container with 'hbox' layout. Read about 'hbox' and 'vbox' layouts. this will help you. Also, regions are supposed to be used with 'border' layout.