I have a form with two textfields which are aligned in 'vbox' format with align as 'stretch'. I wish to now add a SAVE button which should be aligned in the middle of the form. How do I define this button to be exactly aligned in the middle just like in a usual alert where the OK button is in the middle of the alert box.
If it can be done without CSSS then that would be preferable.
buttonAlign : The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).
Another way is to use dockedItems with layout:'hbox' and pack:'center'
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
width: 300,
bodyPadding: 10,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textfield',
title: 'Contact Info',
name: 'name',
fieldLabel: 'Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address'
}],
buttons: [{
text: 'Save'
}],
buttonAlign: 'center',
renderTo: Ext.getBody()
})
}
});
FIDDLE
Related
I have a problem in aligning an item to the right, or anyway at the end of the column.
As you can see in the picture:
even if there is space on the right, it aligns the item left covering part of the text (The complete text is "Battery Level"). I would like to align it near the downward arrow.
I tried to use align:'right' without success.
How could I fix it? this is my code:
columns: {
defaults: {
flex: 1,
},
items: [{
....
},{
text: Strings.positionBatteryLevel,
hidden:true,
sortable: false,
defaults:{
margin:'-31 0 0 55'
},
items: [{
xtype: 'numberfield',
id: 'batteryFilter',
align:'right',
listeners: {
change (e,newValue, oldValue, eOpts ) {
filterGridAttributeType(newValue,'batteryLevel');
}
}
}],
},{
...
There is a config for columns to align the content:
columns: [{
text: 'Battery Level',
sortable: false,
==> align: 'end'
},{
...
I have a panel where in I have a button in the header which helps me to add two textfields in that panel. Now when I click on this button it takes me to a popup form where the user enters the value of the two textfields it wants and then clicks on save button in the header of this popup panel.
The two textfields are added but the value is not set to the value which is entered in the popup form. I think the problem is with the scope. Kindly look at the following code and tell me how to resolve this issue.
xtype: "panel",
id: 'idFieldpanel',
...
header:{
titlePosition: 0,
items:[{
xtype:'button',
text: 'Add',
handler: function(){
var addidFieldPanel= new Ext.form.Panel({
id: 'newidFieldPanel',
width: 250,
height: 100,
floating: true,
closable : true,
layout : {
type : 'vbox',
align : 'stretch'
},
bodyPadding: 10,
items : [
{
xtype : 'textfield',
id : 'newidFieldname',
fieldLabel : 'Name',
name : 'newidFieldname',
flex : 1,
scope : this
},
{
xtype : 'textfield',
id : 'newidFielddataType',
fieldLabel : 'DataType',
name : 'newidFielddataType',
flex : 1,
scope : this
}
],
header : {
titlePosition : 1,
items : [{
xtype: 'button',
text: 'Save',
handler: function() {
ctr++; //this is used so that the id of the added fields do not match and hence they do not overlap
Ext.getCmp('idFieldpanel').add({
xtype:"container",
layout : {
type : 'hbox',
align : 'stretch'
},
defaults: {
bodyPadding: 10,
margin: '10 0 10 10'
},
items: [
{
xtype : 'textfield',
fieldLabel: 'Name',
id: 'idFieldName' + ctr,
name : 'Data',
margin:'0 10 10 0',
flex : 1,
height : 'auto'
},
{
xtype : 'textfield',
fieldLabel: 'Datatype',
name : 'Type',
id: 'idFielddataType' + ctr,
margin: '0 10 10 0',
flex : 1,
height : 'auto'
}
]
});
Ext.getCmp('idFieldName' + ctr).setValue(Ext.getCmp('newidFieldname').getValue());
Ext.getCmp('idFielddataType' + ctr).setValue(Ext.getCmp('newidFielddataType').getValue());
}
}]
}
})
addidFieldPanel.show();
}
}]
}
There are a few things that can help you out here, but first would be to not bother with tracking unique ID's across your components. Let ExtJS handle that for you. Also, removing the nested handlers will make your code a lot easier to read. I put together this fiddle that shows how you can do that.
By not using ID's you can grab reference to parent/child components with the up/down selectors similar to saveBtn.up('panel').
You can also add a form to your popup for easier selecting. Hope this helps to give you an idea of a better way to leverage the framework.
This seems like it would be a simple solution, but I cannot figure out how to set the row height of my fieldset table. Playing with the CSS didn't seem to do anything either.
xtype: 'fieldset',
title: 'Fieldset',
layout: {
type: 'table',
columns: 2,
cellCls: 'myFormTblCell'
},
margin: '5 5 5 5',
items: [{
xtype: 'label',
text: 'lable 1',
cls: 'myLabel'
},{
xtype: 'displayfield',
name: 'displayfield 1',
cls: 'myText'
},{
xtype: 'label',
text: 'lable 2',
cls: 'myLabel'
},{
xtype: 'displayfield',
name: 'displayfield 2',
cls: 'myText'
}]
I use ExtJS version 4.2.2, in which you would do the following
In your layout config...
layout: {
type: 'table',
columns: 2,
trAttrs: { height: 50 },
cellCls: 'myFormTblCell'
},
Documentation on ExtJS table layout
JSFiddle
I want to change the background color of a button in a toolbar.
I need this button to show a summary-value.
I tried with
cls: 'button-matching-auto',
and in css-file
.x-btn-button .button-matching-auto {
background-color: #10E0E0;
}
No effect.
Then i tried with
style: {color:'red'},
It's the same: no effect
In Developer Tools of chrome i can see, that the colors were applied,
but not visible.
What's wrong?
"It's because the button has a CSS class named 'x-button' with a background-color set to '#CCC' by default..." http://www.sencha.com/forum/showthread.php?208417-Change-image-button
{
xtype: 'button',
baseCls: 'null',
cls: 'buttonRed
}
... if you only want the default look and feel of a button not the gray one ...
I've done this to change the look and feel to get the default one:
dockedItems: [{
xtype: 'toolbar',
layout: {
pack: 'center'
},
defaultButtonUI: 'default', // get default look and feel
dock: 'bottom',
items: [{
xtype: 'button',
width: 200,
text: 'Download to Excel',
},{
xtype: 'button',
width: 200,
text: 'Another action',
}]
I have a combo box that i am simply trying to make bold. The data is in a store. I can bold the item in the list, but i cannot bold the item after it is selected in the text box.
I have tried:
fontWeight: 'bold',
cls: 'make-bold',
itemCls:'make-bold',
I can bold the list via a template but not the item actually in the text field.
items:[
{
xtype: 'combobox',
name: 'inputType',
id: 'inputType',
padding : '6 5 5 5',
store: 'Codes',
displayField: 'display',
valueField: 'code',
value: 'Inp_CODE',
editable: false,
width: 80,
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">','<div class="x-boundlist-item"><b>{display}</b></div>','</tpl>')
}, {
this did it
fieldCls: 'make-bold',
style: {
fontWeight: 'bold'
}
why do i need both?