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
}]
}]
Related
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());
}
}
},
I have my ExtJS 4.2.1 MVC Application.
Inside my app, I have a grid with a toolbar. The toolbar has 2 buttons, "Add New" and "Edit Record".
Inside my Controller.js I listen for my toolbar buttons click events.
this.control({
'toolbar #newRecord': {
click: this.addRecord
},
'toolbar #editRecord': {
click: this.editRecord
},
'[xtype=editshiftcode] button[action=commit]': {
click: this.saveRecord // here I have to add or edit
}
}
Then I have Window that I want to use for editing and adding records:
Ext.define('App.view.EditShiftCode', {
extend: 'Ext.window.Window',
alias: 'widget.editshiftcode',
height: 250,
width: 550,
title: 'Add / Edit Shift',
modal: true,
resizable: false,
layout: 'fit',
glyph: Glyphs.PENCIL,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
//height: 175,
layout: {
type: 'hbox',
align: 'strech'
},
items: [{
xtype: 'form',
bodyPadding: 10,
autoScroll: false,
itemId: 'editForm',
defaults: { // defaults are applied to items, not the container
allowBlank: false,
allowOnlyWhitespace: false,
msgTarget: 'side',
xtype: 'textfield'
},
items: [
{
xtype: 'textfield',
name: 'ShiftCode',
fieldLabel: 'Code'
},
{
xtype: 'textfield',
name: 'Description',
fieldLabel: 'Description'
},
{
xtype: 'hiddenfield',
name: 'ShiftType'
},
{
xtype: 'hiddenfield',
name: 'ShiftTypeId'
},
{
xtype: 'textfield',
name: 'Hours',
fieldLabel: 'Hours per Day'
},
{
xtype: 'colorcombo',
name: 'ColorHex',
fieldLabel: 'Color'
},
{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'IsActive',
}
],
}]
}],
buttons: [
{
text: 'OK',
action: 'commit',
glyph: Glyphs.SAVE
},
{
text: 'Cancel',
action: 'reject',
glyph: Glyphs.CANCEL
}]
});
me.callParent(arguments);
},
});
My editRecord function is:
editRecord: function (button, e, options) {
var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();
},
My addRecord function is:
addRecord: function (button, e, options) {
var me = this;
var window = Ext.create('App.view.EditShiftCode');
window.show();
},
My saveRecord function is:
saveRecord: function (button, e, options) {
// here i need to know what operation im going to perform.
// if Im going to edit then I have to update my form record to my store record
// if im going to add then I need to add a new item to my store.
}
Is this correct? To use the same function to perform 2 different actions? And if so, how can I know what action am I going to perform and how to do it?
Thanks
This way always worked for me:
User selects a record in the grid
User clicks "Edit record"
I use loadRecord to load the selected record in the form
When he clicks OK I call updateRecord
If user clicks "Add record" I create a new blank record and go to step 3
If he clicks OK after adding record, I just add the new record to the grid - you can easily know if the record is new or existing by checking phantom flag. So if record.phantom === true then it is new.
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();
I want to add a field dynamically when click on button in extjs 4.What I have done is added a onchange function on add button and write the adding textfield logic in that function.
Here is my code.
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.useredit',
requires: ['Ext.form.Panel'],
title : 'Edit User',
layout: 'fit',
autoShow: true,
height: 300,
width: 280,
id : 'mainPanel',
initComponent: function() {
this.items = [
{
xtype: 'form',
id: 'dyForm',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Add',
scope: this,
handler: this.onChange
},
];
this.callParent(arguments);
},
onChange : function(){alert('test');
var form=Ext.getCmp("mainPanel");
form.items.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
form.doLayout(true);
}
});
And I also want that on edit of this form I will load data to those new fields that i have newly created dynamically.
Change the onChange function to
onChange : function(btn){
// var form=Ext.getCmp("mainPanel");
var form = btn.up('window').down('form'); // this is a better approach
form.add(Ext.create("Ext.form.field.Text", {fieldLabel:"First Name"}));
}
should do it. You added the field directly to the collection where you should have use the supplied add method of the form component.
see JSFiddle
when i disable the button it's tooltip also disables. Is there a way to show the tooltip even the button is disabled.
//create my button
var myButton = Ext.create('Ext.Button', {
tooltip : 'my Button Tooltip Text',
id : 'my-button ',
iconCls : 'star-icon',
handler: Ext.Function.pass(_rmp.mediaManager.myButtonFunction, this)
});
//disable my button
Ext.getCmp('my-button').disable();
EDIT:
It is not working as expected on firefox(I am using version 8.0.1) for other browsers(chrome,safari, opera) tooltip works as expected.
#jeewiya
By default, ExtJS framework shows the tooltip on the disabled button. Here is what I had on my Reset button:
{
text: 'Reset',
tooltip : 'my Button Tooltip Text',
id : 'my-button ',
handler: function() {
this.up('form').getForm().reset();
}
}
And, the following image shows that the tip appears even after the Reset button was disabled
In case, you want to try out my sample, here is the complete code that I have tested with ExtJS 4.0.7 and is working as expected:
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var form = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
tooltip : 'my Button Tooltip Text',
id : 'my-button ',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
disabled: true,
handler: function() {
Ext.getCmp('my-button ').disable();
}
}],
renderTo: Ext.getBody()
});
});