PDA

View Full Version : Checking whether a class is a descendant of another class



inf3rno
26 Dec 2010, 10:16 AM
Hi!

How can I check in extjs whether a class a descendant of another class is?

I need something like this:


var A=function (){};

var B=Ext.extend(A,{});
var C=Ext.extend(A,{});

var D=Ext.extend(B,{})

Ext.Msg.alert(D.isDescendantOf(B)); //true
Ext.Msg.alert(C.isDescendantOf(B)); //false



thanks!

inf3rno
26 Dec 2010, 10:46 AM
I hadn't found implementation for this problem, so I made it on my own:


Ext.descendantOf=function (cls,anc)
{
var cur=cls;
while(cur=(cur.superclass && cur.superclass.constructor))
{
if (cur===anc)
{
return true;
}
}
return false;
};

mankz
26 Dec 2010, 11:02 AM
Curious, What are you using it for?

inf3rno
26 Dec 2010, 11:51 AM
It's compicated :S
I have a TreePanel with a custom uiProvider. The provider displays columns beside each other and panels above/under each other or above/under the columns. I have to put the columns in hbox layouts, so I have to check by render whether a node's view a hbox column or a simple panel is. There aren't interfaces in extjs, so I have to check the ancestor class.

mitchellsimoens
26 Dec 2010, 1:48 PM
Why not use treepanel.findParentByType("xtype") or treepanel.findParentByType(Ext.Panel)?

inf3rno
26 Dec 2010, 2:56 PM
Because my columns and my text containers are panels too.
I use this structure:



var ColumnContainer=Ext.extend(Ext.Panel,
{
style: "text-align: center; margin: 3px; margin-bottom: 10px;",
layout: "hbox",
frame: true
});
var ColumnPanel=Ext.extend(Ext.Panel,
{
style: "padding: 2px",
frame: true
});
var TextPanel=Ext.extend(Ext.Panel,
{
style: "text-align: center; margin: 3px; padding-bottom: 10px;",
frame: true
});

var unitSize=200;
var manualTree=new ColumnContainer(
{
renderTo: Ext.getBody(),
width: 4*unitSize,
items:
[
new ColumnPanel(
{
flex: 3.0,
title: "3.0",
items:
[
new TextPanel(
{
html: "menu"
}),
new ColumnContainer(
{
width: 1.5*unitSize,
items:
[
new ColumnPanel(
{
flex: 1.0,
title: "1.0",
items:
[
new TextPanel(
{
html: "news"
})
]
}),
new ColumnPanel(
{
flex: 0.5,
title: "0.5",
items:
[
new TextPanel(
{
html: "something"
})
]
})
]
}),
new TextPanel(
{
html: "search"
})
]
}),
new ColumnPanel(
{
flex: 1.0,
title: "1.0",
items:
[
new TextPanel(
{
html: "right"
})
]
})
]
});



23976

I'm not an expert... Maybe there is a better way to display tree in this kind of view, but I haven't found it...

mitchellsimoens
26 Dec 2010, 3:22 PM
You ColumnContainer, unless you don't need the title bar, you can use Container instead. Your TextPanel, if you do not need any child items, you can use Component instead.

http://www.sencha.com/learn/Tutorial:Creating_new_UI_controls
This link is a great guide from Animal. It explains what component is the right component to extend from.

bseddon
3 Mar 2013, 4:37 PM
Thanks for this suggestion. It's surprising someone asked why you want it. This kind of reflection is standard issue in all statically typed languages. In my example I want to be able to listen to events of classes that descend from Ext.form.field.Text (Number, Date, etc.) when they appear in specific containers.

Sadly, the concept of 'descendant' in ExtJS seems to be what in other languages is containment.