I want to use onkeyup event of text field, so we can count that character when enter the text.
enableKeyEvents: true
For key events to work, you need to explicitly specify it.
Working POC code:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
xtype: 'form',
height: 100,
items: [{
xtype: 'textfield',
fieldLabel: 'field label',
value: '1',
enableKeyEvents: true,
listeners: {
keyup: function() {
console.log("key Up called");
},
change: function() {
console.log('changed');
}
}
}]
}]
})
});
Working Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2cbd
You are almost there. In the doc field key events, it is written that key events get fired only if enableKeyEvents is set to true.
{
xtype: 'textfield',
fieldLabel: 'Address',
width: '100%',
enableKeyEvents : true,
listeners: {
keyup : function(obj) {
alert('test fire ' + obj.getValue());
}
}
},
Related
I have a form within a form. I need to bind the hidden property of a field in the outer form to the checked state of a field in the inner form. I assume I can do this with binding by setting up a custom getter/setter but not exactly sure... here's the idea:
Sencha fiddle
You can do something like this:
Ext.define('Test.InnerForm', {
extend: 'Ext.form.Panel',
xtype: 'innerform',
defaultListenerScope: true,
config: {
isFoo: false
},
twoWayBindable: {
isFoo: true
},
publishes: ['isFoo'],
items:[{
xtype: 'checkbox',
fieldLabel:'cb',
listeners: {
change: 'onCheckChange'
}
}],
onCheckChange: function(box, checked) {
this.setIsFoo(checked);
}
});
Ext.define('Test.OuterForm', {
extend: 'Ext.form.Panel',
xtype: 'outerform',
viewModel: true,
items:[{
xtype:'innerform',
reference: 'innerform'
},{
xtype: 'textfield',
fieldLabel: 'want to hide this when cb is checked',
bind: {
hidden: '{innerform.isFoo}'
}
}]
});
Ext.create('Test.OuterForm', {
title: 'Outer form',
width: 500,
height: 500,
bodyPadding: 10,
renderTo: Ext.getBody()
});
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 have a panel which is not a form, yet it's used like a form. I need to disable the "addButton" button when a text field is invalid. The disabling in the text Field's validator function works, but visually the button still looks enabled.
How can I tell a button to be visually disabled via the validator method on my text field?
Here is the code:
items: [
{
xtype: 'textfield',
validator: function(value) {
var reg = /^\d+(,\d+)*$/;
var addButton = this.ownerCt.down('[itemId=addButton]');
if (reg.test(value)===false) {
addButton.disabled=true;
addButton.allowDepress=false;
return "Enter whole numbers separated by comma";
}
addButton.disabled=false;
addButton.allowDepress=false;
return true;
},
Here is working sample http://jsfiddle.net/H76fQ/2/
var button = Ext.create('Ext.button.Button',{
renderTo: Ext.getBody(),
text: 'Ok',
disabled: true
});
Ext.create('Ext.form.field.Text',{
allowBlank: false,
renderTo: Ext.getBody(),
listeners:{
afterrender: function(){
this.validate();
},
validitychange: function(me, isValid){
button.setDisabled(!isValid);
}
}
});
To disable the FormPanel’s submit button,You can set the FormPanel’s monitorValid to true and the submit button’s formBind to true.
items: [{
xtype: 'ux.form',
monitorValid: true, // Must be added
layout: {
type: 'hbox',
align: 'start',
pack: 'stretch'
},
items: [{
name:"testing",
xtype:'textfield',
fieldLabel:'Test',
allowBlank:false, // This is the property which will check the validation
},
{
xtype: 'ux.button',
text: 'Submit',
width: 120,
formBind: true
}]
}]
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 would like to know how to add an onClick() method to a Ext.form.Text component.
If the component is a button, then all I have to do is to add this line:
handler: function() {alert("Hello!");}
But that line doesn´t work if the component is a textfield. Look at the example below:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
id: 'myButton',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Does not work!
}, {
xtype: 'button',
name: 'email',
fieldLabel: 'Email Address',
style: 'background-color: green',
textfieldStyle: 'background-color: green',
handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Works!
}]
});
Handler is a shortcut for the default action listener. For a button this is obviously click, but a text field doesn't have a default action. In addition, a text field does not actually fire a click event, but you can always add an event handler to the dom element:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
id: 'myButton',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
listeners: {
render: function() {
this.getEl().on('mousedown', function(e, t, eOpts) {
Ext.getCmp('myButton').setValue("TEXT")
});
}
}
}]
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
id: 'myButton',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
listeners: {
render: function( component ) {
component.getEl().on('click', function( event, el ) {
component.setValue("TEXT");
});
}
}
}, {
xtype: 'button',
name: 'email',
fieldLabel: 'Email Address',
style: 'background-color: green',
textfieldStyle: 'background-color: green',
handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Works!
}]
});