Ext-js : Aligning combobox and buttons in same line

hi experts

I am trying to do a simple thing which is aligning my buttons next to my combo box, but not able to ,
Here is what i have

Ext.define('Project.view.CustomerTab', {
	layout : {
		type : 'border',
		padding : 5
	},
	defaults : {
		//split : true
	},
	extend : 'Ext.panel.Panel',
	alias : 'widget.CustomerTab',
	id : 'CustomerTab',
	margin : '10 10 10 10',
	border : true,
	items : [{
				xtype : 'panel',
				//border : true,		 
				width : '35%',		
				region : 'west',
				autoScroll : true,
				split : true,
				collapsible : true,	
				title : 'Search Customer',
						items : [
						{	
						width : '35%',	
						region : 'west',
						id : 'searchCustomer',							 
						margin : '5 5 5 5',
						xtype : 'combo',
						queryMode : 'local',
						fieldLabel : 'Customer Name'		 
						},
						{
						width : '65%',	
						region : 'center',
						buttons : [ {						
						text : 'Search',
						action : 'searchCustDetails'
						},
						{
						text : 'Reset',
						action : 'resetCustDetails'
						}]
						},						
						{
						width : '100%',
						region : 'south',
						title : 'Customer Details',
						itemId : 'customerList',
						xtype : 'customerList',  
						border : true	
						}
						]
	} 
	]
});

Open in new window


What i see is
button-alignment1.png
What i want to do is
button-alignment2.png
I have been trying for couple of hours, no luck.
Any help will be greatly appreciated..
Thanks.
royjaydAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
COBOLdinosaurConnect With a Mentor Commented:
That is not the rendered code.   It is just bloat from using javascript to do simple layout instead of just generating straight markup.  All you have there is what you think is correct code to generate the structure. Obviously it is not generating what you think is is and the only way to know what is wrong is to see the markup being used to build the document object.
0
 
COBOLdinosaurCommented:
You probably have a block element in there somewhere and that is producing a line feed. if you post a link to the page or at least the rendered code then I will take a look at whatever bloat you are using to produce a dead simpe layout segment.

Cd&
0
 
royjaydAuthor Commented:
Thanks.
This is my working code in fiddle.

Ext.create('Ext.data.Store', {
    storeId:'customerStore',
    fields:['name','dept', 'pos'],
   // groupField: 'department',
    data:[
        {name:"Mike", dept:"SAles", pos:"DBA"},    
        {name:"Ian", dept:"IT", pos:"Ext-JS Developer"}        
                               
    ]
});


 

Ext.create('Ext.form.Panel',{
   layout : {
		type : 'border',
		padding : 5
	},
    defaults : {
		//split : true
	},
    id : 'CustomerTab',
	margin : '10 10 10 10',
	border : true,
	items : [{
				xtype : 'panel',				
				autoScroll : true,				
				collapsible : true,	
				title : 'Search Customer',
						items : [
						{	
						width : '35%',	
						region : 'west',
						id : 'searchCustomer',							 
						margin : '5 5 5 5',
						xtype : 'combo',
						queryMode : 'local',
						fieldLabel : 'Customer Name',
                        renderTo: Ext.getBody()
						},
						{
						width : '65%',	
						region : 'center',
						buttons : [ {						
						text : 'Search',
						action : 'searchCustDetails',
                        renderTo: Ext.getBody()
						},
						{
						text : 'Reset',
						action : 'resetCustDetails',
                        renderTo: Ext.getBody()
						}]
						},						
						{
						width : '50%',
						region : 'south',
						title : 'Customer Details',
						itemId : 'customerStore',
						xtype : 'grid',  
						border : true	,
                        store: Ext.data.StoreManager.lookup('customerStore'),       
        				autoHeight: true,        
        				columns: [
            			{header: "Name", width: 79, dataIndex: 'name'},
            			{header: "Dept", width: 100, dataIndex: 'dept'},
            			{header: "Position", width: 100, dataIndex: 'pos', sortable: true}           
        				],
                        renderTo: Ext.getBody()
						}
						]
	} 
	]
    }
)

Open in new window



Not sure where the bloat is. It seems very straight forward but i am missing something.
The buttons always come on the next line of the combobox. I just want the buttons to be on the same row as the combobox and aligned to the right.
0
 
royjaydAuthor Commented:
Well, how do I see the rendered code from my above ext js code?
Thx.
0
 
COBOLdinosaurCommented:
You render the page in a browser and view the source. That is what the browser uses to build the Document Object.  However any load time scripting then screws up the Document Object so simple straight forward markup and CSS can end up morphed  because the script overrides the correct code.

So something that should take 30 seconds to fix becomes a major effort like this because scripting is being used where it should never have been needed in the first place.

Cd&
0
All Courses

From novice to tech pro — start learning today.