PDA

View Full Version : How to make two buttons in single line?



edwardking
9 Mar 2011, 6:49 AM
I want to show two buttons in single line,but the result is that two buttons are in two line,why? Where is wrong? How to correct the code,Thanks

Control=function(config){
var config=config || {}; //What the role of this line?
var center=this.center=new EditGrid()
}

Ext.onReady(function(){
var control=new Control();
var view=new Ext.Viewport({
layout:'border',
frame:true,
items:[{
region:'north',
height:74,
items:[control.center.addBtn,control.center.saveBtn,control.center.searchText]
},{
region:'center',
layout:'fit',
items:[]
}]
});
})

EditGrid=function(config){
var config=this.config=config||{}; //What the role of this line?
this.addBtn=new Ext.Button({
text:'add',
id:'addBtn',
icon:'add.gif',
scope:this
});
this.saveBtn=new Ext.Button({
text:'save',
id:'saveBtn',
icon:'save.gif',
scope:this,
});
}

walldorff
11 Mar 2011, 5:43 PM
Embed the buttons in a Ext.Toolbar(). This works:
var EditGrid=function(config){
// assign an empty object as default value for the variable config
// in this case you don't need that
// var config=this.config=config||{};
this.addBtn=new Ext.Button({
text : 'add',
id : 'addBtn',
icon : 'add.gif',
scope : this
});
this.saveBtn=new Ext.Button({
text : 'save',
id : 'saveBtn',
icon : 'save.gif',
scope : this
});
};

var Control=function(config){
var center = this.center=new EditGrid()
};

// different variable name. Control allready exists as a function.
var ctrl = new Control();

Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout : 'border',
frame : true,
items : [{
region : 'north',
height : 74,
tbar : new Ext.Toolbar({
items :[ctrl.center.addBtn,ctrl.center.saveBtn]
})
},{
region : 'center',
layout : 'fit',
items : [{html:'This is center'}]
}]
});
});

adityavarma.mca
13 Jun 2012, 1:36 AM
Ext.onReady(function () {
var form = Ext.create('widget.panel', {

renderTo: 'form1',
items: [{
layout: 'hbox',
border: 0,
items: [{
xtype: 'button',
buttonAlign: 'center',
width: 100,
text: 'FillJson',
id: 'btn_FillJson',
name: 'btn_FillJson',
handler: function () {

}
}
, {
xtype: 'textfield',
fieldLabel: '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspRecordNumber/Id',
labelWidth: 150,
width:300,
id: 'tf_RecordNumber',
name: 'tf_RecordNumber'
},{
xtype: 'button',
buttonAlign: 'center',
text: 'Particular',
width:100,
id: 'btn_Particular',
name: 'btn_Particular',
handler: function () {
}
}
]
}]
});
});