Problem With ToolbarWidth

[bennie98]

Hello

I'm having a problem with my toolbar width.
When the page is refreshed it renders with a correct width, but when you try to resize you window then the toolbar isn't resizing with it.

The grid itself however does resize along with the window.

I've tried plenty of things and I can't seem to figure out what the mistake is I am making...

The Code
Screen shot 2011-02-23 at 13.31.45b.jpg

The Result
Screen shot 2011-02-23 at 13.23.27b.jpg

If anyone could help this would be much appreciated.

Best Regards

Bennie98


edit: code not visible on screenshot due to resizing..

Ext.onReady(function(){

    Ext.QuickTips.init();

    var xg = Ext.grid;
	

    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
       {name: 'company'},
       {name: 'price', type: 'float'},
       {name: 'change', type: 'float'},
       {name: 'pctChange', type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
       {name: 'industry'},
       {name: 'desc'}
    ]);

    var store = new Ext.data.GroupingStore({
            reader: reader,
            data: xg.dummyData,
            sortInfo:{field: 'company', direction: "ASC"},
            groupField:'industry'
        });

    var grid = new xg.GridPanel({
        
        store: store,
        columns: [
            {id:'company',header: "***", width: .50, sortable: true, dataIndex: 'company'},
            {id:'duration',header: "***", width: .125, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price', align:'center',},
            {id:'cost',header: "***", width: .125, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney, align:'center',},
            {id:'last',header: "***", width: .125, sortable: true, dataIndex: 'industry', align:'center',},
            {id:'date',header: "***", width: .125, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', align:'center',}
        ],
    

        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),

        //frame:true,
        height: 606,
        //collapsible: true,
        //animCollapse: false,
        title: '***',
        tbar  : new Ext.Toolbar (
				{height:25,
                windowResize:true,
				 items:[ 
							 {text:'***',
           					  handler : function(){store.clearGrouping();}},
		'   ',{text: '***'},
		'   ',{text: '***t'},
		'   ',{text: '***'},
		'   ',{text: '***'}
				],}
				)
		});
	
	var outer = new Ext.Panel({
		height: 606
		})
	outer.add(grid)
	outer.render(document.body)
    
    Ext.EventManager.onWindowResize(function() {
    grid.getView().refresh();
                                });
    });

In the CSS-file I've created these settings for ext-gen12 :

#ext-gen12 {
    position:absolute;
    top:150px;
    left:20px;
    right:485px;
    padding:0px;
	margin:0px;
	border:0;
}

I don't know if it has got anything to do with the problem.... I don't think so, but you never know

[Condor]

Try using the FitToParent plugin (see User Extensions forum) instead of trying to write your own onWindowResize function.

[bennie98]

Could you give me a link pls?

I'm new here and I'm not yet familiar with the entire forum.

thx

[Condor]

Link

[bennie98]

thank you

will give it a try...

[bennie98]

I've implemented the plugin and it works, but my toolbar is now situated behind the gridpanel instead of above the table in the gridpanel...
I don't know what made this happen, but I presume it has got something to do with the plugin.
Screen shot 2011-02-25 at 13.46.41.jpg
as you can see at the rightside of the scrollbar.

what can I do to get the toolbar in the grid again?

[Condor]

1. Remove that css rule.
2. Add the FitToParent plugin to the outer panel and configure it with fitHeight:false.
3. Make the outer panel layout:'fit'.

ps. Why are you even using an outer panel?

[bennie98]

the outer panel isn't there anymore...

I've deleted the CSS as you said and now it's working again

Thx for your patience.
I'm only just starting to learn JS.
So, I haven't really grasped the css connection yet.
It's going to take a while to get used to the way of working, slow but steady