PDA

View Full Version : Fit layout on single form item



gordonk66
16 Jun 2010, 10:01 AM
Hello,
I'm trying to have a small window that will only contain a mulitselect that 'fits' the panel in the window.
My problem is I can't get the multiselect component to fill the formpanel. It always defaults to a height and width of 100 .
Here is my code:


var win = new Ext.Window(
{
width: 250,
height: 200,
id: 'inboxSelectGroupsWindow',
title: 'Select Groups', //TODO Localize
maximizable: false,
layout: 'fit',
modal: false,
buttonAlign: 'left',
items: [
{
xtype: 'form',
border: false,
items: [
{
xtype: 'multiselect',
name: 'multiselect',
id: 'inboxGroupMS',
allowBlank: false,
//width: 250,
//height: 200,
store: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
ddReorder: true
}]
}],
bbar: [
{
text: 'Apply Filter',
scope: this,
minWidth: 69,
handler: function()
{
log.trace("Entering click handler in applyfilter button for select groups window");
}
},
{
text: 'Cancel',
scope: this,
minWidth: 69,
handler: function()
{
log.trace("Entering click handler for cancel button in select groups window");
Ext.getCmp('inboxSelectGroupsWindow').hide();
}
}]
});

thanks for taking a look.

CrazyEnigma
16 Jun 2010, 10:37 AM
The formpanel is not necessary. If it provides the object for the multiselect, then there is no need to put it in a form panel. You can use the form to use the submit(), but then you could just use a listener to do a request(), if that's what you want to do.

FormPanel has a layout type of FormLayout (http://www.sencha.com/deploy/dev/docs/?class=Ext.layout.FormLayout), you might want to determine if this is the right layout for you. It does accept "anchor".

gordonk66
16 Jun 2010, 12:34 PM
Thanks for the feedback. I agree the formpanel isn't necessary. So I moved to a panel using the anchor layout. If I use a textfield instead of a multiselect this works as expected filling the entire window. However with the multiselect it still defaults to the 100X100 component. I'm thinking I'll look into overriding the default width and height in the multiselect component to unset them and see if that fixes my issue



var win = new Ext.Window(
{
width: 250,
height: 200,
id: 'inboxSelectGroupsWindow',
title: 'Select Groups', //TODO Localize
bufferResize: 500,
autoScroll: true,
maximizable: false,
layout: 'fit',
modal: false,
buttonAlign: 'left',
items: [
{
layout: 'anchor',
border: false,
frame: false,
items: [
{
xtype: 'multiselect',
name: 'multiselect',
id: 'inboxGroupMS',
allowBlank: false,
//width: 237,
//height: 145,
store: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
ddReorder: true,
anchor: '100% 100%'
}]
}],
bbar: [
{
text: 'Apply Filter',
scope: this,
minWidth: 69,
handler: function()
{
log.trace("Entering click handler in applyfilter button for select groups window");
}
},
{
text: 'Cancel',
scope: this,
minWidth: 69,
handler: function()
{
log.trace("Entering click handler for cancel button in select groups window");
Ext.getCmp('inboxSelectGroupsWindow').hide();
}
}]
});

gordonk66
16 Jun 2010, 12:45 PM
Taking the default height and width out of the multiselect did the trick. The fit layout took over as I first thought it should and it works quite nicely.

The final code:


var win = new Ext.Window(
{
width: 250,
height: 200,
id: 'inboxSelectGroupsWindow',
title: 'Select Groups', //TODO Localize
maximizable: false,
layout: 'fit',
modal: false,
buttonAlign: 'left',
items: [
{
border: false,
frame: false,
autoScroll: true,
items: [
{
xtype: 'multiselect',
name: 'multiselect',
id: 'inboxGroupMS',
allowBlank: false,
store: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
ddReorder: true
}]
}],
bbar: [
{
text: 'Apply Filter',
scope: this,
minWidth: 69,
handler: function()
{
log.trace("Entering click handler in applyfilter button for select groups window");
}
},
{
text: 'Cancel',
scope: this,
minWidth: 69,
handler: function()
{
log.trace("Entering click handler for cancel button in select groups window");
Ext.getCmp('inboxSelectGroupsWindow').hide();
}
}]
});