PDA

View Full Version : ToolBar width



Baron89
16 Sep 2012, 10:04 PM
hi all,how to set the toolbar's width fill the browser ?


tbar: {
xtype: 'toolbar',
buttonAlign: 'right',
items: [
{
xtype: 'button',
text: 'Edit'
},
{
xtype: 'button',
text: 'MyButton'
}
]
}38727

scottmartin
17 Sep 2012, 1:18 PM
It should take the length of the parent container. Perhaps a wider view of your code.

Scott.

Baron89
17 Sep 2012, 7:47 PM
It should take the length of the parent container. Perhaps a wider view of your code.

Scott.
Hi Scott,here's the code


Ext.ns('com.oocl.ir4.bcr.cmn.form');
var idPrefixActivityCri = 'com.oocl.ir4.bcr.cmn.form.activityCri';
com.oocl.ir4.bcr.cmn.form.ActivityCriteriaUi = Ext.extend(Ext.Panel, {
title: 'Activity Criteria',
autoHeight: true,
//layout: 'column',
//anchor: '100%',
initComponent: function() {
this.items = [
{
xtype: 'fieldset',
//title: 'My Fields',
autoHeight: true,
border: false,
layout: 'column',
items:[

{
xtype: 'fieldset',
width: 500,
border: false,
items: [
{
xtype: 'com.oocl.ir4.bcr.common.uicontrol.SuperBoxSelect',
labelSeparator : ':',
allowBlank : true,
emptyText : 'Please select a value',
enableKeyEvents : true,
fieldLabel: 'Activity',
anchor: '100%',
hiddenName : 'activity',
minChars : 0,
mode : 'local',
typeAhead : false,
valueField : 'code',
id:idPrefixActivityCri + '.activity'
//store: 'MyStore'
},
{
xtype: 'textfield',
fieldLabel: 'Location Type',
anchor: '100%',

},
{
xtype: 'textfield',
fieldLabel: 'At',
anchor: '100%',

}
]
},
{
xtype: 'fieldset',
title: '',
width: 236,
height: 139,
border: false
},
{
xtype: 'fieldset',
width: 500,
height: 132,
border: false,
labelWidth: 150,

items: [
{
xtype: 'textfield',
fieldLabel: 'Excluding Location Type',
anchor: '100%',
},
{
xtype: 'textfield',
fieldLabel: 'At',
anchor: '100%',
}, {
xtype: 'fieldset',
border: false,
layout: 'column',
buttonAlign: 'center',
width: 400,
items: [
{
xtype: 'button',
width: '70',
text: 'Add',
cls : 'icon-margin',
},{
xtype: 'button',
width: '70',
text: 'Reset',
cls : 'icon-margin',
}
]
}
]
}

]
},{
xtype: 'fieldset',

border: false,
height: 173,

tbar: {//Hi Scott,here's the tool bar
xtype: 'toolbar',
buttonAlign: 'right',
//width: '500',
items: [
{
xtype: 'button',
width: '70',
text: 'Edit'
},
{
xtype: 'button',
width: '70',
text: 'Remove'
}
]
},
items: [
{
xtype: 'grid',
title: 'Selected Activity Criteria',
autoHeight: true,

store: new com.oocl.ir4.bcr.rr.data.GetRuleDetail(),//TODO
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'gridcolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right'
},
{
xtype: 'gridcolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'gridcolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100
}
]
}
]
}

];
com.oocl.ir4.bcr.cmn.form.ActivityCriteriaUi.superclass.initComponent.call(this);
}
});