Grid Column Width Issue

223 Posts

thefutureforward Reply #1, 11 years, 1 month ago

I'm specifying my grid column widths like normal at 160, but the end result is not favorable (screengrab attached). I'd love for it to be split 50% for each column (filling the whole width of the page) and for the widths to be fluid.

Using the latest version of MIGX (2.9.4-pl). Has the manner in which we specify column widths changed? Let me know.

Here's my existing code:

[
    {
        "header": "Image", 
        "width": "160", 
        "sortable": "false", 
        "dataIndex": "block_image",
        "renderer": "this.renderImage"
    },
    {
        "header": "Block Type",
        "width": "160",
        "sortable": "true",
        "dataIndex": "block_type"
    }
]

[ed. note: presson83 last edited this post 11 years, 1 month ago.]

Nick Hoag
Creative Partner
The FutureForward

http://thefutureforward.com

223 Posts

thefutureforward Reply #2, 11 years, 1 month ago

Bump

Bruno, any thoughts here?

Nick Hoag
Creative Partner
The FutureForward

http://thefutureforward.com

223 Posts

thefutureforward Reply #3, 10 years, 11 months ago

Another bump

Nick Hoag
Creative Partner
The FutureForward

http://thefutureforward.com

5,888 Posts

Bruno17 Reply #4, 10 years, 11 months ago

I'm on 2.9.6 here.
It does resize, when changing the tabs above, for me.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

60 Posts

sebastian-marinescu Reply #5, 10 years, 10 months ago

It does resize for me too, when changing the tabs.

But this isn't a great user-experience.

You know where I could take a look? Maybe I could help you with that issue.

5,888 Posts

Bruno17 Reply #6, 10 years, 10 months ago

you need to find a event, when everything is in place and before one sees the grid.
You can't get a correct size, before a TV-tab was opened (It doesn't have the size before it was opened once).
So it was the only way I've found to get the grid resized to the width of the tab-panel with this:

https://github.com/Bruno17/MIGX/blob/master/core/components/migx/elements/tv/migx.tpl#L473

Have fun!

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

60 Posts

sebastian-marinescu Reply #7, 10 years, 10 months ago

Quote from: Bruno17 at Dec 04, 2015, 05:33 AM

https://github.com/Bruno17/MIGX/blob/master/core/components/migx/elements/tv/migx.tpl#L473

Have fun!

Okay, I had some fun, and now I'm done

var MIGx = MIGx || {};

MIGx.updateGrid = function() {
	var grids = this.el.select('.tv_modx-grid-multitvgrid_items');
	grids.each(function(grid){
		Ext.getCmp(grid.id).getView().refresh();
	});  
};

Ext.ComponentMgr.onAvailable('modx-resource-tabs', function() {
    Ext.apply(this, {
		listeners: {
            tabchange: MIGx.updateGrid,
            afterlayout: MIGx.updateGrid,
            resize: MIGx.updateGrid
        }
	});
    
});

This works. I just tested it, it does what it should.
Also registering to resize is a good idea.

I would prepare a Pull-Request, if the separated JS-Function doesn't bother you.
What do you think?

5,888 Posts

Bruno17 Reply #8, 10 years, 10 months ago

Very cool.
I've added your code allready. No Pull necessary.
Thank you!

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

60 Posts

sebastian-marinescu Reply #9, 10 years, 10 months ago

Also cool

You're welcome, glad I could help!