PDA

View Full Version : Problem With ToolbarWidth



bennie98
23 Feb 2011, 4:36 AM
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
24802

The Result
24803

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
23 Feb 2011, 4:41 AM
Try using the FitToParent plugin (see User Extensions forum) instead of trying to write your own onWindowResize function.

bennie98
23 Feb 2011, 4:49 AM
Could you give me a link pls?

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

thx

Condor
23 Feb 2011, 4:59 AM
Link (http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent)

bennie98
23 Feb 2011, 5:00 AM
thank you :)

will give it a try...

bennie98
25 Feb 2011, 4:49 AM
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.
24863
as you can see at the rightside of the scrollbar.

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

Condor
25 Feb 2011, 5:58 AM
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
25 Feb 2011, 6:07 AM
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 :)