PDA

View Full Version : Grid in Dialog [easy question]



Absalom
4 Aug 2007, 1:53 AM
Hi everyone! First, just let me say, wow.. =P~ =D> =D> =D>

Now, to my little question.

I have a grid in a dialog. The grid is created(data loaded and rendered) in "Ext.onReady()". I understand this is the wrong way of doing things, it shouldn't be created until the dialog is displayed. And, supposedly, also destroyed when the dialog is hidden? But how do I actually do this?


[Edit: Let me just add that I've searched the forum for answers.]

4 Aug 2007, 3:44 AM
move the grid creation to the if (!dialog) portion of the code. You don't *have to* destroy the grid when it's hidden. Especially if it will be reused.

Absalom
4 Aug 2007, 8:16 AM
Weird, I'm still having the same problem (which I never described). In IE, not FF, the rows arnt displayed in the Grid until I move the dialog around. I thought that was because I rendered the Grid to soon.

What do you do about it?

Absalom
4 Aug 2007, 10:17 AM
I noticed this is only in IE7. Also, its within tabs. Let me sum it up.

Problem: In a dialog there are two tabs. In the second tab there is a grid. The cells in the grid are invisible until the mouse is moved over them or the dialog is moved around. This is in IE7 only.

4 Aug 2007, 10:48 AM
I realize you may be frustrated but you should really post code when asking for help.

Absalom
4 Aug 2007, 11:27 AM
Sorry, didnt think it would be usefull. Here it goes:

JS:


<script language=\"JavaScript\" type=\"text/javascript\">
Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.mysite.com/ajax/getusers'
}),

reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'name', mapping: 'name'},
{name: 'age', mapping: 'age'},
{name: 'country', mapping: 'country'}
]),

remoteSort: true
});

var cm = new Ext.grid.ColumnModel([{
id: 'name',
header: \"Name\",
dataIndex: 'name',
width: 395,
css: 'white-space:normal;'
},{
id: 'age',
header: \"Age\",
dataIndex: 'age',
width: 50,
css: 'white-space:normal;'
},{
id: 'country',
header: \"Country\",
dataIndex: 'country',
width: 200
}]);

var grid = new Ext.grid.Grid('user-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true
});

grid.render();

var gridFoot = grid.getView().getFooterPanel(true);

var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying users {0} - {1} of {2}',
emptyMsg: \"No users to display\"
});

ds.load({params:{start:0, limit:25}});
});
</script>
<script language=\"JavaScript\" type=\"text/javascript\">
Example = function(){
var layout;
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 60,
titlebar: false
},
south: {
split:false,
initialSize: 1,
titlebar: false
},
center: {
titlebar: true,
autoScroll:true,
closeOnTab: true
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('center', new Ext.ContentPanel('center1', {title: 'Panel1', closable: false}));
layout.add('center', new Ext.ContentPanel('center2', {title: 'Panel2', closable: true}));
layout.add('center', new Ext.ContentPanel('center3', {title: 'Panel3', closable: true}));
layout.getRegion('center').showPanel('center1');
layout.endUpdate();
}
};
}();

var SearchDlg = function(){
var dialog, showLink;
return {
init : function(){
showLink = Ext.get('show-search-link');
showLink.on('click', this.showDialog, this);
},

showDialog : function(){
if(!dialog){
dialog = new Ext.BasicDialog(\"search-dlg\", {
autoTabs: true,
width: 701,
height: 430,
shadow: true,
proxyDrag: true,
collapsible: false,
resizable: false
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showLink.dom);
}
};
}();

Ext.EventManager.onDocumentReady(Example.init, Example, true);
Ext.onReady(SearchDlg.init, SearchDlg, true);



</script>



Markup:


<body>
<div id=\"search-dlg\" style=\"visibility:hidden;position:absolute;top:0px;\">
<div class=\"x-dlg-hd\">Search</div>
<div class=\"x-dlg-bd\">
<div class=\"x-dlg-tab\" title=\"Users\">
<div class=\"inner-tab\">
Search for users.
</div>
</div>
<div class=\"x-dlg-tab\" title=\"Users2\">
<div class=\"inner-tab\">
Search for users.
<br />
<div id=\"user-grid\" style=\"border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;position:relative;left:0;top:0;\"></div>
</div>
</div>
</div>
</div>
</div>
<div id =\"container\">
<div id=\"north\" class=\"x-layout-inactive-content\">
<a id=\"show-search-link\" href=\"#\" style=\"float:left;\">Search</a>
</div>
<div id=\"center1\" class=\"x-layout-inactive-content\">
<p><b>Test</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id=\"center2\" class=\"x-layout-inactive-content\">
<p><b>Test</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id=\"center3\" class=\"x-layout-inactive-content\">
<p><b>Test</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id=\"south\" class=\"x-layout-inactive-content\"></div>
</div>
</body>

Absalom
5 Aug 2007, 11:48 AM
TTT

devnull
6 Aug 2007, 9:10 AM
my experience has been that when reusing a grid, you have to call its render function each time it is displayed. which also means you have to rebuild the toolbars each time. in my case I am using a grid inside a tabpanel. i was unable to get this to work with a paging grid though, when the paging toolbar was recreated, it had lost its link to the grid and no longer worked.

notjoshing
24 Sep 2007, 12:02 PM
I have this same issue. It occurs with both grids and trees, and I'll try to post up a code chunk tomorrow.

Josh

notjoshing
25 Sep 2007, 4:51 AM
I've been working through this on my own application this morning. Devnull seems to have the jist of it; if I re-render my grid when I change tabs using something like


tabs.on( 'tabchange', SampleGrid.render );

the grid shows up as it should. However, the grid no longer allows me to edit my grid components. I'll start a separate thread with code on that... (http://extjs.com/forum/showthread.php?t=13597)

Josh