PDA

View Full Version : layout problem with combobox in tbar



nightdrift
7 Jul 2009, 11:46 PM
I have a combobox that is inside a tbar. I also have buttons after the combo box.
There are 2 issues:
1 - the buttons after the combobox are being rendered under the combobox in both firefox and IE
2 - in firefox only, the width of the drop down selection is about 80px when the width of the combobox itself is 250px.
I have checked in firebug and as far as I can see there is no css being set that is causing this issue.
Is anyone else having similar issues?




this.form = new sams.SaveChangesForm({
title : 'Maintenance',
layout :'fit',

defaults : {
anchor : '97%'
},

tbar :
[{
iconCls : 'icon-maintenance-add',
text : 'Planned Maintenance',
id : 'plannedMaintenanceButtion',
name : 'plannedMaintenanceButtion',
tooltip: {anchor: 'right', text:'Add new node to three menu.', title:'Add New Node'},
handler : function(){
maintenanceForm = new sams.app.formMaintenanceAddPlanned(root);
maintenanceForm.show();
}
},
'-',
{
iconCls : 'icon-arrow-down',
text : 'Action Planned Maintenance',
id : 'actionPlannedMaintenanceButtion',
handler : function()
{
if(root.gridPlanned.selModel.selections.keys == ''){
alert('You must select the asset you wish to action from the Planned Maintenance grid.');
}else{
var idKey = root.gridPlanned.selModel.selections.keys;
var record = root.gridPlanned.getStore().getById(idKey);

maintenanceForm = new sams.app.formMaintenanceActionPlanned(root);
maintenanceForm.show();
maintenanceForm.loadData(record);
}
}
},'-',
{
xtype : 'combo',
id : 'plannedMaintenanceFundingTypeFilter',
typeAhead : false,
editable : false,
selectOnFocus : true,
width : 250,
triggerAction : 'all',
emptyText : 'Funding Type << ALL >>',
store : this.comboFundingType,
valueField : 'value',
displayField : 'label',
listeners :
{
'select' : function (combo,record)
{
value = record.data.value;
root.dataPlanned.baseParams.fundingType = value;
root.dataPlanned.load({params:{start:0, limit:25}});
root.dataActual.baseParams.fundingType = value;
root.dataActual.load({params:{start:0, limit:25}});
}
}
},'-',
{
iconCls : 'icon-arrow-down',
text : 'test button with really really really really really really long label',
id : 'testPlannedMaintenanceButtion',
handler : function()
{
if(root.gridPlanned.selModel.selections.keys == ''){
alert('You must select the asset you wish to action from the Planned Maintenance grid.');
}else{
var idKey = root.gridPlanned.selModel.selections.keys;
var record = root.gridPlanned.getStore().getById(idKey);

maintenanceForm = new sams.app.formMaintenanceActionPlanned(root);
maintenanceForm.show();
maintenanceForm.loadData(record);
}
}
},'-',
{
id : 'addUnplannedMaintenanceButton',
iconCls : 'icon-maintenance-unplanned',
text : 'Unplanned Maintenance',
handler : function()
{
Ext.MessageBox.confirm('Add unplanned maintenance', 'This functionality is only to be used when carrying out emergency or incident maintenece that has an existing funding source (actual message to be determined)',
function(btn)
{
if (btn == 'yes')
{
maintenanceForm = new sams.app.formMaintenanceAddUnplanned(root);
maintenanceForm.show();
//maintenanceForm.form.getForm().loadData(root.id, root.level);
maintenanceForm.loadData();
}
}
);

}
}
],


items:
[{
layout: 'border',
items: [
this.gridPlanned,
this.gridActual
]
}],

loadData : function(id, level){
root.level = level;
root.id = id;
root.dataPlanned.baseParams.node = id + '|' + level;
root.dataPlanned.load({params:{start:0, limit:25}});
root.dataActual.baseParams.node = id + '|' + level;
root.dataActual.load({params:{start:0, limit:25}});
}
});

djSeverin
9 Jul 2009, 10:27 PM
This really shouldn't be happening, but you could try applying a pad and margin to the button that is not positioning correctly.

Looks bug-ish... Can anyone else confirm?

{
id : 'addUnplannedMaintenanceButton',
iconCls : 'icon-maintenance-unplanned',
text : 'Unplanned Maintenance',
// FIXME: style hack to overide layout problem
style : 'padding-left: 160px; margin-left: 12px;',
handler : function()
{

} // end of handler
}

djSeverin
10 Jul 2009, 5:17 AM
I am going to reference:

http://extjs.com/forum/showthread.php?t=47360

As this looks to be similar to this problem...

djSeverin
10 Jul 2009, 6:30 PM
The fault seems to be that when a combo is created in the toolbar on a TabPanel the width of the parent DIV is not set correctly, instead its set to 0px. The end result is that any widget drawn after appears misaligned or is rendered behind said combo.

Below is the source produced after your code is rendered by ExtJS 3.0.0, the problem is coloured red:



<td id="ext-gen867" class="x-toolbar-cell">

<div id="ext-gen868" class="x-form-field-wrap x-form-field-trigger-wrap
x-trigger-wrap-focus" style="width: 0px;">

<input id="plannedMaintenanceFundingTypeFilter" class="x-form-text x-form-field x-trigger-noedit
x-form-focus" type="text" name="plannedMaintenanceFundingTypeFilter" autocomplete="off"
size="24" readonly="true"/>

<img id="ext-gen869" class="x-form-trigger x-form-arrow-trigger" src="http://127.0.0.1/common/lib/
ext/ext-3.0.0/resources/images/default/s.gif"/>

</div>


</td>
I have no idea how to fix this though sorry.

This may well be a bug. Though really need to wait for one of the ExtJS experts to look at this one.

Animal
10 Jul 2009, 11:44 PM
Use hideMode: 'offsets' on the Panel.

Animal
10 Jul 2009, 11:56 PM
Actually, I can't reproduce this in Ext 3.0 even when not using hideMode: 'offsets'

Animal
10 Jul 2009, 11:59 PM
But why have your SaveChangesForm layout: 'fit', and Containing a Panel which has



items:
[{
layout: 'border',
items: [
this.gridPlanned,
this.gridActual
]


???

That's just a waste.

Make your SaveChangesForm layout: 'border', and use this.gridPlanned and this.gridActual as its children.

You would find your code much more understandable with correct indentation.

djSeverin
11 Jul 2009, 5:25 AM
Ext version tested:
ExtJS 3.0.0 Public Release (Does not work properly)
ExtJS 3.0-rc2 (Works properly)
Adapter used:
ext
Browser versions tested against:
FF3.5 (firebug installed)
Safari 4
Operating System:
Mac OS 10.5
WinXP Pro
Description:
See screenshots
Test Case:

Pasting code in here breaks my code formatting...

this.form is placed into an Ext.TabPanel which is sitting inside an Ext.Viewport



this.form = new Ext.Panel({

title : 'Maintenance',
layout : 'border',
defaults: {
anchor : '97%'
},

tbar: [{
iconCls : 'icon-maintenance-add',
text : 'Planned Maintenance',
id : 'plannedMaintenanceButton',
name : 'plannedMaintenanceButton',
// tooltip: {anchor: 'right', text:'Add new node to three menu.', title:'Add New Node'},
handler : function(){
maintenanceForm = new sams.app.formMaintenanceAddPlanned(root);
maintenanceForm.show();
}
},'-',{
iconCls : 'icon-arrow-down',
text : 'Action Planned Maintenance',
id : 'actionPlannedMaintenanceButtion',
handler : function()
{
if(root.gridPlanned.selModel.selections.keys == ''){
alert('You must select the asset you wish to action from the Planned Maintenance grid.');
}
else{
var idKey = root.gridPlanned.selModel.selections.keys;
var record = root.gridPlanned.getStore().getById(idKey);

maintenanceForm = new sams.app.formMaintenanceActionPlanned(root);
maintenanceForm.show();
maintenanceForm.loadData(record);
}
}
},'-',{
xtype : 'combo',
id : 'plannedMaintenanceFundingTypeFilter',
typeAhead : false,
editable : false,
selectOnFocus : true,
width : 150,
listWidth : 130,
triggerAction : 'all',
emptyText : 'Funding Type << ALL >>',
store : this.comboFundingType,
valueField : 'value',
displayField : 'label',
listeners :
{
'select' : function (combo,record)
{
value = record.data.value;
root.dataPlanned.baseParams.fundingType = value;
root.dataPlanned.load({params:{start:0, limit:25}});
root.dataActual.baseParams.fundingType = value;
root.dataActual.load({params:{start:0, limit:25}});
}
}
},'-',{
id : 'addUnplannedMaintenanceButton',
iconCls : 'icon-maintenance-unplanned',
text : 'Unplanned Maintenance',
name : 'addUnplannedMaintenanceButton',
handler : function()
{
Ext.MessageBox.confirm('Add unplanned maintenance', 'This functionality is only to be used when carrying out emergency or incident maintenance that has an existing funding source (actual message yet to be determined)',
function(btn)
{
if (btn == 'yes')
{
maintenanceForm = new sams.app.formMaintenanceAddUnplanned(root);
maintenanceForm.show();
//maintenanceForm.form.getForm().loadData(root.id, root.level);
maintenanceForm.loadData();
}
}
); // end MessageBox.confirm()

} // end handler

}], // end of tbar definition

items:
[
this.gridPlanned,
this.gridActual
],

loadData : function(id, level){
root.level = level;
root.id = id;
root.dataPlanned.baseParams.node = id + '|' + level;
root.dataPlanned.load({params:{start:0, limit:25}});
root.dataActual.baseParams.node = id + '|' + level;
root.dataActual.load({params:{start:0, limit:25}});
}

});

Steps to reproduce the problem:
In ExtJS 3.0.0 public release, it doesn't transform a combo placed onto a toolbar correctly, leaving its parent DIV with a style width=0px;
In ExtJS 3.0-rc2 it transforms a combo correctly and places into toolbar with parent div being styled with width=150px.
The result that was expected:
Toolbar seperator and button placed on Toolbar following combo should be aligned properly and rendered to the right hand side of the combo.
The result that occurs instead:
When ExtJS 3.0.0 Public Release is used, the combo defined as a toolbar item is not transformed correctly in firefox or Safari.

In firefox, the parent DIV is rendered with a width of 0px, resulting in the toolbar seperator and the following toolbar button appearing underneath the combo widget.

eg:


<td id="ext-gen865" class="x-toolbar-cell"> <div id="ext-gen866" class="x-form-field-wrap x-form-field-trigger-wrap" style="width: 0px;">
<input id="plannedMaintenanceFundingTypeFilter" class="x-form-text x-form-field x-trigger-noedit x-form-empty-field" type="text" name="plannedMaintenanceFundingTypeFilter" autocomplete="off" size="24" readonly="true" style="width: 150px;"/>

<img id="ext-gen867" class="x-form-trigger x-form-arrow-trigger" src="http://127.0.0.1/common/lib/ext/ext-3.0.0/resources/images/default/s.gif"/>


</div>


</td>
In safari, it sort of works, but the trigger arrow renders to the left hand side of the combo widget...
Below is the code when rendered using ExtJS 3.0-RC2, the difference highlighted in red:

<td id="ext-gen760" class="x-toolbar-cell"> <div id="ext-gen761" class="x-form-field-wrap x-form-field-trigger-wrap" style="width: 150px;">
<input id="plannedMaintenanceFundingTypeFilter" class="x-form-text x-form-field x-trigger-noedit x-form-empty-field" type="text" name="plannedMaintenanceFundingTypeFilter" autocomplete="off" size="24" readonly="true" style="width: 133px;"/>

<img id="ext-gen762" class="x-form-trigger x-form-arrow-trigger" src="http://10.0.2.3/common/lib/ext/ext-3.0-rc2/resources/images/default/s.gif"/>


</div>


</td>

Screenshot or Video:
attached
Debugging already done:
removed all overides and CSS, problem persists.
Attempted to directly affect parent DIV and add a style width=150px, but unable to achieve this. Most likely due to personal lack of experience using ExtJS.
Possible fix:
Am out of idea's. Been at this since last night and not making any headway.

The only other forum post that comes close is :
http://www.yui-ext.com/forum/showthread.php?t=67274

Animal
11 Jul 2009, 5:31 AM
That is not a testcase.

Here's a testcase which drops UNCHANGED into examples/<anywhere>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<script type="text/javascript" src="tabs-example.js"></script>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<script type="text/javascript">
Ext.onReady(function(){

tabs = new Ext.TabPanel({
renderTo: document.body,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
items: [{
title: 'New Tab 1',
html: 'Tab Body 1',
closable: true,
hideMode: 'offsets'
}, {
title: 'New Tab 2',
html: 'Tab Body 2',
tbar: {
items: {
xtype: 'combo',
store: [['CA', 'California'], ['CO', 'Colorado']]
}
}
}]
});
});
</script>
</head>
<body>
</body>
</html>


And I see no problem.

Can you reproduce it?

djSeverin
11 Jul 2009, 6:18 AM
I am unable to reproduce the error, even when my tab is spiced into your test code.

I will need to recreate the same environment for you and send you the code. All I can assume is that when a Toolbar is placed in a Panel in a TabPanel within a Viewport something goes wrong.

The following code works just fine. Will have to keep digging.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<script type="text/javascript" src="tabs-example.js"></script>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<script type="text/javascript">
Ext.onReady(function(){


myBrokenTab = function(){

var root = this;

this.gridPlanned = new Ext.grid.GridPanel({
title : 'Planned',
store : this.dataPlanned,
region : 'north',
height : 75,
maxSize : 350,
minSize : 150,
height : 250,
split : true,
autoScroll : true,
border : true,

bbar: new Ext.PagingToolbar({
pageSize : 25,
store : this.dataPlanned,
displayInfo : true,
displayMsg : 'Displaying rows {0} - {1} of {2}',
emptyMsg : "No rows to display"
}),

listeners: {

},

viewConfig:{
forceFit : true,
hideGroupedColumn : true,
groupTextTpl : '{text}',
showGroupName : false,
enableNoGroups : false
},

columns: [
{
id :'planned_maintenance_description',
header : "Maintenance",
width : 50,
sortable : true,
locked : true,
dataIndex : 'planned_maintenance_description'
},{
id :'planned_trade_description',
header : "Trade",
width : 40,
dataIndex : 'planned_trade_description'
},{
id :'planned_cycle',
header : "Cycle",
width : 10,
sortable : true,
dataIndex : 'planned_cycle'
},{
id :'planned_last_done',
header : "Last Date",
width : 20,
sortable : true,
dataIndex : 'planned_last_done'
},{
id :'planned_safety_risk_rating',
header : "Risk",
width : 20,
sortable : true,
dataIndex : 'planned_safety_risk_rating'
}
],

loadData : function(id, level){

}
});


this.gridActual = new Ext.grid.GridPanel({
title : 'Actual',
store : this.dataActual,
loadMask : true,
plain : true,
region : 'center',
autoScroll : true,
border : true,

bbar: new Ext.PagingToolbar({
pageSize: 25,
store: this.dataActual,
displayInfo: true,
displayMsg: 'Displaying rows {0} - {1} of {2}',
emptyMsg: "No rows to display"
}),

listeners: {

},

viewConfig: {
forceFit : true,
hideGroupedColumn : true,
groupTextTpl : '{text}',
showGroupName : false,
enableNoGroups : false
},

columns: [{
id : 'last_done',
header : "Last Date",
width : 20,
sortable : true,
dataIndex : 'last_done'
},{
id : 'maintenance_description',
header : "Maintenance",
width : 50,
sortable : false,
locked : true,
dataIndex : 'maintenance_description'
},{
id : 'trade_description',
header : "Trade",
width : 40,
sortable : true,
dataIndex : 'trade_description'
},{
id : 'cycle',
header : "Cycle",
width : 10,
sortable : true,
dataIndex : 'cycle'
}],

loadData : function(id, level){

}
});




this.form = new Ext.Panel({



title : 'Maintenance',
layout : 'border',
defaults: {
anchor : '97%'
},

tbar: [{
iconCls : 'icon-maintenance-add',
text : 'Planned Maintenance',
id : 'plannedMaintenanceButton',
name : 'plannedMaintenanceButton',
// tooltip: {anchor: 'right', text:'Add new node to three menu.', title:'Add New Node'},
handler : function(){

}
},'-',{
iconCls : 'icon-arrow-down',
text : 'Action Planned Maintenance',
id : 'actionPlannedMaintenanceButtion',
handler : function()
{

}
},'-',{
xtype : 'combo',
id : 'plannedMaintenanceFundingTypeFilter',
typeAhead : false,
editable : false,
selectOnFocus : true,
width : 150,
listWidth : 130,
float : false,
triggerAction : 'all',
emptyText : 'Funding Type << ALL >>',
store : this.comboFundingType,
valueField : 'value',
displayField : 'label',
// hideLabel : true,
listeners :
{
'select' : function (combo,record)
{

}
}
},'-',{
id : 'addUnplannedMaintenanceButton',
iconCls : 'icon-maintenance-unplanned',
text : 'Unplanned Maintenance',
name : 'addUnplannedMaintenanceButton',
handler : function()
{


} // end handler

}], // end of tbar definition

items:
[
this.gridPlanned,
this.gridActual
]

});


return this.form;

};

brokenTab = new myBrokenTab;

tabs = new Ext.TabPanel({
renderTo: document.body,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:900,
height:250,
defaults: {autoScroll:true},
items: [{
title: 'New Tab 1',
html: 'Tab Body 1',
closable: true,
hideMode: 'offsets'
}, {
title: 'New Tab 2',
html: 'Tab Body 2',
tbar: [
{
text : 'Planned Maintenance',
id : 'plannedMaintenanceButton',
name : 'plannedMaintenanceButton'
},
'-',
{
xtype: 'combo',
store: [['CA', 'California'], ['CO', 'Colorado']]
},
'-',
{
text : 'Action Planned Maintenance',
id : 'actionPlannedMaintenanceButtion'
}]


},

brokenTab

]
});
});
</script>
</head>
<body>
</body>
</html>

djSeverin
12 Jul 2009, 8:28 PM
Since my last post, I've been to trying reproduce this error inside the test code you sent me, but have had no success.

With regard to the app I am working on, the only things I have found are:

* when the Ext.TabPanel's attribute "deferredRender: false" is changed to True, the toolbar with Combo renders correctly;

* deferredRender can be left 'false', IF the "activeTab" attribute of the Ext.TabPanel is used to make the problematic child FormPanel appear first. If the problem Panel renders first, its fine, if it is rendered but not visible initially, the problem occurs.

I have tried using "hideMode: 'offsets'", but this has no effect.

Can anyone provide any further clue's?

kshaikh
13 Nov 2009, 2:59 AM
In my case the combobox on FF is not rendering properly. Combobox is inside a toolbar and toolbar is in some hidden container. I have tried "hideMode: 'offsets'", deferredRender : true but no effect. did you find any other clue?
I am using EXtjs 3.0.

<div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen330" style="width: 0px;">
<input type="text" name="test" id="someName" autocomplete="off" size="24" class=" x-form-text x-form-field"/>
<img class="x-form-trigger x-form-arrow-trigger" src="somename" id="ext-gen331"/></div>

djSeverin
15 Nov 2009, 11:46 PM
This is a weird problem. I've not been able to reproduce it outside of the app I was writing. If you can write a controlled, reproducable test case, please post it.

Anyways, to get around this problem I added the combo to the toolbar within a panel:


{
// Combo on a toolbar hack ...
xtype : 'panel',
width : 199,
autoHeight : true,
layout : 'fit',
bodyBorder : false,
frame : false,
border : false,
bodyStyle : 'background-color: transparent; padding-top: 2px;',
items :[{
xtype : 'combo',
id : 'myComboId',
store : this.comboStore,
mode : 'remote',
width : 180,
listWidth : 180,
triggerAction : 'all',
emptyText : 'My combo label...',
valueField : 'value',
displayField : 'label
}] // EO Combo
} // EO panel

kshaikh
23 Nov 2009, 3:11 AM
Thanks it worked :). But is it the only solution? Sorry, can not create the custom example. In my case I have four divs and only div will be hidden=false at a time. Inside div all the items are there like gridpanel > has titlebar > has right align items(one of them is combobox). when I make div hidden=false then all items get placed properly except combobox.

kshaikh
4 Mar 2010, 1:16 AM
c