Hello,
I am now trying to implement the extension by myself within the Ext.UX project.
I`ve compiled my customized extension library successfully and the control is showing up in my application.
However, when i expand a node within the tree popup the assigned TreeLoader event is never raised server-side.
A request to the server is made, but it fails with an error message ("control ext-gen1000 not found").
Here is my code:
ComboTree.js
Ext.namespace('Ext.ux');
/**
*
* @class ComboTree
* @extends Ext.form.ComboBox
*/
Ext.ux.ComboTree = Ext.extend(Ext.form.ComboBox, {
extStore: null,
tree: null,
treeId: 0,
setValue: function(v) {
var text = v;
if (this.valueField) {
var r = this.findExtRecord(this.valueField, v);
if (r) {
text = r.data[this.displayField];
} else if (this.valueNotFoundText !== undefined) {
text = this.valueNotFoundText;
}
}
Ext.ux.ComboTree.superclass.setValue.call(this, text);
this.lastSelectionText = text;
if (this.hiddenField) {
this.hiddenField.value = v;
}
this.value = v;
},
initComponent: function() {
this.treeId = Ext.id();
this.focusLinkId = Ext.id();
Ext.apply(this, {
store: new Ext.data.SimpleStore({
fields: [],
data: [[]]
}),
editable: false,
shadow: false,
mode: 'local',
triggerAction: 'all',
maxHeight: 200,
tpl: '<tpl for="."><div style="height:200px"><div id="'
+ this.treeId + '">
</tpl>',
selectedClass: '',
onSelect: Ext.emptyFn,
valueField: 'id'
});
alert(this.loader);
var treeConfig = {
border: false,
rootVisible: true,
loader: this.loader
};
Ext.apply(treeConfig, this.treeConfig);
if (!treeConfig.root) {
treeConfig.root = new Ext.tree.AsyncTreeNode({
text: 'treeRoot',
id: '0'
});
}
this.tree = new Ext.tree.TreePanel(treeConfig);
this.on('expand', this.onExpand);
this.tree.on('click', this.onClick, this);
Ext.ux.ComboTree.superclass.initComponent.apply(this,
arguments);
},
findExtRecord: function(prop, value) {
var record;
if (this.extStore != null) {
if (this.extStore.getCount() > 0) {
this.extStore.each(function(r) {
if (r.data[prop] == value) {
record = r;
return false;
}
});
}
}
return record;
},
onClick: function(node) {
if (node.attributes.parameter == 9) {
//
} else {
//
this.setValue(node.text);
this.hiddenField.value = node.id;
this.collapse();
}
},
onExpand: function() {
this.tree.render(this.treeId);
}
});
Ext.reg("combotree", Ext.ux.ComboTree);
ComboTree.cs
[assembly: WebResource("Coolite.Ext.UX.Extensions.ComboTree.resources.ComboTree.js", "text/javascript")]
namespace Coolite.Ext.UX
{
[Designer(typeof(EmptyDesigner))]
[DefaultProperty("")]
[Xtype("combotree")]
[InstanceOf(ClassName = "Ext.ux.ComboTree")]
[ClientScript(Type = typeof(ComboTree), WebResource = "Coolite.Ext.UX.Extensions.ComboTree.resources.ComboTree.js", FilePath = "ux/extensions/combotree/combotree.js")]
[ToolboxData("<{0}:ComboTree runat=\"server\" Title=\"Combo tree\" Height=\"300\"></{0}:ComboTree>")]
[Description("Combobox with tree functionality")]
public class ComboTree : ComboBox
{
private TreeLoaderCollection treeLoader;
[ClientConfig("loader>Primary")]
[Category("Config Options")]
[NotifyParentProperty(true)]
[DefaultValue(null)]
[PersistenceMode(PersistenceMode.InnerProperty)]
[Description("The root node for the tree.")]
public virtual TreeLoaderCollection Loader
{
get
{
if (this.treeLoader == null)
{
this.treeLoader = new TreeLoaderCollection();
}
return this.treeLoader;
}
}
}
}
Usage:
<ux:ComboTree ID="_ct" runat="server">
<Loader>
<ext:PageTreeLoader OnNodeLoad="LoadTreeNodeEntries">
</ext:PageTreeLoader>
</Loader>
</ux:ComboTree>
I`m trying to figure out whats the correct way to implement extensions by the GMap extension, but i`m not sure if the code above is the right one for my extension.
Any ideas ?
Thx,
Peter
