Results 1 to 2 of 2

Thread: Ext: Two grid in same page, loadMask one response becomes blank

  1. #1

    Default Ext: Two grid in same page, loadMask one response becomes blank

    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();

    });

  2. #2

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •