I have a simple form in extjs, I want the first field to take 2 spaces in the table layout:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 600,
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%'
}
}
},
fieldDefaults: {
labelAlign: 'top'
},
items: [{
colspan: 2,
xtype: 'textfield',
fieldLabel: 'Field 1 Take 2 spaces',
}, {
xtype: 'textfield',
fieldLabel: 'Field 2',
}, {
xtype: 'textfield',
fieldLabel: 'Field 3',
}, {
xtype: 'textfield',
fieldLabel: 'Field 4',
}],
});
It is not working.
Have a look here: http://jsfiddle.net/Cfy8R/2/
UPADTE -1
example
try this...
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 600,
layout: {
type: 'table',
columns: 3,
tableAttrs: {
style: {
width: '100%'
}
}
},
fieldDefaults: {
labelAlign: 'top'
},
items: [{
xtype: textfield,
colspan: 2,
inputWidth: 300 // resize the input width
}, {
xtype: 'textfield',
fieldLabel: 'Field 2',
}, {
xtype: 'textfield',
fieldLabel: 'Field 3',
}, {
xtype: 'textfield',
fieldLabel: 'Field 4',
}],
});
You need to make two modifications, firstly on the table layout you need:
tableAttrs: {
style: {
width: '100%',
tableLayout: 'fixed'
}
}
then on the field itself you need width 100%:
{
xtype: 'textfield',
colspan: 2,
width: '100%',
inputWidth: 300 // resize the input width
}
HTH
Related
I have a problem like in this topic: Extjs how to make the scrollbar appear?, but too many things are confusing for me.
I need to show a scrollbar as soon as the form is wider than the containing container. Why is autoScroll: true not working?
I will give three different examples, combined with this problem. The most needed - the first ex.
1. https://fiddle.sencha.com/#fiddle/j2c
var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'anchor',
items: [{
itemId: "TPMethodContentProvider",
xtype: "form",
autoScroll: true,
layout: 'anchor',
anchor: "100%",
items: [{
xtype: "container",
padding: 5,
layout: 'anchor',
anchor: "100%",
autoScroll: true,
items: [{
margin: 5,
padding: 5,
width: 850,
xtype: "container",
autoScroll: true,
anchor: "100%",
layout: 'column',
items: [{
columnWidth: 0.7,
items: [{
itemId: "S1",
margin: 5,
xtype: 'textfield',
anchor: "95%",
fieldLabel: "type:",
labelWidth: 140,
tabIndex: 0,
value: "bd",
}],
layout: "anchor"
}, {
columnWidth: 0.3,
items: [{
itemId: "S2",
margin: 5,
xtype: 'textfield',
anchor: "95%",
fieldLabel: "num:",
labelWidth: 140,
}],
layout: "anchor"
}, ] //panel items
}] // some container items
}] // form items
}] }); win.show();
No scrollbar.
..fiddle.sencha.com/#fiddle/j2f
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyPadding: '5 5 0',
width: 600,
items: [{
xtype: 'container',
padding: '5',
layout: 'anchor',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
anchor: '-5',
name: 'first',
}]
}, {
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
anchor: '100%',
name: 'last'
}]
}],
}],
}); //Ext.create('Ext.container.Viewport', {});
It works, until commented last line Ext.create('Ext.container.Viewport', {});
If I remove the code inside items Viewport observed the same behavior.
..fiddle.sencha.com/#fiddle/j2g..
Ext.create('Ext.container.Viewport', {
padding: '5',
items: [{
id: 'mainPanelContainer',
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
//width: 600,
items: [{ //outer container
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
width: 600,
items: [{
xtype: 'container',
padding: '5',
layout: 'column',
items: [{
xtype: 'textfield',
fieldLabel: 'text1',
name: 'Name1',
columnWidth: .3
}, {
xtype: 'textfield',
fieldLabel: 'text2',
name: 'Name2',
columnWidth: .7
}], //container items
}], //outer container items
}, ] //form items
}, ]});
Scroll works until width: 600 set in that place, but doesn't work in the commented place.
Sorry for outer code in 2, 3 ex. Some unhandy snippets code.
You shouldn't use 'anchor' layout in case of scroll usage.
As you can see in the fiddle, I used 'fit' layout instead.
If you use ExtJS5 I do not recommend you to use 'autoScroll' config(it's deprecated), use 'scrollable' instead. (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-scrollable)
var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'fit',
items: [{
itemId: "TPMethodContentProvider",
xtype: "form",
layout: 'fit',
width: 600,
items: [{
margin: 10,
padding: 5,
xtype: "container",
scrollable: 'horizontal',
layout: 'hbox',
items: [{
itemId: "S1",
margin: 5,
xtype: 'textfield',
fieldLabel: "type:",
scrollable: 'horizontal',
labelWidth: 140,
tabIndex: 0,
value: "bd",
}, {
itemId: "S2",
margin: 5,
xtype: 'textfield',
scrollable: 'horizontal',
fieldLabel: "num:",
labelWidth: 140,
}] //panel items
}] // form items
}] //win items
});
win.show();
I changed the layout to auto, which did the trick for me. Now it is possible to added/remove panels and the scroll-bar will automatically show/hide.
var workActivityPanel = new Ext.Panel({
region: 'center',
autoScroll: true,
layout: {
type: 'auto',
align: 'stretch'
}
});
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 use ExtJS version 4.2.1, and I have a table layout.
Ext.create('Ext.panel.Panel', {
width: 1300,
height: 700,
title: 'Table Layout',
layout: {
type: 'table',
columns: 3,
tdAttrs:
{
width: 500,
}
},
items: [
{
fieldLabel: 'Text1',
xtype: 'textfield',
},
{
fieldLabel: 'Text2',
xtype: 'textfield',
},
{
fieldLabel: 'Text3',
xtype: 'textfield',
},
{
fieldLabel: 'Text4',
xtype: 'textfield',
},
{
fieldLabel: 'Text5',
xtype: 'textfield',
},
{
fieldLabel: 'Text6',
xtype: 'textfield',
}],
renderTo: Ext.getBody()
});
and the result is:
each column width is 500px and I want to each textfield's width adjust with its container. somehow a autoWidth,But it doesn't now.
Add width in percents to the textfields:
Ext.create('Ext.panel.Panel', {
width: 1300,
height: 700,
title: 'Table Layout',
layout: {
type: 'table',
columns: 3,
tdAttrs: {
width: 500,
}
},
defaults: {
width: '95%'
},
items: [
// ...
],
renderTo: Ext.getBody()
});
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);
}
Iam Using compositfield for Combobox and edit button as side by side
for this my code is
{
xtype: 'fieldset',
title: 'Covered under warranty',
checkboxToggle: true,
labelAlign: 'right',
autoHeight: true,
width: 730,
items: [{
bodyStyle: 'padding-left:5px;',
layout: 'table',
autoHeight: true,
autoWidth: true,
layoutConfig: {
columns: 2
},
defaults: {
frame: true,
style: 'margin: 0 0 1px 3px'
},
items: [{
xtype: 'fieldset',
title: 'Warranty Manufacturer',
autoHeight: true,
width: 360,
labelWidth: 110,
items: [{
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Company',
items: [ComboComanyinWarranty, btnEdit]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Company Location',
width: 220,
items: [ComboCompanyLocationInWarranty]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Person',
width: 220,
items: [ComboContactPersonInWarranty, {
xtype: 'button',
text: '...'
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Phone',
items: [{
xtype: 'displayfield',
value: ''
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Mobile',
items: [{
xtype: 'displayfield',
value: ''
}]
}, {
xtype: 'compositefield',
defaults: {
height: 20
},
fieldLabel: 'Contact Email',
items: [{
xtype: 'displayfield',
value: ''
}]
}]
}
}
but buttons are not displaying properly bottom part of the button cut.
so please help
Thanks in advance
Maybe autoheight isn't working? Try setting it to a fixed height...