extend ComboBox

[near_sun]

//code TreeComboBox.js

 
 
Ext.ux.TreeComboBox = 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.TreeComboBox.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 + '"></div></div></tpl>',
            selectedClass: '',
            onSelect: Ext.emptyFn,
            valueField: 'id'
        });
        var treeConfig = {
            border: false,
            rootVisible: false
        };
        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.TreeComboBox.superclass.initComponent.apply(this,
        arguments);
    },
    findExtRecord: function(prop, value) {
        var record;
        if (this.extStore != null) {
            if (extStore.getCount() > 0) {
                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("Ext.ux.treecombobox", Ext.ux.TreeComboBox);

//create TreeComboBox

{
xtype: 'Ext.ux.treecombobox',
extStore :3, //have no effect ，extStore is still null，Why？？？？
...............................
}

[Animal]

Format your post. It is unreadable.

http://extjs.com/forum/showthread.php?t=43718

[near_sun]

the property extStore is not 3, but null . why?

[Animal]

There is no variable called extStore. You did not declare one.

Properties of the config, are copied into the Component.

[Animal]

        if (this.extStore != null) {
            if (extStore.getCount() > 0) {

See the difference between those two lines?

[near_sun]

        if (this.extStore != null) {
            if (extStore.getCount() > 0) {

See the difference between those two lines?

        if (this.extStore != null) {//I set break point , the value of this.extStore is null,not 3
            if (extStore.getCount() > 0) {

[Animal]

And what is this when you break there?

[near_sun]

thank you for your help
Issue is resolved

after I checked the value of this,I find myself made a mistake.

[jasmina]

Hi All,

I need a treecontrol in a combobox. Need some info on how to use it. How do i pass the store to the tree... Can you share a working example?

[jasmina]

Basically i need the json store representation...