PDA

View Full Version : query textfield only not working as expected



JeromeA
24 Oct 2013, 7:07 AM
Hi
I'm trying to query the textfields only, not the datefield, textarea, etc... but it doesn't seem to work. If I drop a textfield and a datefield inside a window and I query the textfield... the length of the array returned is 4 instead of 1. I'm sure there is a way that I'm not aware of. Here my example and screenshot to demonstrate



Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',


autoShow: true,
height: 127,
width: 290,
layout: {
align: 'stretch',
type: 'vbox'
},
title: 'My Window',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
fieldLabel: 'text'
},
{
xtype: 'datefield',
fieldLabel: 'date'
},
{
xtype: 'button',
text: 'query textfield',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
});


me.callParent(arguments);
},


onButtonClick: function(button, e, eOpts) {
var fields = Ext.ComponentQuery.query('textfield');


console.log('Amount of textfield :' + fields.length);


for(var x=0; fields.length>x; x++) {
console.log('fields[x].xtype :' + fields[x].xtype);
}
}


});


the console show me:


Amount of textfield :4
fields[x].xtype :textfield
fields[x].xtype :textarea
fields[x].xtype :textfield
fields[x].xtype :datefield

I would expect:

Amount of textfield :1
fields[x].xtype :textfield

scottmartin
24 Oct 2013, 7:58 AM
Per the API


* Matching by `xtype` matches inherited types, so in the following code, the previous field
* *of any type which inherits from `TextField`* will be found:
*
* prevField = myField.previousNode('textfield');
*
* To match only the exact type, pass the "shallow" flag by adding `(true)` to xtype
* (See AbstractComponent's {@link Ext.AbstractComponent#isXType isXType} method):
*
* prevTextField = myField.previousNode('textfield(true)');



Ext.application({
name: 'Fiddle',

launch: function() {

Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Test',
name: 'first'
}, {
xtype: 'datefield',
fieldLabel: 'Date',
name: 'last'
}],

buttons: [{
text: 'Query',
handler: function() {
var form = this.up('form'),
fields = form.query('textfield(true)');

console.log('Amount of textfield :' + fields.length);


for(var x=0; fields.length>x; x++) {
console.log('fields[x].xtype :' + fields[x].xtype);
}

}
}],
renderTo: Ext.getBody()
});

}
});


Scott.

JeromeA
24 Oct 2013, 9:49 AM
Thanks Scott,
I was unaware of this, that is exactly what I was searching for.
:D