PDA

View Full Version : Ext: Two grid in same page, loadMask one response becomes blank



harini.p
8 Jun 2009, 9:22 AM
Hi all,
I have a search page and two grids. The grids get populated with data correctly. But when I try to use loadMask option the first grid gets loaded while the second one response is blank. Everything works correctly when loadMask is removed.
Please help. Thanks in advance.

Ext.onReady(function(){

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';
var schema = '';

// Create a variable to hold our EXT Form Panel.
// Assign various config options as seen.
var search = new Ext.FormPanel({
labelWidth:100,
frame:true,
title:'Search for multiple schema',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for instance.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Schema Name',
name:'schemaName',
id: 'SCHEMA_NAME',
tabIndex:1,
allowBlank:false,
listeners : {
change : function(f, r, i) {
schema = Ext.getCmp('SCHEMA_NAME').getValue();
}
}
}],
buttons:[{
text:'Search',
formBind: true,
// Function that fires when user clicks the button
handler:function(){

if(schema != ''){
Ext.Ajax.request ({
url: '../../test/grid.event?event=dummy',
method:'POST',
success: function()
{
var mcm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{
id:'SCHEMA_NAME',
header: 'Schema Name',
dataIndex: 'SCHEMA_NAME',
width: 50
},
{
id:'STATUS',
header: 'Status',
dataIndex: 'STATUS',
width: 50
},{
id:'EXPIRY_DATE',
header: 'Expiry Date',
dataIndex: 'EXPIRY_DATE',
width: 55
},{
id:'INSTANCE',
header: 'Target Instance',
dataIndex: 'INSTANCE',
width: 60
}
]);

// by default columns are sortable
mcm.defaultSortable = true;

var targetres = Ext.data.Record.create([
// the "name" below matches the tag name to read
{name: 'SCHEMA_NAME', mapping: 'SCHEMA_NAME'},
{name: 'STATUS', mapping: 'STATUS'},
{name: 'EXPIRY_DATE', mapping: 'EXPIRY_DATE'},
{name: 'INSTANCE', mapping: 'INSTANCE'}

]);

var targetlist = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({url: '../../test/grid.event?event=search&OPTION=TARGET&SCHEMA_NAME=' + schema,method:'POST'}),
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'results'
},
targetres),
sortInfo:{field: 'SCHEMA_NAME', direction: "ASC"},
groupField: 'SCHEMA_NAME'
});


// create the Grid
var grid = new Ext.grid.GridPanel({
store: targetlist,
cm: mcm,
stripeRows: true,
view: new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl : '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
height:300,
width:550,
collapsible : true,
loadMask: true,
trackMouseOver:false,
animCollapse : false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
title:'Target Instance List'
});

grid.render('result-grid');
grid.getGridEl().mask('Loading ...');
targetlist.load();
grid.getGridEl().unmask(true);
grid.getSelectionModel().selectFirstRow();

var smcm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{
id:'SCHEMA_NAME',
header: 'Schema Name',
dataIndex: 'SCHEMA_NAME',
width: 50
},
{
id:'STATUS',
header: 'Status',
dataIndex: 'STATUS',
width: 50
},{
id:'EXPIRY_DATE',
header: 'Expiry Date',
dataIndex: 'EXPIRY_DATE',
width: 55
},{
id:'INSTANCE',
header: 'Source Instance',
dataIndex: 'INSTANCE',
width: 60
}
]);

// by default columns are sortable
smcm.defaultSortable = true;

var sourceres = Ext.data.Record.create([
// the "name" below matches the tag name to read
{name: 'SCHEMA_NAME', mapping: 'SCHEMA_NAME'},
{name: 'STATUS', mapping: 'STATUS'},
{name: 'EXPIRY_DATE', mapping: 'EXPIRY_DATE'},
{name: 'INSTANCE', mapping: 'INSTANCE'}
]);

var sourcelist = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({url: '../../test/grid.event?event=search&OPTION=SOURCE&SCHEMA_NAME=' + schema,method:'POST'}),
// the return will be XML, so lets set up a reader
reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'results'
}, sourceres),
sortInfo:{field: 'SCHEMA_NAME', direction: "ASC"},
groupField: 'SCHEMA_NAME'
});


// create the Grid
var sgrid = new Ext.grid.GridPanel({
store: sourcelist,
cm: smcm,
stripeRows: true,
view: new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl : '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
height:300,
width:550,
loadMask : true,
collapsible : true,
trackMouseOver:false,
animCollapse : false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}) ,
frame:true,
title:'Source Instance List'
});

sgrid.render('source-grid');
sgrid.getGridEl().mask('Loading ...');
sourcelist.load();
sgrid.getGridEl().unmask(true);
sgrid.getSelectionModel().selectFirstRow();

}
});
}
}
}]

});

THe last one sgrid is the one that blanks out. (In firebug response is blank when this code is added)
search.render('search-box');
Ext.getDom('SCHEMA_NAME').focus();

});

tryanDLS
8 Jun 2009, 11:09 AM
http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly