1. #1
    Ext JS Premium Member catnipper's Avatar
    Join Date
    Aug 2007
    Location
    Germany
    Posts
    21
    Vote Rating
    0
    catnipper is on a distinguished road

      0  

    Default ComboBox in window->fieldset layout issue

    ComboBox in window->fieldset layout issue


    I noticed the following behavior when clicking the select item of a comboBox when displayed within a window:
    1. Loading the window looks as expected (image 01)
    2. Before the dropdown list appears, the selector and the following items will be pushed a few pixels further down (image 02), the input field will remain in it's position
    3. Opening the box a second time it behaves as expecte, but is now not on the initial position anymore (image 03)
    Code:
    	var window = new Ext.Window({
    		title: 'Opportunities chart configuration',
    		width: 350,
    		height:440,
    		plain:false,
    		bodyStyle:'padding:5px;',
    		buttonAlign:'right',
    		items: [{
    				xtype: 'fieldset',
    				border: false,
    				items: [{
    						xtype: 'combo',
    						mode: 'local',
    						width: 200,
    						fieldLabel: 'Chart type',
    						store: new Ext.data.ArrayStore({
    							id: 0,
    							fields: [
    								'chart',
    								'displayText'
    							],
    							data: [['stackedbarchart', 'Stacked Barchart']/*, ['barchart', 'Barchart'], ['cartesionchart', 'Cartesion Chart']*/]
    						}),
    						valueField: 'chart',
    						displayField: 'displayText',
    						style: 'margin-bottom: 15px;'
    					},{
    						xtype: 'combo',
    						mode: 'local',
    						width: 200,
    						fieldLabel: 'Grouped by',
    						store: new Ext.data.ArrayStore({
    							id: 0,
    							fields: [
    								'chart',
    								'displayText'
    							],
    							data: [['sales_stage', 'Sales Stage'], ['area_sales_c', 'Sales Area'], ['opportunity_type_c', 'Opportunity Type'], ['channel', 'Channel']]
    						}),
    						valueField: 'chart',
    						displayField: 'displayText'
    					},{
    						xtype: 'combo',
    						mode: 'local',
    						width: 200,
    						fieldLabel: 'Stacked by',
    						store: new Ext.data.ArrayStore({
    							id: 0,
    							fields: [
    								'chart',
    								'displayText'
    							],
    							data: [['sales_stage', 'Sales Stage'], ['area_sales_c', 'Sales Area'], ['opportunity_type_c', 'Opportunity Type'], ['channel', 'Channel']]
    						}),
    						valueField: 'chart',
    						displayField: 'displayText',
    						style: 'margin-bottom: 15px;'
    					},{
    						xtype: 'multiselect',
    						fieldLabel: 'Territory',
    						name: 'territory',
    						style: 'background-color: white;',
    						width: 200,
    						height: 73,
    						store: [['FR','FR'],['GST','GST'],['IT','IT'],['JP','JP'],['ROE','ROE'],['ROW','ROW'],['UK','UK'],['US','US'],['Other','Other']]
    					},{
    						xtype: 'multiselect',
    						fieldLabel: 'Type',
    						name: 'territory',
    						style: 'background-color: white;',
    						width: 200,
    						height: 57,
    						store: [['license','License'],['maintenance','Maintenance'],['service','Service']]
    					},{
    						xtype: 'combo',
    						mode: 'local',
    						width: 200,
    						fieldLabel: 'Channel',
    						store: new Ext.data.ArrayStore({
    							id: 0,
    							fields: [
    								'chart',
    								'displayText'
    							],
    							data: [['_all_', '- All -'], ['corporate', 'Corporate'], ['channel', 'Channel']]
    						}),
    						valueField: 'chart',
    						displayField: 'displayText',
    						style: 'margin-bottom: 15px;'
    					},{
    						xtype: 'datefield',
    						mode: 'local',
    						width: 200,
    						fieldLabel: 'From'
    					},{
    						xtype: 'datefield',
    						mode: 'local',
    						width: 200,
    						fieldLabel: 'To'
    					}
    				]
    				
    			}
    		],
    		buttons: [{
    			text: 'Update'
    		},{
    			text: 'Reset'
    		},{
    			text: 'Close'
    		}]
    	});
    	window.show();
    Thank you for your ideas!

    01.png
    Attached Images

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Don't use 'style' to increase the space between fields.

    Assign an itemCls to each field and create a css rule for this class with a margin.

  3. #3
    Ext JS Premium Member catnipper's Avatar
    Join Date
    Aug 2007
    Location
    Germany
    Posts
    21
    Vote Rating
    0
    catnipper is on a distinguished road

      0  

    Default


    Well, lucky I found the issue:

    I did make use of an extended "markDirty" function overriding the Ext.form.Field class to also work on unsupported field types. I may have to recheck my definition along with the updated 3.2.1 framework to find out what is going wrong.

Similar Threads

  1. ComboBox and Window Issue
    By honciv01 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 21 Apr 2010, 7:13 AM
  2. Grid layout after Window resize Issue
    By foronoob in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 14 Jul 2009, 12:55 PM
  3. [2.1] FieldSet layout issue
    By fother in forum Ext 2.x: Bugs
    Replies: 6
    Last Post: 16 Jun 2008, 10:55 AM
  4. Form fieldset layout issue
    By buntyindia in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 29 May 2008, 6:44 AM
  5. [2.0.1][OPEN] Window/Border layout collapse issue.
    By SlashEMc2k in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 12 Mar 2008, 3:30 PM

Thread Participants: 1