Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Ext-js : Aligning combobox and buttons in same line

Posted on 2014-09-06
5
Medium Priority
?
158 Views
Last Modified: 2014-09-17
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.
0
Comment
Question by:royjayd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40308836
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
 

Author Comment

by:royjayd
ID: 40308988
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 40309890
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
 

Author Comment

by:royjayd
ID: 40309962
Well, how do I see the rendered code from my above ext js code?
Thx.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40309983
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question