PDA

View Full Version : [CLOSED] find all component Ext.ComponentMgr.all.each and Ext.ComponentMgr.all.filterBy dos'nt work.



siyahgul
Feb 18, 2015, 12:33 AM
Ext.onReady(function () {
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
renderTo: Ext.getBody(),
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'grid',
columns: [{
header: 'Column One'
}], // One header just for show. There's no data,
store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
flex: 1 // Use 1/3 of Container's height (hint to Box layout)
}, {
xtype: 'splitter' // A splitter between the two child items
}, { // Details Panel specified as a config object (no xtype defaults to 'panel').
title: 'Details',
bodyPadding: 5,
items: [{
fieldLabel: 'Data item',
xtype: 'textfield'
}], // An array of form fields
flex: 2 // Use 2/3 of Container's height (hint to Box layout)
}]
});

try {

Ext.ComponentMgr.all.each(function (item) {

});
} catch (e) {
alert(e);
}

try {

var myComponentes = Ext.ComponentMgr.all.filterBy(function (c) {
return c.getXType() == 'panel';
});
} catch (e) {
alert(e);
}

});

TypeError: undefined is not a function.

geoffrey.mcgill
Feb 18, 2015, 5:18 AM
Hello,

You can use the Ext.ComponentQuery to get an Array of Components that match your selector.

http://docs.sencha.com/extjs/5.0/5.0.0-apidocs/#!/api/Ext.ComponentQuery

Example


var myComponentes = Ext.ComponentQuery.query('panel');

It appears the code you were using has been Deprecated and no longer functions within Ext JS 5.

Hope this helps.

siyahgul
Feb 18, 2015, 10:16 AM
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
</form>
</body>




Ext.onReady(function () {
try {
var myComponentes = Ext.ComponentQuery.query('panel');
alert(myComponentes.length); //return 3

myComponentes.forEach(function (item) {
alert(item.id); //messagebox-1001, sparklines-tooltip, ext-quicktips-tip
});

} catch (e) {
alert(e);
}
});


There is a panel. turns three. "messagebox-1001, sparklines-tooltip, ext-quicktips-tip"

where is my Panel1 ?

Daniil
Feb 18, 2015, 10:38 AM
Ext.ComponentQuery() deals with Ext.NET/ExtJS components only. A component means a JavaScript class instance.

<asp:Panel ID="Panel1" runat="server" /> produces noting except <div id="Panel1"></div>, no any JavaScript class instance or something.

To retrieve a DOM object rendered by Panel1, you can use Ext.get("Panel1").

siyahgul
Feb 18, 2015, 10:48 AM
Sorry. I fix the code.



<form id="form1" runat="server">
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<ext:Panel ID="Panel1" runat="server" Height="300" Title="Title">
<Items></Items>
</ext:Panel>
</form>




Ext.onReady(function () {
try {
var myComponentes = Ext.ComponentQuery.query('panel');
alert(myComponentes.length); //return 4

myComponentes.forEach(function (item) {
alert(item.id); //messagebox-1001, sparklines-tooltip, ext-quicktips-tip, panel1
});

} catch (e) {
alert(e);
}
});


return messagebox-1001, sparklines-tooltip, ext-quicktips-tip, panel1. Why not just back panel1 ?

geoffrey.mcgill
Feb 18, 2015, 4:07 PM
After reviewing the ComponentQuery documentation that I linked to above, I noticed the following note:


To match only the exact type, pass the "shallow" flag by adding (true) to xtype (See Component's isXType method):

prevTextField = myField.previousNode('textfield(true)');

Give the following a try:


Ext.ComponentQuery.query('panel(true)')

Hope this helps solve the problem.

siyahgul
Feb 18, 2015, 5:38 PM
It's work. thank you.

well



<ext:Panel ID="PanelExtended1" runat="server" myCustomProp="test1" Title="sales data">
<Items>
<ext:TextField ID="TextField1" runat="server" FieldLabel="asdsadsad">
</ext:TextField>
<ext:TextField ID="TextField2" runat="server" myCustomProp="test2" FieldLabel="asdsadsad">
</ext:TextField>

</Items>
</ext:Panel>




var findComs = Ext.ComponentQuery.query('[myCustomProp]'); //Does'nt work


How do I find to components of my custom property?

geoffrey.mcgill
Feb 18, 2015, 5:45 PM
The code you provided appears to function correctly.

Two items are returned from the ComponentQuery.

siyahgul
Feb 18, 2015, 5:57 PM
oh my god. I save the page. sorry. It's work. thank you.

siyahgul
Feb 19, 2015, 1:35 PM
<ext:Panel ID="PanelExtended1" runat="server" myprop="deneme">
<Items>
<ext:TextField ID="TextField1" runat="server" FieldLabel="asdsadsad">
</ext:TextField>
</Items>
</ext:Panel>




var findComs = Ext.ComponentQuery.query('[myprop]');

//question1
findComs.forEach(function (item) {
//item add myprop (attr) ?
});

//question2
findComs.forEach(function (item) {
//item myprop (attr) --> get and set method ?
});

Daniil
Feb 20, 2015, 5:17 AM
For anybody who is interested in - the question in the previous post (#10) is handled in a separate thread:
http://forums.ext.net/showthread.php?54842