PDA

View Full Version : Text area not changing width... Panel not scrollable..



chris24300
23 Mar 2011, 4:13 AM
Having some issues with my panel

Problem 1: I have a text area that doesn't want to change size even though I'm using boxMinWidth and boxMaxWidth, my layout is vbox... I tried using flex but that didn't do anything either.



{
xtype: 'textarea',
id: "commentArea" + i,
fieldLabel: 'Comment',
// boxMinHeight: 30,
// boxMinWidth: 390,
// boxMaxWidth: 450,
autoHeight: true,
// autoWidth: false,
autoScroll: true,
flex: 1,
value: list[i].comment
}

Problem 2: I dynamically create a number of fieldsets (1-20) and when the fieldsets go below the panel the scroll bars don't appear, I have autoScroll on true but didn't do anything.. I've placed autoScroll: true in the parent container, the form itself, called the function after adding my recipes, but no scroll bar appears..


Thanks!

mcadirci
23 Mar 2011, 4:54 AM
Hello,

Did you tried width for first problem?

If you have a panel(panel1) that has another panel (panel2) with fieldsets.
You need to set panel2's autoscroll true.

chris24300
23 Mar 2011, 6:28 AM
Thanks mcadirci, width worked.. I don't know why I didn't use it in the first place.

I've been trying everything with autoScroll, I have put it in every place possible. Or are you saying I need to have it in the child panel and not in the others?

Here's my setup



// in my constructor
config = Ext.apply(config || {}, {}, {
layout: 'fit',
// autoScroll: true,
unstyled: true,
contentWidth: 500,
width: 490,
title: 'Recipes',
items: [{
xtype: 'panel',
layout: 'vbox',
unstyled: true,
width: 490,
// autoScroll: true,
items: [ this.recipePanel ]
}]
}); // config

// my recipePanel
this.recipePanel = new Ext.FormPanel({
id: 'recipePanel',
header: false,
width: 485,
autoHeight: true,
autoScroll: true,
items: []
}); // recipePanel

// and after I add items to recipePanel I tried
this.recipePanel.setAutoScroll(true);
// but that didn't work either


?? any ideas ??

mcadirci
23 Mar 2011, 6:39 AM
Hello again,
If I were you, I would try smt like


// in my constructor
config = Ext.apply(config || {}, {}, {
layout: 'fit',
// autoScroll: true,
unstyled: true,
autoScroll: true,
contentWidth: 500,
width: 490,
title: 'Recipes',
items: [{
xtype: 'panel',
autoScroll: true,
layout: 'vbox',
unstyled: true,
width: 490,
// autoScroll: true,
items: [ this.recipePanel ]
}]
}); // config

// my recipePanel
this.recipePanel = new Ext.FormPanel({
id: 'recipePanel',
header: false,
width: 485,
autoHeight: true,
autoScroll: true,
items: []
}); // recipePanel



This would probably work. If it works, try removing the autoscroll config params one by one to eleminate unneccessary ones.

chris24300
23 Mar 2011, 7:23 AM
That didn't do anything either, I didn't realize the order may affect the output... I wish this were easier to debug. I've been trying to put it everywhere possible but nothing works, I don't know what else to do... :-/

chris24300
23 Mar 2011, 7:26 AM
But if I set autoscroll for the text area that works like a charm... Do I need to set the panel autoscroll true for every fieldset item I add, meaning set true through every iteration in my loop?

mcadirci
23 Mar 2011, 7:39 AM
Actually the auto scroll property is not that hard to use. If you could post sample codes that shows your problem, I can help you more.
To have simpler code, try to avoid panels in panels.

chris24300
23 Mar 2011, 8:22 AM
AHH!! that was the problem :-| I posted my code above, and in the items[] i have a panel with item[] of my recipePanel, I got rid of that second panel and viola.

Thanks!