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.
Related
I have a fieldset defined on my page. Now I want to enable or disable this field set on button click event. But it is not working properly. Below is the code I have written:
To Disable:
this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
field.disable();
});
To Enable:
this.mySettings.query('[name="fieldsetName"]').forEach(function (field) {
field.enable();
});
Issue-1 : When I disable fieldset, it seems to be disabled visually. But still I can access controls inside it.
Issue-2 : Once it is disabled, I cannot re-enable it.
I need a working sample with these two issues resolved.
Currently I am using version 4.2 of ExtJs
You should call the setDisabled function on the fieldset. It will disable all containing components.
fieldset.setDisabled(true);
// the fieldset and all inner components are disabled
fieldset.setDisabled(false);
// the fieldset and all inner components are enabled
See the Sencha ExtJs 4.2.0 documentation and
the following minimal working example can be found on Sencha Fiddle.
Ext.create('Ext.panel.Panel',{
items: [{
xtype: 'fieldset',
itemId: 'fieldsetId',
items: [{
xtype: 'checkbox',
fieldLabel: 'Check 1'
},{
xtype: 'checkbox',
fieldLabel: 'Check 2'
},{
fieldLabel: 'Combo 1',
xtype: 'combobox',
store: ['value1','value2','value3']
}]
}, {
xtype: 'button',
text: 'Disable fieldset',
handler: function (button) {
var fieldset = Ext.ComponentQuery.query('panel > #fieldsetId')[0];
var toggle = !fieldset.isDisabled();
var text = (toggle ? 'Enable' : 'Disable') + ' fieldset';
fieldset.setDisabled(toggle);
button.setText(text);
}
}],
renderTo: Ext.getBody()
});
Paste this into a Sencha fiddle and hit Run:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.create('Ext.window.Window', {
height: '100%',
width: '100%',
autoShow:true,
bodyPadding: 25,
title:'win',
items: [{
xtype: 'fieldset',
items: [{
xtype: 'checkbox',
fieldLabel: 'field1'
},{
xtype: 'checkbox',
fieldLabel: 'field2'
},{
fieldLabel: 'field3',
xtype: 'combo',
store: ['asdf','zzasdf','dfdf']
}]
}, {
xtype: 'button',
text: 'Enable/Disable entire fieldset',
handler: function(btn){
var fset = btn.up('window').down('fieldset');
fset.setDisabled(!fset.disabled);
}
}, {
margin: '0 0 0 10',
xtype: 'button',
text: 'Enable/Disable each field in fieldset individually',
handler: function(btn){
var fset = btn.up('window').down('fieldset');
fset.items.each(function(i){
i.setDisabled(!i.disabled);
});
}
}]
});
}
});
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 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 have a windows with a items include 2 items like
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
border: false,
hidden: true,
items: [{
xtype: 'textfield',
fieldLabel: '1'
},{
xtype: 'textfield',
fieldLabel: '2'
}]
}
}).show();
I make a button and i want show/hide first item (fieldLabel : '1') in my window like
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
win.down('form').items.items[0].show(); // not working
}
});
But that's not working. How to fix that thanks
ps: I don't want to use id to get comp, b/c my form is dynamic thanks
here is my full code http://jsfiddle.net/aMKjN/
Try this. It will show only the first textfield.
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
win.items.items[0].show();
win.items.items[0].items.items[1].hide();
}
});
try this it will show only textfield 1
Ext.onReady(function () {
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
border: false,
// hidden: true,
items: [{
xtype: 'textfield',
id:'first',
hidden: true,
fieldLabel: '1'
},{
xtype: 'textfield',
fieldLabel: '2'
}]
}
}).show();
Ext.create('Ext.Button', {
text: 'Show first item',
visible: false,
renderTo: Ext.getBody(),
handler: function() {
Ext.getCmp('first').setVisible(true)
}
});
});
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'
}
]
}
]