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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
COBOLdinosaurCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.