Results 1 to 4 of 4

Thread: Fit layout on single form item

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    34

    Default Fit layout on single form item

    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:

    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.

  2. #2
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638

    Default

    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, you might want to determine if this is the right layout for you. It does accept "anchor".

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    34

    Default

    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


    Code:
    		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();
    							}
    						}]
    					});

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    34

    Thumbs up SOLVED

    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:

    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();
    							}
    						}]
    					});

Similar Threads

  1. Fit Grid with layout: fit won't work
    By carstep in forum Ext 2.x: Help & Discussion
    Replies: 24
    Last Post: 14 Dec 2011, 8:01 PM
  2. Form and Table Layout cannot have a 'fit' panel?
    By super_drone in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 7 Aug 2008, 3:26 AM
  3. Column Layouts Form fields do not show in fit layout until browser resize
    By georgeblackjr in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Jun 2008, 3:27 PM
  4. Multiple fields in a single row into form layout.
    By Johanson in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 14 Feb 2008, 11:39 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •