I have tbar in grid panel. My example code like
tbar:[
{
xtype: 'form',
items: [{
xtype: 'filefield',
name: 'filefor',
labelWidth: 50,
allowBlank: false,
buttonConfig: {
text: 'up...'
}
}]
}
,{
text: 'add',
handler:function(){
var form = this.up('form').getForm(); // not working
form.submit({}); // not working
}
}
]
I can't get my form to submit. How can i do that thanks so much :).
The form is sibling of the add button. you may want to use .prev instead of .up to access the form
Here is the snippet that works
Ext.require([
'Ext.form.*',
'Ext.tip.*']);
Ext.onReady(function () {
Ext.QuickTips.init();
var f = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
bodyStyle: 'padding: 5px 5px 0 5px;',
defaults: {
xtype: 'textfield',
anchor: '100%',
},
html:'text',
tbar: [{
xtype: 'form',
items: [{
xtype: 'filefield',
name: 'filefor',
labelWidth: 50,
allowBlank: false,
buttonConfig: {
text: 'up...'
}
}]
}, {
text: 'add',
handler: function () {
//var form = this.prev('form').getForm(); // working at extjs4.0.2a
var form =this.ownerCt.down('form').getForm();// working at extjs 4.2.0
form.submit({});
}
}]
});
});
For a live demo, here it is the jsfiddle link .
var form = this.up('form').getForm(); // not working
form.submit({}); // not working
change to:
this.ownerCt.down('form').getForm();
Related
I am creating a menu using Ext.tab.Panel and would like to have Search feature. Something like Bootstrap navbar - https://getbootstrap.com/docs/4.0/components/navbar/
I tried to simply add the textfield element but didn't work obviously.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
});
Is it possible to achieve this at all?
You can archive it with the tabbar config of the Ext.tab.Panel.
The Ext.tab.Bar is a specialized Ext.container.Container where you can add items like a to Textfield.
So add te search textfield to the tabbar config and you can archive what you want to, see the example code below and the Sencha Fiddle.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
],
tabBar: {
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
},
renderTo: Ext.getBody()
});
At first this functionality does not exist in the tabpanel, which I recommend you do and replace the idea of tabpanel to apply a cardlayout which is the same tabpanel layout system.
And then you can use a toolbar, with the buttons being configured with the toogleGroup, in short, you'd better see the code example below working.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Panel', {
fullscreen: true,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'toolbar',
height: 42,
defaults: {
xtype: 'button',
},
items: [{
text: 'Tab1',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 0,
toggleGroup: 'tabHandler',
enableToggle: true,
pressed: true,
margin: '0'
}, {
text: 'Tab2',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 1,
enableToggle: true,
margin: '0'
}, {
text: 'Tab3',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 2,
toggleGroup: 'tabHandler',
enableToggle: true,
margin: '0'
}, '->', {
xtype: 'textfield',
fieldLabel: 'Search:',
labelWidth: 70,
width: 250,
margin: 0
}, {
iconCls: 'x-fa fa-search',
handler: function(){
alert('Your Search here!');
}
}]
}, {
xtype: 'container',
itemId: 'fakeTab',
margin: '16 0 0 0',
flex: 1,
layout: 'card',
defaults: {
xtype: 'container',
height: 800
},
items: [{
html: '<STRONG>TAB 1 your content here</STRONG>'
}, {
html: '<STRONG>TAB 2 your content here</STRONG>'
}, {
html: '<STRONG>TAB 3 your content here</STRONG>'
}]
}]
});
}
});
Working sample here
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'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 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)
}
});
});