PDA

View Full Version : Textfield height is set to 0px after collapsing the panel



dneuber
7 Jul 2010, 3:01 AM
Hi Guys,

I have a problem with a textfield contained in a collapsible panel (filterpanel). This panel is, together with a gridpanel, within a tabpanel. On first rendering the filterpanel is collapsed. If I expand it, the textfield is rendered correctly. If I collapse it, than open and close firebug and then expand the filterpanel again, the height of the textfield is set to 0px. All other controls within the filterpanel are rendered correctly.

Does anyone know, why this happened. Setting the height of the textfield does not solve this problem.

Thanks,
Daniel

Condor
7 Jul 2010, 3:38 AM
Rendering in a display:none element is still a problem for Ext.

Could you render the panel expanded and then collapse it?

A different solution is to change the panel collapse action to hide the bwrap with offsets instead of display (but this requires overriding some methods).

dneuber
7 Jul 2010, 10:12 PM
Hi Condor,

thanks for your quick response. Sorry that my answer is a bit late. The collapsible panel is collapsed at the beginning everything is fine, except when using firebug. As an additional information, I'm using Ext version 3.1.0 (for now). You can test it with the following code snippet.

You can reproduce that issue by loading the page, activate firebug (firebug panel is shown) and than expand the filter panel.



Ext.onReady(function() {
var filterTextField = new Ext.form.TextField({
value: '',
flex: 1,
enableKeyEvents: true
});

var clearButton = new Ext.Button({
iconCls: 'close',
disabled: false
});

var textpan = new Ext.Panel({
layout: 'hbox',
fieldLabel: 'Textfilter',
border: false,
defaults: {
margins: '0 4 3 0'
},
items: [filterTextField, clearButton]
});

var cbx = new Ext.form.ComboBox({
typeAhead: true,
width: 120,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
store: new Ext.data.ArrayStore({
fields: ['name', 'label', 'type'],
data: [['CreatedDate', 'Erstellungsdatum', 'date'], ['LastModifiedDate', 'Datum der letzten Modifizierung', 'date']]
}),
valueField: 'name',
displayField: 'label'
});

var fieldPanel = new Ext.Panel({
layout: 'hbox',
fieldLabel: 'Feldfilter',
border: false,
defaults: {
margins: '0 4 3 0'
}
});

fieldPanel.add(cbx);
fieldPanel.add(new Ext.Container({ flex: 1 }));
fieldPanel.add(new Ext.Button({ iconCls: 'close' }));

var filterPanel = new Ext.Panel({
title: 'Filter',
animCollapse: false,
collapsible: true,
collapsed: true,
width: '100%',
height: '150',
border: false,
bodyCssClass: 'x-panel-mc',
bodyStyle: 'padding:5px 5px 0',
autoScroll: true,
layout: 'form',
labelWidth: 70,
bbar: {
layout: 'hbox',
layoutConfig: { pack: 'end', align: 'middle' },
defaults: {
margins: '0 0 0 3',
width: 80
},
items: [
{ text: 'Cancel', handler: function(btn) { btn.ownerCt.ownerCt.collapse(); } }
]
},
items: [textpan, fieldPanel]
});

var onFilterPanelExpandCollapse = function(p) {
p.setHeight(200);
p.ownerCt.doLayout();
};

filterPanel.on({
'collapse': onFilterPanelExpandCollapse,
'expand': onFilterPanelExpandCollapse,
scope: this
});

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

store.loadData(myData);

function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

var grid = new Ext.grid.GridPanel({
width: '100%',
flex: 1,
trackMouseOver: false,
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
autoExpandColumn: 'company',
autoHeight: false,
autoScroll: true,
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true
})
});

var firstPanel = new Ext.Panel({
layout: 'vbox',
title: 'Test filter',
border: false,
layout: { type: 'vbox', align: 'stretch' },
items: [filterPanel, grid]
});

var centerPanel = new Ext.TabPanel({
region: 'center',
activeTab: 0,
items: [firstPanel]
});

new Ext.Viewport({
layout: 'border',
defaults: { border: false, frame: true },
items: [{
title: 'West',
region: 'west',
html: '<b>West</b>',
width: 200
},{
title: 'East',
region: 'east',
html: '<b>East</b>',
width: 200
},{
title: 'North',
region: 'north',
html: '<b>North</b>',
height: 100
}, centerPanel]
});
});

dneuber
8 Jul 2010, 5:51 AM
This problem is solved now, and only for Ext version 3.1.0. To solve this, write the following



var textpan = new Ext.Panel({
height: 24,
layout: { type: 'hbox', align: 'stretch' },
fieldLabel: this.textFilterLabel,
border: false,
defaults: {
margins: '0 4 3 0'
},
items: [
this.filterTextField,
this.clearButton
]
});


One of my first solutions was to use border layout. But with this, you have no titles in collapsed panels. Is there a possibility to show titles in collapsed panels within border layout?

Daniel