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'
}
]
}
]
Related
I'm using ExtJs 6.
How can I achieve to have the layout of a FieldContainer, to act exactly like the form layout.
See my fiddle: https://fiddle.sencha.com/#fiddle/15v5
I would like that the size of my textfield which are in the FieldContainer has exactly the same size of the first textfield.
Please also not that I put textfield inside my FieldContainer but I want the same think for every type of component to my be in the FieldContainer.
Thanks in advance!
change layout of your form panel
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
items: {
padding: 5,
xtype: 'form',
layout: {
type:'vbox',
align:'stretch'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name'
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Test',
layout: 'form',
//layout: {
// type:'vbox',
// align:'stretch'
//},
// combineLabels: true,
items: [
{
itemId: "in",
xtype: 'textfield'
}, {
itemId: "in2",
xtype: 'textfield'
}
]
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Test2',
layout: 'form',
//layout: {
// type:'vbox',
// align:'stretch'
//},
// combineLabels: true,
items: [
{
xtype: 'component',
style: {
border: '1px solid red'
},
html: 'something'
}
]
}
]
}
})
}
});
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 three button in a panel. Each button has a specific function. What I want to do, when an user click the button, I would like to load specific form into panel. The reason is that, when I use getForm().getValues() the returning array has whole form values. I want to get only necessary part of the form. Is it possible to use multiple form in a panel?
Why not? Just set hidden: true for each formpanel and call show() for one.
Here is working sample: http://jsfiddle.net/9TkrS/
Here is the code:
Ext.create('Ext.panel.Panel', {
frame: true,
width: 300,
height: 150,
title: 'Main panel',
margin: 5,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: 'fit',
flex: 1,
defaults: {
layout: 'anchor',
},
items: [{
xtype: 'form',
id: 'fp1',
items:[{
xtype: 'textfield',
margin: 5,
anchor: '100%',
fieldLabel: 'form 1: text field',
name: 'textField',
value: 'FORM 1'
}]
},{
xtype: 'form',
id: 'fp2',
hidden: true,
items:[{
xtype: 'textfield',
margin: 5,
anchor: '100%',
fieldLabel: 'form 2: text field',
name: 'textField',
value: 'FORM 2'
}]
}]
}, {
xtype: 'container',
height: 30,
padding: 5,
defaults: {
margin:'0 5 0 0'
},
items:[{
xtype: 'button',
text: 'form 1',
listeners: {
click: function(){
triggerForms(true);
}
}
},{
xtype: 'button',
text: 'form 2',
listeners: {
click: function(){
triggerForms(false);
}
}
}]
}]
});
function triggerForms(firstForm){
fp1 = Ext.getCmp('fp1');
fp2 = Ext.getCmp('fp2');
if(firstForm){
fp1.show();
fp2.hide();
} else {
fp1.hide();
fp2.show();
}
setTimeout( function(){
Ext.MessageBox.alert(
Ext.JSON.encode((firstForm ? fp1 : fp2).getForm().getValues())
);
}, 300);
}
I'd like to achieve this behavior:
If a field (combo, text, date ...) in a form panel has a custom property set true
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
customProp: true
},
then add a button or other components behind the actual component. Writen in json it would look like this:
{
xtype: 'container',
margin: '0 0 8 0',
layout: 'hbox',
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name',
},
{
xtype: 'button',
text: 'xxx',
tooltip: 'I\'m a custom tooltip'
}
]
}
I'm wondering how i could achieve this. Is this even possible ?
It is.
Ext.require('*');
Ext.onReady(function() {
var form = new Ext.form.Panel({
renderTo: document.body,
width: 400,
height: 100,
items: {
xtype: 'textfield',
fieldLabel: 'Foo'
}
});
setTimeout(function() {
var field = form.down('textfield');
// We have a reference to the field, let's go!
var owner = field.ownerCt;
owner.remove(field, false);
owner.add({
xtype: 'container',
layout: 'hbox',
items: [field, {
xtype: 'button',
text: 'Foo'
}]
});
}, 1000);
});
Where container is a reference to the container with the hbox layout.
I have a tabpanel. In the tab, i have a panel which includes a toolbar and 3 items: [ fieldset, a gridpanel, and another fieldset (or some buttons)]. I cannot get the gridpanel to show scroll bar. It only works if i set the maxheight/minheight of the gridpanel.
I also tried wrapping gridpanel inside a container. No luck.
In the example, i use fit layout. I tried "anchor" layout, and assigned anchor:'100% 50%' to gridpanel, hoping that it would resize when i resize browser. No luck.
Alternatively, if gridpanel is the ONLY item in the tab, autoscroll would work. So it appears when it's inside another panel, autoscroll/ resizing does not work.
Did I miss something here ?
Ext.application({
name: 'MyApp',
launch: function () {
// create the data store
var d = ['company', 100];
var myData = [];
for (var i = 0; i < 50; i++) {
myData[i] = d;
}
var store = Ext.create('Ext.data.ArrayStore', {
fields: [{
name: 'company'
}, {
name: 'price',
type: 'float'
}],
data: myData
});
Ext.create("Ext.container.Viewport", {
layout: {
type: 'border'
},
items: [{
xtype: 'toolbar',
id: 'headerbar',
region: 'north',
height: 30
}, {
xtype: 'toolbar',
id: 'menubar',
region: 'north',
height: 30
}, {
xtype: 'tabpanel',
itemId: 'maintabpanel',
activeTab: 0,
region: 'center',
plain: true,
margins: '5 5 5 5',
layout: 'fit',
items: [{
closable: false,
title: 'Tab',
margins: '0 0 0 0',
items: [{
xtype: 'panel',
title: 'Panel',
layout: 'fit',
tools: [{
type: 'help',
tooltip: 'Help'
}, {
type: 'close',
tooltip: 'Close'
}],
items: [{
xtype: 'fieldset',
title: 'Field Set',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Input'
}]
}, {
xtype: 'gridpanel',
autoScroll: true,
store: store,
columns: [{
text: 'Company',
flex: 1,
sortable: true,
dataIndex: 'company'
}, {
text: 'Price',
flex: 1,
sortable: true,
dataIndex: 'price'
}],
viewConfig: {
autoFit: true
}
}, {
xtype: 'fieldset',
title: 'Field Set 2',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'Output'
}]
}]
}]
}]
}, {
xtype: 'box',
id: 'footer',
region: 'south',
html: '<h1> Copyright 2012</h1>',
height: 30
}]
});
}
});
Note that the parent panel of the gridpanel has fit layout, yet it has more than 1 item (the fieldset, the gridpanel, and another fieldset). A fit layout can only have 1 child.
Also, the parent of that fit panel (the one with closable : false - the tab) has no layout definition.
Here's a JsFiddle modified version of your code that works.