如何将TreeStore数据放在ComboBox中

时间:2014-08-16 20:30:39

标签: javascript extjs extjs4 extjs4.1 extjs4.2

问题。请光顾我,因为我还是新手的极品

我正在尝试将现有(GroupingTree)树存储的输出修改为对于简单的组合框下拉有用的东西,因为服务器端代码没有以我需要的下拉格式返回数据。

我在下面显示的代码示例中创建了一个UI Combobox(我的功能代码被注释掉了)

我的商店(树商店)来自名为GroupingTree.js的文件

但由于某种原因我的函数“getCustomStore”没有被调用,因此没有返回“customStore”。

在这个问题上,我一直在敲打我的脑袋。请帮忙

        Ext.define('TV.view.configPanel.data.edit.analyticControls.CustomCaptionNew', {
            extend: 'Ext.form.field.ComboBox',
            alias: 'widget.customcaptionNew',
            id: 'txtCustomCaption', //TODO: Remove ID - Check with QA

            //Configuration
            isFormattingControl: true,

            /**
            * Initialization of CustomCaption
            * @method initComponent
            */
            initComponent: function () {
                var config = {
                    fieldLabel: 'Custom Caption as Dropdown',
                    blankText: TV.Global.ErrorMessages.CustomCaptionError,
                    name: 'Caption',
                    anchor: '100%',
                    allowBlank: false,
                    validateOnChange: true,
                    vtype: 'name',
                    minChars: 2,
                    typeAhead: 'true',
                    valueField: 'aggregationCode',
                    name: 'aggregationName',
                    /*store: new Ext.data.SimpleStore({fields:['aggregationCode','aggregationName'],
                            data: [['agg1','Cusip'],
                                    ['agg2','ISIN'],
                                    ['agg3','Sedol'],
                                    ['agg4','Group1'],
                                    ['agg5','Security'],
                                ]})*/
                    store: getCustomStore()

                };

                Ext.apply(this, Ext.apply(this.initialConfig, config));
                // Custom validator. For validating the entered caption for analytic.
                Ext.apply(Ext.form.field.VTypes, {
                    name: nameValidator,
                    nameText: TV.Global.ErrorMessages.blankText
                });
                this.callParent();
            }
            var getCustomStore = function(){
                    /*var customCaptionStore = {};
                    var fields = ["aggregationName", "aggregationCode"];
                    var data = [{"name","Id"}];
                    //var tempStore = this.getStore(Store.GroupingTreeStore);
                    //alert("Got the proper store");
                    var fields = ['abbr', 'name'];
          var data = [];
          for (var x = 0; x < tempStore.getRootNode().childNodes[1].childNodes.length;  x++){
            data.push({name : tempStore.getRootNode().childNodes[1].childNodes[x].raw.text, abbr: tempStore.getRootNode().childNodes[1].childNodes[x].raw.id});
            }
          var states = Ext.create('Ext.data.Store', {
                fields:fields,
                data:data
            });
                    customCaptionStore = Ext.create('Ext.data.Store', {
                            fields:fields,
                            data:data
                        });
                    return customCaptionStore;*/
                    alert("Called debug");
                    return new Ext.data.SimpleStore({fields:['aggregationCode','aggregationName'],
                            data: [['agg1','Cusip'],
                                    ['agg2','ISIN'],
                                    ['agg3','Sedol'],
                                    ['agg4','Group1'],
                                    ['agg5','Security']
                                ]});
                };
        });

我的TreeStore数据

            Ext.require('TV.model.AggregationTag');

            Ext.define('TV.store.GroupingTree', {
                extend: 'Ext.data.TreeStore',
                filtered: false,

                model: 'TV.model.AggregationTag',
                proxy: {
                    type: 'direct',
                    directFn: ContainerConfigurationData.GetAggregations,
                    paramOrder: ['clientId', 'nodeToLoad', 'searchKey'],
                    paramsAsHash: true
                },
                autoLoad: false,
                treeField: TV.constants.Constant.DataTabFields.GroupingsTreeColumnName,
                //groupField: 'Category',

                root: {
                    expanded: true,
                    loaded: true // Because groupfield is not defined, this is actually required for loading
                }
            });

1 个答案:

答案 0 :(得分:1)

您的函数调用不是商店对象 -

-->  store: getCustomStore()

我会打破它:

首先定义您的商店 - var store = new Myapp.data.TreeStore({     storeId:&#39; treeStore&#39;,     autoLoad:&#39; true&#39;,     model:&#39; Myapp.TreeModel&#39;,

proxy: {
    type: 'ajax',
    actionMethods: {create: 'POST'},
    url: '../include/some_json_block.php',
    reader: {
        type: 'json',
        root: 'nodes',
        idProperty: 'id'
    }
},
root: {
    text: 'Some Root Vx',
    id: '0',
    expanded: true
}

});

然后将商店放在面板中 - var treePanel = new Myapp.tree.Panel({     标题:&#39;面板树管理器&#39;,     id:&#39; mainTreePanel&#39;,     宽度:200,     身高:20,     商店:商店,     rootVisible:true,

也许这有帮助...