Grid view in Window in Extjs/modext

☆ A M B ☆
279 Posts

bertoost Reply #1, 15 years, 4 months ago

To explain a bit; I have made a simple grid view by following this tutorial
http://rtfm.modx.com/display/revolution20/Developing+an+Extra+in+MODX+Revolution

I also have created the "create" and "update" window etc. so far so good; but now I want to view a new grid inside a window and for 2 days searching I can’t find any solution. Maybe someone of you knows...

Tips and ideas are very welcome!

Regards, Bert

MODX Ambassador (NL) & Professional MODX developer
Follow me on Twitter | Visit my page on Facebook | View my code on Github | View my script posts
MODX e-commerce solution SimpleCart

160 Posts

insomnix Reply #2, 14 years, 11 months ago

I am having a similar problem, though I have the grid in mu update window and I can display the values, some weird things are happening.

My update window:

Addon.window.Updateaddon = function(config) {
     config = config || {};
     Ext.applyIf(config,{
        title: _('addon.addon_update')
        ,url: addon.config.connectorUrl
        ,baseParams: {
            action: 'mgr/addon/update'
        }
	,fields: [{
            xtype: 'hidden'
            ,name: 'id'
        },{
            xtype: 'textfield'
            ,fieldLabel: _('field1')
            ,name: 'field1'
            ,width: 300
        },{
            xtype: (config.record) ? 'addon-grid-addoncategory' : 'hidden'
            ,p_id: (config.record) ? config.record.id : 0
            ,fieldLabel: _('addon.categories')
        }]
    });
    Addon.window.Updateaddon.superclass.constructor.call(this,config);
};
Ext.extend(Addon.window.Updateaddon,MODx.Window);
Ext.reg('addon-window-addon-update',Addon.window.Updateaddon);

The last field item is calling my grid and placing it in my window:

Addon.grid.AddonCategory = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'addon-grid-addoncategory'
        ,url: Addon.config.connectorUrl
        ,baseParams: { action: 'mgr/addoncategory/getList', parent_id: config.p_id|| 0 } /* pass the id from the window to the grid to fill */ 
        ,tbar: [{
            xtype: 'button',
            text: _('addon.addoncategory_create'),
            handler: function() {
                win = new Addon.window.CreateAddonCategory({
                    record: { parent_id: config.addon},
                    win: this.id
                });
                win.show();
            }
        }]
        ,viewConfig: {
            forceFit: true,
            enableRowBody: true
        }
        ,fields: ['id','parent_id','category_id']
        ,paging: false
        ,remoteSort: true
        ,columns: [{
            header: _('id')
            ,dataIndex: 'id'
            ,sortable: true
            ,width: 30
            ,hidden: true
        },{
            header: _('addon.parent')
            ,dataIndex: 'parent_id'
            ,sortable: true
            ,width: 30
            ,hidden: true
        },{
            header: _('addon.categories')
            ,dataIndex: 'category_id'
            ,sortable: true
            ,width: 50
            ,editor: { xtype:'addon-combo-category' ,renderer: true }
        }]


    });
    Addon.grid.AddonCategory.superclass.constructor.call(this,config);
};
Ext.extend(Addon.grid.AddonCategory,MODx.grid.Grid);
Ext.reg('addon-grid-addoncategory',Addon.grid.AddonCategory);

And then I call this update window from my main grid with:

,updateAddon: function(btn,e) {
    win = new Addon.window.UpdateAddon({
        record: this.menu.record
        ,listeners: {
            'success': {fn:this.refresh,scope:this}
        }
     });
     win.show(e.target);
}

Everything works great when I use this on a single record, but then I try to update another record, the grid does not appear and I get the "Categories" label repeated about 5 times. You can see these in the attachments.

I am missing something somewhere, I would really appreciate some help.

863 Posts

Lucas Reply #3, 14 years, 11 months ago

I've run into this a number of times before and it's usually because you are creating a new window again and again when you should just be showing and hiding the same one. I think the labels duplicate because ExtJs is assigning the same element ID multiple times (IDs should always be unique).

Try changing your updateAddon function to check if the window already exists, and if so, show the existing one with updated values:

,updateAddon: function(btn,e) {
    if (!this.updateAddonWindow) {
        this.updateAddonWindow = MODx.load({
            xtype: 'addon-window-addon-update'
            ,record: this.menu.record
            ,listeners: {
                'success': {fn:this.refresh,scope:this}
            }
        });
    } else {
        this.updateAddonWindow.setValues(this.menu.record);
    }
    this.updateAddonWindow.show(e.target);
}

160 Posts

insomnix Reply #4, 14 years, 11 months ago

That looks like what I had originally, but the grid in my window never updates when opening. For example, I open record one, the grid will load and display my categories. Then I close the window and open the next record, the grid does not go through the load process again, it just displays the values loaded by the previous record. All other fields are updated to the new record.

I changed my code back to what you show to verify, and it follows the same pattern. Is there something I'm missing here?

160 Posts

insomnix Reply #5, 14 years, 11 months ago

I still haven't worked out the problem here, does anyone have any ideas?

863 Posts

Lucas Reply #6, 14 years, 11 months ago

Maybe you need to call refresh() on the grid if it is inside your window.
setValues() is for a form panel.

Otherwise your problem of the repeating labels/missing grid is almost certainly due to you having set an id which is being duplicated. IDs need to be unique. Removing this line should sort that out:

id: 'addon-grid-addoncategory'

160 Posts

insomnix Reply #7, 14 years, 11 months ago

I had tried:

Ext.getCmp('addon-grid-addoncategory').refresh();

called within the update addon function:

,updateAddon: function(btn,e) {
    if (!this.updateAddonWindow) {
        this.updateAddonWindow = MODx.load({
            xtype: 'addon-window-addon-update'
            ,record: this.menu.record
            ,listeners: {
                'success': {fn:this.refresh,scope:this}
            }
        });
    } else {
        this.updateAddonWindow.setValues(this.menu.record);
        Ext.getCmp('addon-grid-addoncategory').refresh();
    }
    this.updateAddonWindow.show(e.target);
}

This did not work well and I'm not sure where else I can place the refresh. Removing the id line did not make any difference.

160 Posts

insomnix Reply #8, 14 years, 11 months ago

OK, took a break for a few days and came back to it. What I have found using firbug is that when loading the window the below sections of code will fire, but will not fire when opening the update window a second time. So the parent_id is not being passed to the baseparams.

         xtype: (config.record) ? 'addon-grid-addoncategory' : 'hidden'
         ,parent_id: (config.record) ? config.record.ep_id : 0
         ,fieldLabel: _('addon.categories')

        ,baseParams: { 
		action: 'mgr/webisodecategory/getList'
		,webisode_id: config.parent_id || 0 
	} /* pass the id from window to the grid to fill */

I tried adding reset before the setvalues and that didn't help.

this.updateAddonWindow.reset();
this.updateAddonWindow.setValues(this.menu.record);

Anyone have any ideas?

4,149 Posts

splittingred Reply #9, 14 years, 11 months ago

If you have a grid in your window, running setValues on the window will not set the values of the grid. You need to do that explicitly when showing the window with the new values.

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com

160 Posts

insomnix Reply #10, 14 years, 11 months ago

How do I do that?