PDA

View Full Version : Ext.getCmp undefined



wasimwani
19 Feb 2014, 6:58 AM
Though i checked other posts about the same question, they didn't prove to be much helpful. Below is the code where i am trying to get value of text box but i am repeatedly getting same error. Is there any alternative method available.


initComponent: function() { this.items = [ { xtype: 'form', padding: '5 5 0 5', border: false, style: 'background-color: #fff;', fieldDefaults: { anchor: '100%', labelAlign: 'left', allowBlank: false, combineErrors: true, msgTarget: 'side' }, items: [ { xtype: 'textfield', name : 'id', fieldLabel: 'id', hidden:true }, { xtype: 'textfield', name : 'name', id : 'idname', fieldLabel: 'Name', allowBlank:false, blankText:'Name is required' }, { xtype: 'textfield', name : 'accno', maxLength: 16, enforceMaxLength : true, regex: /^.{16}$/, regexText:'Only 16 Digits please', //autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'}, fieldLabel: 'AccNo' }, { xtype: 'textfield', name : 'trade', fieldLabel: 'Trade' }, { xtype: 'datefield', name : 'doi', fieldLabel: 'Date Of Insurance', editable: false, value : new Date() }, { xtype: 'datefield', name : 'dd', fieldLabel: 'Due Date', editable:false, value : new Date() } ] } ]; this.dockedItems = [{ xtype: 'toolbar', dock: 'bottom', id:'buttons', ui: 'footer', items: ['->', { iconCls: 'icon-save', itemId: 'save', text: 'Save', handler: function (button) { Ext.Msg.alert('You clicked the button'); var txt = Ext.getCmp('idname').value(); //var tf = button.up('window').down('#idname'); Ext.Msg.alert(txt); }, action: 'save' },{ iconCls: 'icon-reset', text: 'Cancel', scope: this, handler: this.close }] }]; this.callParent(arguments);}});

scottmartin
19 Feb 2014, 8:04 AM
This it the preferred method.



xtype: 'textfield',
name: 'name',
// id: 'idname',
itemId: 'idname',
fieldLabel: 'Name',
allowBlank: false,
blankText: 'Name is required'

..

var tf = button.up('window').down('#idname');

wasimwani
19 Feb 2014, 8:18 AM
This it the preferred method.



xtype: 'textfield',
name: 'name',
// id: 'idname',
itemId: 'idname',
fieldLabel: 'Name',
allowBlank: false,
blankText: 'Name is required'

..

var tf = button.up('window').down('#idname');


I am still not able to retrieve it .Tried your solution but still getting error

TypeError: button.up(...) is undefined

scottmartin
19 Feb 2014, 8:27 AM
Have you created an instance?



Ext.application({
name: 'Fiddle',

launch: function() {
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
items: [
{
xtype : 'textfield',
itemId : 'myfield'
}
]
}
}).show();

var myField = win.down('#myfield');
console.log(myField);
}
});

wasimwani
19 Feb 2014, 8:36 AM
Have you created an instance?



Ext.application({
name: 'Fiddle',

launch: function() {
var win = Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
items: [
{
xtype : 'textfield',
itemId : 'myfield'
}
]
}
}).show();

var myField = win.down('#myfield');
console.log(myField);
}
});


This is the actual code



Ext.define('JKInsr.view.contact.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.contactedit',


requires: ['Ext.form.Panel','Ext.form.field.Text'],


title : 'Edit Insurance Record',
layout: 'fit',
autoShow: true,
width: 480,

iconCls: 'icon-user',


initComponent: function() {
this.items = [
{
xtype: 'form',
id: 'contform',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',

fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},


items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'name',
id : 'idname',
fieldLabel: 'Name',
allowBlank:false,
blankText:'Name is required'
},
{
xtype: 'textfield',
name : 'accno',
maxLength: 16,
enforceMaxLength : true,
regex: /^.{16}$/,
regexText:'Only 16 Digits please',
//autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'},
fieldLabel: 'AccNo'
},
{
xtype: 'textfield',
name : 'trade',
fieldLabel: 'Trade'
},
{
xtype: 'datefield',
name : 'doi',
fieldLabel: 'Date Of Insurance',
editable: false,
value : new Date()
},
{
xtype: 'datefield',
name : 'dd',
fieldLabel: 'Due Date',
editable:false,
value : new Date()
}
]
}
];

this.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
itemId: 'save',
text: 'Save',
handler: function (button) {
Ext.Msg.alert('You clicked the button');
//var txt = Ext.getCmp('idname').getValue();
// var tf = button.up('window').down('#idname');
var txt = button.up('window').down('#idname');


//alert(txt);
Ext.Msg.alert(txt);

},
action: 'save'
},{
iconCls: 'icon-reset',
text: 'Cancel',
scope: this,
handler: this.close
}]
}];

this.callParent(arguments);
}
});

scottmartin
19 Feb 2014, 8:49 AM
See if this helps:



Ext.define('JKInsr.view.contact.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.contactedit',


requires: ['Ext.form.Panel','Ext.form.field.Text'],


title : 'Edit Insurance Record',
layout: 'fit',
autoShow: true,
width: 480,

iconCls: 'icon-user',


initComponent: function() {
this.items = [
{
xtype: 'form',
id: 'contform',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',

fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},


items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'name',
//id : 'idname',
itemId: 'idname',
fieldLabel: 'Name',
allowBlank:false,
blankText:'Name is required'
},
{
xtype: 'textfield',
name : 'accno',
maxLength: 16,
enforceMaxLength : true,
regex: /^.{16}$/,
regexText:'Only 16 Digits please',
//autoCreate: {tag: 'input', type: 'text', size: '20', autocomplete: 'off', maxlength: '10'},
fieldLabel: 'AccNo'
},
{
xtype: 'textfield',
name : 'trade',
fieldLabel: 'Trade'
},
{
xtype: 'datefield',
name : 'doi',
fieldLabel: 'Date Of Insurance',
editable: false,
value : new Date()
},
{
xtype: 'datefield',
name : 'dd',
fieldLabel: 'Due Date',
editable:false,
value : new Date()
}
]
}
];

this.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
itemId: 'save',
text: 'Save',
handler: function (button) {
var win = button.up('window'),
field = win.down('#idname');

console.log(field);
},
action: 'save'
},{
iconCls: 'icon-reset',
text: 'Cancel',
scope: this,
handler: this.close
}]
}];

this.callParent(arguments);
}
});

Ext.application({
name: 'Fiddle',

launch: function() {
// create an instance
var win = Ext.create('JKInsr.view.contact.Edit', {
title: 'Hello'
});

var myField = win.down('#idname');
console.log(myField);
}
});