PDA

View Full Version : button not showing in form with collapsed panel



scotthathaway
14 Jan 2010, 6:27 PM
I have a form on a panel that collapses. If the panel is collapsed by default, then the button for the form does not show. I had the same problem with combos, but adding forceLayout: true fixed it for them. But, no joy for the button. Can someone tell me how to get the button to render even if the panel is collapsed?

Thx!
Scott

kngai
15 Feb 2010, 7:03 PM
I actually had a similar issue but using a Viewport with 3 collapsible panels in an accordion layout, and each of those collapsible panels having additional panels using the anchor layout. In my case, the panels in the 2nd (middle) collapsible panel were not showing my buttons (in the fbar) or combobox (in the tbar) properly. This only started happening after I upgraded from 3.0 to 3.1. Here's a simplified code of my layout to demonstrate my issue (I'm also using jquery adapter):


Ext.onReady(function() {
Ext.QuickTips.init();

var button1A = new Ext.Button({
text: 'Button 1-A',
minWidth: 80
});
var button1B = new Ext.Button({
text: 'Button 1-B',
minWidth: 80
});
var button2A = new Ext.Button({
text: 'Button 2-A',
minWidth: 80
});
var button2B = new Ext.Button({
text: 'Button 2-B',
minWidth: 80
});
var button3A = new Ext.Button({
text: 'Button 3-A',
minWidth: 80
});
var button3B = new Ext.Button({
text: 'Button 3-B',
minWidth: 80
});

var store_sample1 = new Ext.data.ArrayStore({
fields: ['value', 'text'],
data : [[0, "A"],
[1, "B"],
[2, "C"]
]
});
var store_sample2 = new Ext.data.ArrayStore({
fields: ['value', 'text'],
data : [[0, "D"],
[1, "E"],
[2, "F"]
]
});

var comboBox_sample1 = new Ext.form.ComboBox ({
store: store_sample1,
displayField: 'text',
editable: false,
msgTarget: 'qtip',
width: 200,
listWidth: 200,
typeAhead: true,
mode: 'local',
triggerAction: 'all'
});
var comboBox_sample2 = new Ext.form.ComboBox ({
store: store_sample2,
displayField: 'text',
editable: false,
msgTarget: 'qtip',
width: 200,
listWidth: 200,
typeAhead: true,
mode: 'local',
triggerAction: 'all'
});

var panel_1A = new Ext.Panel({
title: 'Panel 1A',
height: 100,
html: 'contains 2 buttons in fbar',
buttons: [button1A,button1B]
});
var panel_1B = new Ext.Panel({
title: 'Panel 1B',
height: 295,
html: 'contains a combobox in tbar',
tbar: [comboBox_sample1]
});
var panel_1C = new Ext.Panel({
title: 'Panel 1C',
html: '<empty panel>'
});
var panel_2A = new Ext.Panel({
title: 'Panel 2A',
height: 180,
html: 'contains 2 buttons in fbar',
buttons: [button2A,button2B]
});
var panel_2B = new Ext.Panel({
title: 'Panel 2B',
height: 295,
html: 'contains a combobox in tbar',
tbar: [comboBox_sample2]
});
var panel_2C = new Ext.Panel({
title: 'Panel 2C',
html: '<empty panel>'
});
var panel_3A = new Ext.Panel({
title: 'Panel 3A',
anchor: '100%, -290',
html: "contains 2 buttons in fbar. Uses anchor: '100%, -290'",
buttons: [button3A,button3B]
});
var panel_3B = new Ext.Panel({
title: 'Panel 3B',
height: 260,
html: '<empty panel>'
});

var item1 = new Ext.Panel({
title: 'Accordion Item 1',
layout: 'anchor',
defaults: {border: false, animCollapse: true, titleCollapse: true, forceLayout: true},
items: [panel_1A,panel_1B,panel_1C]
});
var item2 = new Ext.Panel({
title: 'Accordion Item 2',
layout: 'anchor',
defaults: {border: false, animCollapse: true, titleCollapse: true, forceLayout: true},
items: [panel_2A,panel_2B,panel_2C]
});
var item3 = new Ext.Panel({
title: 'Accordion Item 3',
layout: 'anchor',
defaults: {border: false, animCollapse: true, titleCollapse: true, forceLayout: true},
items: [panel_3A,panel_3B]
});


var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 350,
layout:'accordion',
layoutConfig: {animate: true, sequence: true}, // sequence is experimental.
defaults: {border:false, autoScroll: true, animCollapse: true, forceLayout: true},
items: [item1, item2, item3]
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
accordion, {
region:'center',
margins:'5 5 5 0',
html: 'A viewport'
}]
});

});I fixed it by needing to specify 'anchor: '100%' as I only used a fixed 'height' and no 'anchor' config.

Why didn't I do this for an anchor layout? I had autoscroll on and so when I shrink the height of my browser size, it would automatically create a vertical scroll-bar so all my fixed height panels can be displayed properly, which was fine with me. However, that vertical scroll bar took up a portion of the panel width, causing it to also create a horizontal scroll-bar to accommodate for this, which I absolutely didn't like and seemed very unnecessary (possible bug? Accordion Item 3 in the above code demonstrates this if you shrink it small enough). So when I didn't specify the anchor config option in the panel, it would automatically adjust the width so the vertical scroll-bar could be displayed without popping up the horizontal scroll-bar.

scotthathaway
15 Feb 2010, 8:45 PM
That worked for me, too.