PDA

View Full Version : need help with grid in BasicDialog



quinniee
4 Jan 2007, 8:56 AM
Hello, I apologize in advance if this question is already posted in the forum somewhere, I've been searching and haven't found anything that answers my question.

I have a basic dialog that I use as search window that will display a results set in a sortable grid. The grid is pretty small, say 200 x 200 however the dialog is 500 x 500. After the grid is displayed and the user wants to search again, I use getUpdateManager to change the div back to the search screen. The problem is that my text in the dialog now acts like it's only 200 x 200. I'd like to keep reusing the same div while i'm in the dialog. Do I need to destory the grid? Or change something with the way I create the grid? Sorry, I'm a newbie to yui-ext and not too good with javascript. Here is some code.

this is used to create the dialog - should look very similar to the examples out there.




var AgtWin = function(){
// everything in this space is private and only accessible in the AgtWin block

var dialog, showBtn;
return {
init : function(){
showBtn = getEl('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this, true);

},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new YAHOO.ext.BasicDialog("agtdialog", {
modal:false,
autoTabs:false,
width:500,
height:500,
shadow:false,
proxyDrag: true,
y: 50,
x: 100
});
dialog.addKeyListener(27, dialog.hide, dialog);

dialog.addButton('Close', dialog.hide, dialog);
dialog.addButton('Search Again', startover, dialog);
dialog.body.load({url:'findbrk'});

}
dialog.show(showBtn.dom);
}
};
}();

YAHOO.ext.EventManager.onDocumentReady(AgtWin.init, AgtWin, true);


and here is my grid code



var XmlExample = {
init : function(){
var schema = {
tagName: 'con',
id: 'conNum',
fields: ['name','conNum']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Contact" , width: 200, sortable: true},
{header: "Number" , width: 100, sortable: true, sortType: sort.asFloat}
]);

// create the Grid
var grid = new YAHOO.ext.grid.Grid('agtbody', dataModel, colModel);
grid.autoWidth = true;
grid.autoHeight = true;
grid.render();


dataModel.load('findbrcntct?task=X');
}
}




Please help me! I absolutely love yui-ext so I'm trying to become my proficient with it so please forgive me if this is just a stupid mistake.

I can possibly get a sample link out there if it helps.

Animal
4 Jan 2007, 9:28 AM
I wouldn't go with overwriting the filters with a grid, and then destroying it to re-filter.

Use a LayoutDialog, and have any filters in the north Region, and the resulting grid in a YAHOO.ext.GridPanel in the center Region.

That way, the grid can be refreshed from a new query if the use just goes back into the north region, changes a value, and clicks "Search" again.

quinniee
4 Jan 2007, 9:39 AM
I see what you're saying. That makes perfect sense but I'm not sure if it will work in my case. Basically they are searching for a company first, and then clicking on a link to display a list of contacts(which is where i use the grid). I'll give it a shot though since it is very clean way to do it.

I'm open to other suggestions though if anyone has them. Thanks Animal!