Solved

Ext-js : Aligning combobox and buttons in same line

Posted on 2014-09-06
5
138 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
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
Well, how do I see the rendered code from my above ext js code?
Thx.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now