How to pass treestore in combobox in Extjs

Question

I have a combobox which require a treestore as its store. I have tried below code but its not working.

Ext.define('DemoGroupCombo', {
    extend: 'Ext.data.TreeStore',
    fields: ['text', 'value'],
    proxy: {
        type: 'rest',
        url: '../SamplePaging/GetComboTree',
        //data: groupStoreData,
        reader: {
            type: 'json',
            rootProperty: 'children'
        }
    }
});

Expected json result from api:

var groupStoreData =  
//new Ext.data.TreeStore({
//  root:
{
    expanded: true, children: [
        {
            //checked: false, text: "All", expanded: true, children: [
            //  {
            checked: false, text: "Numbers", expanded: true, children: [
                { checked: false, text: '1', value: '1', leaf: true },
                { checked: true, text: '2', value: '2', leaf: true },
                { checked: false, text: '3', value: '3', leaf: true },                  
                {
                    checked: false, text: '4', value:'4', leaf: true
                }
            ]
        }
    ]
    //}]
}

Combobox:

{
    xtype: 'combobox',          
    selModel: {
       selType: 'checkboxmodel'
    },
    queryMode: 'local', 
    displayField: 'text',
    valueField: 'value',        
    store: { type: 'DemoGroupCombo' }
}

Right now I am getting this error message on display:

Error: [Ext.createByAlias] Unrecognized alias: store.DemoGroupCombo

score 1 · Answer 1 · answered Jul 18 '19 at 08:58

1

You need to specify alias for the store:

Ext.define('DemoGroupCombo', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.DemoGroupCombo',
    fields: ['text', 'value'],
    proxy: {
        type: 'rest',
        url: '../SamplePaging/GetComboTree',
        //data: groupStoreData,
        reader: {
            type: 'json',
            rootProperty: 'children'
        }
    }
});

answered Jul 18 '19 at 08:58

norbeq

2,923
1
16
20

yeah, my mistake I missed it but still not getting data in store, I even tried by passing data directly to data property but in both ways store.data.items array is empty.. – Sunil Bamal Jul 18 '19 at 09:13
Sencha doesn't give easy use of `Ext.data.TreeStore` in `combobox`. You need to use `Ext.data.Store` instead or create `Combo Tree Picker` on your own. – norbeq Jul 18 '19 at 09:51
I know @norbeq, but we can still bind this store to combobox and then we can use the same store for its picker which can be overrided to a tree-panel. – Sunil Bamal Jul 18 '19 at 10:02
As i said - you need to change combobox picker. Can you attach result of server response? – norbeq Jul 18 '19 at 10:03
sorry i didn't read it completely i think..btw thanks for your answer i was missing alias.. – Sunil Bamal Jul 18 '19 at 10:05

score 0 · Accepted Answer · answered Jul 18 '19 at 10:00

I got the solution, this is the way to do an ajax proxy call.

Ext.define('DemoGroupCombo', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.DemoGroupCombo',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        useDefaultXhrHeader: false,
        actionMethods: { create: "POST", read: "POST", update: "POST", destroy: "POST" },
        headers: {
            'accept': '*/*'
        },
        async: false,
        limitParam: false,
        startParam: false,
        pageParam: false,       
        url: '../SamplePaging/GetComboTree',
        reader: {
            rootProperty: "children",
            type: 'json'
        }
    },
    defaultRootProperty: "children",
    root: {
        expanded: true
    }
});

This does not answer the question that you asked – NAmorim Jul 19 '19 at 10:35 — NAmorim, Jul 19 '19 at 10:35
but it will bind store to combobox which I want – Sunil Bamal Jul 19 '19 at 12:23 — Sunil Bamal, Jul 19 '19 at 12:23

How to pass treestore in combobox in Extjs

2 Answers2