Please help me vertically center the button with the label and value. Why does "align: 'middle'" not cause the button text to appear at the same level as the displayfield content?
https://fiddle.sencha.com/#fiddle/1et9
Apply fixed heights for both fields and use line-height to align center
items: [
{
xtype: 'displayfield',
fieldLabel: 'My Label',
labelWidth: 200,
height: '40',
value: 'My Value',
labelStyle: 'line-height:24px;',
fieldStyle: 'line-height:24px;'
},
{
xtype: 'button',
height: 40,
text: 'too low'
}
]
https://fiddle.sencha.com/#fiddle/1eu1
Maybe custom CSS style will be enough:
{
xtype: 'displayfield',
fieldLabel: 'My Label',
labelWidth: 200,
value: 'My Value',
style: 'padding-top: 8px;' // - custom style
}
Related
I am looking to get the "fieldLabel:" property of the textfield/checkbox to take priority over the xtype, in terms of layout. As you can see in the screen shot below, the text appears squished.
Here's a snippet of the code from my view:
bodyPadding: 30,
xtype: 'fieldset',
title: 'Account',
margin: '10 10 10 10',
items: [{
xtype: 'form',
layout: 'form',
items: [{
xtype: 'checkboxfield',
fieldLabel: 'Has registered for gift aid:',
name: 'giftAidFlag',
margin: '0 0 8 0',
listeners: {
change: function(cb, checked) {
Ext.getCmp('manageGiftAidPayers').setDisabled(!checked)
}
}
}, {
xtype: 'button',
anchor: '100%',
text: 'Manage gift aid payers...',
style: "width : 495px;",
margin: '10 0 8 0',
disabled: true,
id: 'manageGiftAidPayers'
}]
}]
So, essentially, the button enables once the box is ticked.
I need this to look a little more professional by the text taking priority, and spanning it's full width before the checkbox appears - any ideas? Not interested in a column layout. Is this going to be possible? Thanks in advance.
You are looking for config labelWidth in the checkbox field.
xtype: 'fieldset',
title: 'My Fields',
items: [
{
xtype: 'checkboxfield',
fieldLabel: 'Has registered for gift aid:',
labelWidth: 250,
boxLabel: 'Box Label'
},
{
xtype: 'button',
width: 495,
text: 'MyButton'
}
]
My panel is using an hbox layout. I am including "split: true" in the config for the panel's child containers. Can I adjust the width of the splitters?
First of all split: true is part of border layout, not hbox.
You can adjust width of the splitters with width (percentage or absolute value) config.
For hbox layout you can use flex config.
For HBox, you are supposed to add splitters in between your elements. You can then just set its width
https://fiddle.sencha.com/#fiddle/18h2
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
layout: {
type: 'hbox'
},
items: [{
xtype: 'label',
text: 'column 1',
flex: 1
}, {
xtype: 'splitter',
width: 20,
style: 'border: 1px solid green'
}, {
xtype: 'label',
text: 'column 2',
flex: 2
}]
})
datefield in scrollable container is not rendering its picker properly. Here is the fiddle.
https://fiddle.sencha.com/#fiddle/17l8
Ext.application({
launch : function() {
Ext.create('Ext.container.Container', {
layout:'anchor',
scrollable:true,
width: 400,
height:'100px',
renderTo: Ext.getBody(),
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
defaults: {
labelWidth: 80,
// implicitly create Container by specifying xtype
xtype: 'datefield',
flex: 1,
style: {
padding: '10px'
}
},
items: [{
xtype: 'datefield',
name: 'startDate',
fieldLabel: 'DOB'
},{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},{
xtype: 'textfield',
name: 'age',
fieldLabel: 'Age'
}]
});
}
});
Go to the fiddle, First enter the date, scroll down and enter name and age. Now again scroll to top and try to modify the date. Screen goes off. Screen will return when you give a mouse click.
PS: this is occuring only in EXt js 6. Not in any earlier version.
Figured it out...
in scorallable container, picker is not aligning to component after layout. We are doing it manually with the below override.
Ext.override(Ext.picker.Date, {
afterComponentLayout: function (width, height, oldWidth, oldHeight) {
var field = this.pickerField;
this.callParent([
width,
height,
oldWidth,
oldHeight
]);
// Bound list may change size, so realign on layout
// **if the field is an Ext.form.field.Picker which has alignPicker!**
if (field && field.alignPicker) {
field.alignPicker();
}
}
});
I have a form panel created in EXtjs 4.1 in which there are 7 fieldsets. Default fieldset type is text field. Some of them are search box text fields. Form Panel has height specified. So if I scroll down to bottom of form panel and make change in fieldset (like searching for word and selecting one of the options form results), Scrollbar jumps a bit to top. This happens in update layout, Is there any way to prevent this?
My form panel code is as below.
Ext.define('MyApp.view.Form', {
extend: 'Ext.form.FormPanel',
overflowY: 'auto',
defaults: {
anchor: '98%',
msgTarget: 'side',
disabledCls: ''
},
disabledCls: '',
bodyBorder: false,
bodyPadding: '0 8 10 8',
border: '0',
waitMsgTarget: true,
frame: false,
fieldDefaults: {
labelAlign: 'top',
bodyPadding: 0,
labelSeparator: '',
msgTarget: 'side',
disabledCls: ''
},
defaultType: 'textfield',
items:[
{ xtype: 'item 1' },
{
xtype: 'item2'
},
{ xtype: 'item3'},
{ xtype: 'item4' },
{
xtype: 'item5'
},
{ xtype: 'item6' },
{ xtype: 'item7' }
]
});
This is happening for all fieldset changes.
I am trying to add an item into a fielset dynamically. I have checked the items of the fieldset in the console , the item is being added to the fieldset but it is not being displayed, I am invoking the doLayout() method for the fieldset and also for the formpanel which has this fieldset, but the size/height of the fieldset does not change. Can someone help me with this issue?
if(csType.value=="OS"){
Ext.apply(newOs,that.osCombo);
newOs.id = 'testOs2';
Ext.getCmp('cSFieldSet').add(newOs);
Ext.getCmp('cSFieldSet').setHeight(600);
Ext.getCmp('cSFieldSet').doLayout(true,true);
Ext.getCmp('cSFieldSet').ownerCt.doLayout(true,true);
that.csFormPanel.doLayout(true,true);
}
I also tried using autoHeight: true, but still the item is not being displayed
Here's some test code I just wrote to simulate what you are trying to achieve:
var simple = new Ext.FormPanel({
labelWidth: 75,
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
// Fieldset in Column 1
xtype:'fieldset',
itemId: 'fieldSetTest',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: false,
autoHeight:false,
defaultType: 'textfield',
items :[{
fieldLabel: 'Field 1'
}, {
fieldLabel: 'Field 2'
}, {
fieldLabel: 'Field 3'
}
]
}
],
buttons: [{
text: 'Add New Field',
handler: function() {
var newItem = new Ext.form.TextField({fieldLabel: 'New Fields'});
simple.getComponent('fieldSetTest').add(newItem);
simple.doLayout();
},
scope:this
}]
});
simple.render(document.body);
});
This works fine, so on clicking the add button the new item appears in the fieldset and the height of the fieldset automatically increases. Without seeing your whole formpanel code I can't comment much further.