So I have HBox with 5 textfields. All of them have labels
xtype: 'container',
layout: {
type: 'hbox',
align: 'top',
pack: 'center'
},
items: [{
xtype: 'textfield',
fieldLabel: 'few words label'
flex: 10,
bind: '{boundObject}'
}, {
xtype: 'textfield',
fieldLabel: 'label'
flex: 12,
bind: '{boundObject}'
}, {
xtype: 'textfield',
fieldLabel: 'label'
flex: 5,
bind: '{boundObject}'
},
}, {
xtype: 'textfield',
fieldLabel: 'few words label'
flex: 7,
bind: '{boundObject}'
}, {
xtype: 'textfield',
fieldLabel: 'label'
flex: 12,
bind: '{boundObject}'
}]
When the screen is full-width there is no problems with this layout. But when I make screen smaller and labels become to have more than 1 line (those with text 'few words label', textfields are no more aligned vertically to each other as labels are higher and push some textfields futher to the bottom. Is there a way to deal with this problem with the same layout or I must to separate labels from textfields?
Related
I want to group textfields by columns & rows, I have tried with layout type 'table' but I'm unable to group the textfields, I need Like below, please help me, Im completely new to Ext jS,thanks in advance.
column 1 column 2 column 3
Row 1 Name: textfield RollNo: textfield Language: textfield
Row 2 Age: textfield Ph: textfield Class: textfield
Row 3 ID: textfield Email: textfield Class: textfield
There is multiple ways how to achieve this but what you could do is to set the layout of the main form to hbox (horizontal box) than add 3 containers (or you could use fieldset, fieldcontainers) and in them set the layout to default or vbox (vertical). You can also play with the flex config to position your fields correctly.
You can always add more containers and play with their layouts.
Also you could try to use table layout http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#layout-table
I personally use Sencha Architect so it's much faster for me to create such form with hbox and vbox layouts.
Check out this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/200h
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias: 'widget.myform',
requires: [
'Ext.form.FieldContainer',
'Ext.form.field.Text'
],
bodyPadding: 10,
title: 'My Form',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
},
{
xtype: 'fieldcontainer',
flex: 1,
height: 120,
items: [
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
},
{
xtype: 'textfield',
fieldLabel: 'Label'
}
]
}
]
});
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'
}
]
I have a 3x2 panel of components that looks like this :
It uses table layout (I am guessing this is the best layout for the job). However when I widen the window the inner components do not stretch :
My code looks like this :
v = Ext.create('Ext.window.Window', {
renderTo: document.body,
layout: {
type: 'table',
columns: 3,
tdAttrs: { style: 'padding: 3px;' }
},
items: [
{
xtype: 'label',
text: 'Field 1'
},
{
xtype: 'label',
text: 'Field 2'
},
{
xtype: 'label',
text: 'Field 3'
},
{
xtype: 'textfield'
},
{
xtype: 'textfield'
},
{
xtype: 'combobox'
}
]
}
);
v.show()
As you can see I am using the table layout. It seems to place the components like bricks, without any stretching rules. Is there a better layout for this situations? I was thinking of maybe hBox with three panels, and then inside the panels you would have vBox. But that seems a bit cumbersome.
fiddle is here :
http://jsfiddle.net/dxyxudds/2/
You can use column layout with columnWidth for each item. textfield has a label, so no need for separate label widgets.
Ext.create('Ext.window.Window', {
renderTo: document.body,
height: 100,
width: 500,
autoShow: true,
shadow: false,
layout: 'column',
defaults: {
labelAlign: 'top',
xtype: 'textfield',
columnWidth: 0.33,
padding: 5
},
items: [{
fieldLabel: 'Field 1'
}, {
fieldLabel: 'Field 2'
}, {
fieldLabel: 'Field 3'
}]
});
Here is a solution with table layout, but it requires wrapping each field with a form layout container. Form layouts primary purpose is to make fields stretch to container width.
Ext.create('Ext.window.Window', {
renderTo: Ext.getBody(),
height: 170,
width: 400,
autoShow: true,
layout: {
type: 'table',
columns: 3,
tdAttrs: {
style: 'width: 33%'
}
},
defaults: {
xtype: 'container',
layout: 'form',
padding: 5,
defaults: {
xtype: 'textfield',
labelAlign: 'top'
}
},
items: [{
items: {
fieldLabel: 'Field 1'
}
}, {
items: {
fieldLabel: 'Field 2'
}
}, {
items: {
xtype: 'combobox',
fieldLabel: 'Field 3'
}
}, {
items: {
fieldLabel: 'Field 4'
}
}, {
items: {
fieldLabel: 'Field 5'
}
}, {
items: {
xtype: 'combobox',
fieldLabel: 'Field 6'
}
}]
});
I have a fieldcontainer which has several components. Each components has flex property as well. What I want to know that how can we break the row? As you can see the screen shot, 'FREE ARTICLE' field should start beginning of the new row but I don't know how can I specify this.
items: new Ext.Panel({
items: [
{
xtype: 'fieldset',
title: 'Artikel Sorgulama',
defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
height: '86px',
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'top'
},
items: [
{
xtype: 'textfield',
id: 'articleNo',
flex: 1,
tabIndex: 1,
fieldLabel: 'ARTİKEL NO',
fieldStyle: 'text-align: right; font-size: 12pt',
margins: '0 10 0 0',
enableKeyEvents: true,
listeners: {
specialkey: function (field, e) {
if (field.getValue() != 'null') {
if (e.getKey() === e.ENTER || e.TAB) {
//articles.proxy.extraParams = {'article': field.getValue()};
articles.load({
params: {'article': field.getValue()},
callback: function () {
Ext.getCmp('articleDesc').setValue(articles.data.items[0].data['ART_DESC']);
}
});
}
}
},
focus: function (e) {
e.setValue('');
Ext.getCmp('articleDesc').setValue("");
articles.loadData([], false);
}
}
},
{
xtype: 'textfield',
id: 'articleDesc',
flex: 3,
fieldLabel: 'ARTİKEL TANIMI',
fieldStyle: 'font-size: 12pt',
readOnly: true
},
{
xtype: 'textfield',
fieldLabel: 'FREE ARTICLE',
flex: 0
}
]
}
]
},
You would need to use nested box layouts. The field container have a vbox layout. The first item in the fieldcontainer should be a container with an hbox layout (like your current code). The second item of the fieldcontainer should be the 3rd field (which will appear underneath due to the vbox layout).
Just don't add your free article field to the field container, but to the parent fieldset instead:
items: [
{
xtype: 'fieldset',
// ...
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
// ...
}, {
xtype: 'textfield',
fieldLabel: 'FREE ARTICLE'
}
]
}
]
I am having trouble making ExtJS field set elements appear correctly without overlapping. I use a FieldSet class and each row is a hbox container. My goal is to leave the layout the same but somehow make the values automatically show up on more than one line if needed.
Below is a sample of what my code looks like and a screenshot.
var genInfoFieldSet = new Ext.form.FieldSet({
title: '<b>TEST FIELD SET</b>',
height: '100%',
autoWidth: true,
items: [
//ROW 1
{
xtype: 'container',
layout: 'hbox',
defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
fieldStyle: 'font-size:11px'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'field 1',
value: 'ABCDESDAVBABVA'
},
{
xtype: 'displayfield',
fieldLabel: 'field 2',
value: 'ZXCVZXVCZXZX'
},
{
xtype: 'displayfield',
fieldLabel: 'field 3',
value: 'ZXZXZXZX'
},
{
xtype: 'displayfield',
fieldLabel: 'field 4',
value: 'AKHAKSHASH'
}
]
},
//ROW 2
{
xtype: 'container',
layout: 'hbox',
defaults: { labelWidth: 120, align: 'stretch', labelStyle: 'font-weight:bold;font-size:11px', flex: 1,
fieldStyle: 'font-size:11px'
},
items: [
{
xtype: 'displayfield',
fieldLabel: 'field 5',
value: 'xxxxxxxxxxxxxxxxxxAAAAAAAXXX',
width: '10px'
},
{
xtype: 'displayfield',
fieldLabel: 'field 6',
value: 'AB'
},
{
xtype: 'displayfield',
fieldLabel: 'field 7',
value: 'ABC'
},
{
xtype: 'displayfield',
fieldLabel: 'field 8',
value: 'ABC'
}
]
}
]
});
You have provided flex:1 to every element (by using it in defaults). Instead of this, you should prefer providing flex:1 to one of the element, and give fixed width (or minWidth maxWidth) to others.
Giving flex:1 to every element tries to distribute the total width equally to all the elements and if the available width is not enough then the overlap occurs.
Thus, to remove the overlap, take off flex:1 from the defaults and assign flex:1 to any one element and give widths to others.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Box-cfg-flex
Hope this helps.