[ExtJS] Grid in a tab-panel is cut off at right side when browser scrollbar is visible

375 Posts

gadgetto Reply #1, 12 years, 3 months ago

I have an ExtJS grid inside a tab-panel. If the page is loaded and the browser scroll-bar is visible the grid is cut off at the right side (please have a look at the screenshot).

Here is the JavaScript code for the panel:

GoodNews.panel.Categories = function(config) {
    config = config || {};    
    Ext.applyIf(config,{
        id: 'goodnews-panel-categories'
        ,title: _('goodnews.categories')
        ,defaults: { 
            border: false 
        }
        ,items:[{
            html: '<p>'+_('goodnews.categories_management_desc')+'</p>'
            ,border: false
            ,bodyCssClass: 'panel-desc'
        },{
            xtype: 'goodnews-grid-categories'
            ,cls: 'main-wrapper'
            ,preventRender: true
        }]    
        ,listeners: {
            'activate': {fn: function() {
                Ext.getCmp('goodnews-grid-categories').refresh();
            }
            ,scope: this}
        }
    });
    GoodNews.panel.Categories.superclass.constructor.call(this,config);
};
Ext.extend(GoodNews.panel.Categories,Ext.Panel);
Ext.reg('goodnews-panel-categories', GoodNews.panel.Categories);

And here the layout part of the grid:

GoodNews.grid.Categories = function(config) {
    config = config || {};
    
    Ext.applyIf(config,{
        id: 'goodnews-grid-categories'
        ,url: GoodNews.config.connectorUrl
        ,baseParams: { action: 'mgr/category/getList' }
        ,fields: [
            'id'
            ,'name'
            ,'description'
            ,'goodnewsgroup_id'
            ,'goodnewsgroup_name'
            ,'membercount'
            ,'public'
            ,'menu'
        ]
        ,grouping: true
        ,groupBy: 'goodnewsgroup_name'
        ,singleText: _('goodnews.category')
        ,pluralText: _('goodnews.categories')
        ,primaryKey: 'name'
        ,sortBy: 'name'
        ,sortDir: 'ASC'
        ,paging: true
        ,remoteSort: true
        ,emptyText: _('goodnews.categories_none')
        ,save_action: 'mgr/category/updateFromGrid'
        ,autosave: true
        ,autoExpandColumn: 'description'
        ,collapseFirst: false
        ,columns: [{
            header: _('goodnews.id')
            ,dataIndex: 'id'
            ,sortable: true
            ,width: 30
        },{
        ...

Is there anything I can do to prevent the cut-off?

This question has been answered by gadgetto. See the first response.

Freelancer @bitego http://www.bitego.com
---
GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
More infos here: http://www.bitego.com/extras/goodnews/

☆ A M B ☆
3,112 Posts

goldsky Reply #2, 12 years, 3 months ago

try to add

,preventRender: true

on the Grid's config

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

375 Posts

gadgetto Reply #3, 12 years, 3 months ago

Thanks @goldsky, but this didn't solve the problem.

Also tried to use syncSize (from Ext.BoxComponent) but this only solved the problem half. Now the right border of the grid and the right side of the reset button touches the tab-panel border (please see screenshot).

I checked a few add-ons and it seems many are having this problem.

Freelancer @bitego http://www.bitego.com
---
GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
More infos here: http://www.bitego.com/extras/goodnews/

☆ A M B ☆
3,112 Posts

goldsky Reply #4, 12 years, 3 months ago

Let try the other way around.
After the grid's is rendered, tell the parent component to fix layout.
On grid's config, add listeners: "afterrender", which has this:

Ext.getCmp('goodnews-panel-categories').doLayout();

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

375 Posts

gadgetto Reply #5, 12 years, 3 months ago

Quote from: goldsky at Jul 08, 2014, 04:47 AM

Let try the other way around.
After the grid's is rendered, tell the parent component to fix layout.
On grid's config, add listeners: "afterrender", which has this:
Ext.getCmp('goodnews-panel-categories').doLayout();

Sorry, this also didn't help.
I recognized that the problem lies only in the grid toolbar (not the grid itself) which isn't resized.
This only happens when I activate "Scrollbars: always on" on my Mac. It happens in each browser. Seems the browser scrollbar is rendered after the full content of the window is rendered.

I really don't know how to solve this problem.

Freelancer @bitego http://www.bitego.com
---
GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
More infos here: http://www.bitego.com/extras/goodnews/

☆ A M B ☆
3,112 Posts

goldsky Reply #6, 12 years, 3 months ago

How about to add

,preventRender: true

on GoodNews.panel.Categories ?

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

375 Posts

gadgetto Reply #7, 12 years, 3 months ago

Quote from: goldsky at Jul 08, 2014, 10:42 AM

How about to add
,preventRender: true
on GoodNews.panel.Categories ?

Still no effect.

Freelancer @bitego http://www.bitego.com
---
GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
More infos here: http://www.bitego.com/extras/goodnews/

☆ A M B ☆
3,112 Posts

goldsky Reply #8, 12 years, 3 months ago

How about to add this at the most parent panel component?

afterrender: function(panel) {
    panel.doLayout();
}

or delay a bit

afterrender: function(panel) {
    setTimeout(function(){panel.doLayout();}, 5);
}

I usually use browser's web console, to check which parent affects the component.
We can code it one by one:

Ext.getCmp('goodnews-panel-categories').doLayout();
// usually returns as "undefined", but it is working on the page.
Ext.getCmp('other_component_id').doLayout();
Ext.getCmp('other_component_id').doLayout();

So, *.doLayout(); is the key.

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

375 Posts

gadgetto Reply #9, 12 years, 1 month ago

Sorry for my late response and thanks for your help @goldsky!

I tried all back an forth but nothing helps. It seems I have a general problem with the ExtJS structure in my add-on as all my grids doesn't resize correctly. If I resize the browser window the grid resizes its general width but doesn't match the columns. The right column gets cut off by the grid border.

I think this needs a complete rewrite...

But which is the best way to structure an ExtJS page which holds tabs and grids and so on?

Currently I load the most parent panel by the controller:

$this->addHtml('<script type="text/javascript">
Ext.onReady(function(){
    MODx.add("goodnews-panel-home");
});
</script>');

Here is the relevant part of goodnews-panel-home code:

GoodNews.HomePanel = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'goodnews-panel-home'
        ,cls: 'container'
        ,bodyStyle: ''
        ,unstyled: true
        ,items: [{
            html: '<h2 class="gon-cmp-header gon-logo">'+_('goodnews.management')+'</h2>'
            ,border: false
            ,cls: 'modx-page-header'
        },{
            xtype: 'modx-tabs'
            ,itemId: 'tabs'
	    ,cls: 'structure-tabs'
            ,items: [{
                xtype: 'goodnews-panel-newsletters'
            },{
                xtype: 'goodnews-panel-subscribers'
            },{
                xtype: 'goodnews-panel-groups'
            },{
                xtype: 'goodnews-panel-categories'
            }]
        }]
    });
    GoodNews.HomePanel.superclass.constructor.call(this,config);
    this.init();
};
Ext.extend(GoodNews.HomePanel,MODx.Panel,{
...

The goodnews-panel-newsletters tab (as a sample) contains this:

GoodNews.panel.Newsletters = function(config) {
    config = config || {};    
    Ext.applyIf(config,{
        id: 'goodnews-panel-newsletters'
        ,title: _('goodnews.newsletters')
        ,defaults: { 
            border: false 
        }
        ,items:[{
            html: '<div>'+_('goodnews.newsletters_management_desc')+'</div>'
            ,border: false
            ,bodyCssClass: 'panel-desc'
        },{
            xtype: 'goodnews-grid-newsletters'
            ,cls: 'main-wrapper'
            ,preventRender: true
        }]    
    });
    GoodNews.panel.Newsletters.superclass.constructor.call(this,config);
};
Ext.extend(GoodNews.panel.Newsletters,Ext.Panel);
Ext.reg('goodnews-panel-newsletters', GoodNews.panel.Newsletters);

And here is the grid part (shortened):

GoodNews.grid.Newsletters = function(config) {
    config = config || {};

    // A row expander for newsletter grid rows (additional informations)
    this.nlexpander = new Ext.ux.grid.RowExpander({
        tpl: new Ext.Template(nlInfos)
        ,enableCaching: false
    });

    Ext.applyIf(config,{
        id: 'goodnews-grid-newsletters'
        ,url: GoodNews.config.connectorUrl
        ,baseParams: { action: 'mgr/mailing/getList' }
        ,fields: [
            'id'
            ,'pagetitle'
            ...
            ...
            ...
            ,'menu'
        ]
        ,emptyText: _('goodnews.newsletters_none')
        ,paging: true
        ,remoteSort: true
        ,plugins: [this.nlexpander]
        ,autoExpandColumn: 'pagetitle'
        ,columns: [
        ...

Is this the right (and best) way to structure an ExtJS page?

Freelancer @bitego http://www.bitego.com
---
GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
More infos here: http://www.bitego.com/extras/goodnews/

discuss.answer

375 Posts

gadgetto Reply #10, 12 years, 1 month ago

OK - solved it!

Need to add a listener on 'tabchange' to the panel which holds all tabs, which calls .doLayout() (line 25 - 30):

GoodNews.HomePanel = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'goodnews-panel-home'
        ,cls: 'container'
        ,bodyStyle: ''
        ,unstyled: true
        ,items: [{
            html: '<h2 class="gon-cmp-header gon-logo">'+_('goodnews.management')+'</h2>'
            ,border: false
            ,cls: 'modx-page-header'
        },{
            xtype: 'modx-tabs'
            ,itemId: 'tabs'
            ,cls: 'structure-tabs'
            ,items: [{
                xtype: 'goodnews-panel-newsletters'
            },{
                xtype: 'goodnews-panel-subscribers'
            },{
                xtype: 'goodnews-panel-groups'
            },{
                xtype: 'goodnews-panel-categories'
            }]
            ,listeners: {
                'tabchange': {fn: function(panel) {
                    panel.doLayout();
                }
                ,scope: this}
            }
        }]
    });
    GoodNews.HomePanel.superclass.constructor.call(this,config);
    this.init();
};
Ext.extend(GoodNews.HomePanel,MODx.Panel,{
...

and need to add layout: 'anchor' to the panel which holds the grid (line 6):

GoodNews.panel.Newsletters = function(config) {
    config = config || {};    
    Ext.applyIf(config,{
        id: 'goodnews-panel-newsletters'
        ,title: _('goodnews.newsletters')
        ,layout: 'anchor'
        ,defaults: { 
            border: false
        }
        ,items:[{
            html: '<div>'+_('goodnews.newsletters_management_desc')+'</div>'
            ,border: false
            ,bodyCssClass: 'panel-desc'
        },{
            xtype: 'goodnews-grid-newsletters'
            ,cls: 'main-wrapper'
            ,preventRender: true
        }]
    });
    GoodNews.panel.Newsletters.superclass.constructor.call(this,config);
};
Ext.extend(GoodNews.panel.Newsletters,Ext.Panel);
Ext.reg('goodnews-panel-newsletters', GoodNews.panel.Newsletters);

It works perfect now! Grid resizes as expected and the misaligned elements are gone. [ed. note: gadgetto last edited this post 12 years, 1 month ago.]

Freelancer @bitego http://www.bitego.com
---
GoodNews - one of the most advanced and integrated Group Mailer premium add-ons for MODX Revolution!
More infos here: http://www.bitego.com/extras/goodnews/

Answered [ExtJS] Grid in a tab-panel is cut off at right side when browser scrollbar is visible