store listener not able to load another store extjs 4

Question

forum member

I am doing a task in which the Store load another store from inside it. Actually I need the data from another store.

I am having assignmentStore as

Ext.define('gantt.store.assignmentStore', {
    extend : 'Ext.data.Store',

        model : 'gantt.model.Assignment',
        autoLoad : true,

        // Must pass a reference to resource store
        resourceStore : Ext.create('gantt.store.resourceStore'),
        proxy : {
            method: 'GET',
            type : 'ajax',
            api: {
                read : 'projectmanagement/data/assignmentdata.js'//,
                //create : 'foo.js',
                //update : 'foo.js',
                //destroy : 'foo.js'
            },
            reader : {
                type : 'json',
                root : 'assignments'
            }
        },
        listeners : {
            load : function() {
                this.resourceStore.loadData(this.proxy.reader.jsonData.resources);
            }
        }
});

and my resourceStore is

Ext.define('gantt.store.resourceStore', {
    extend : 'Ext.data.JsonStore',
    model   : 'gantt.model.Resource'    
});

my assignmentData value is

{
    "assignments" : [
        {
            "Id" : 1,
            "TaskId" : 4,
            "ResourceId" : 1,
            "Units" : 100
        },
        {
            "Id" : 2,
            "TaskId" : 4,
            "ResourceId" : 2,
            "Units" : 80
        },
        {
            "Id" : 3,
            "TaskId" : 11,
            "ResourceId" : 5,
            "Units" : 50
        },
        {
            "Id" : 4,
            "TaskId" : 12,
            "ResourceId" : 6,
            "Units" : 50
        }
    ],

    "resources" : [
        {"Id" : 1, "Name" : "Mats" },
        {"Id" : 2, "Name" : "Nickolay" },
        {"Id" : 3, "Name" : "Goran" },
        {"Id" : 4, "Name" : "Dan" },
        {"Id" : 5, "Name" : "Jake" },
        {"Id" : 6, "Name" : "Kim" },
        {"Id" : 7, "Name" : "Bart" }
    ]
}

my resourcePanel code is below

Ext.define('CustomAssignmentCellEditor', {
    extend : "Gnt.widget.AssignmentCellEditor",

    show: function(){
        console.log('SHOW ', this.resourceStore.getCount());

        this.callParent(arguments);
    }
});

Ext.define('gantt.view.resourcemgt.resourcePanel',{
    extend: 'Gnt.panel.Gantt',
    alias: 'widget.resourcepanel',

    requires: [
        'Gnt.panel.Gantt',
        'Sch.plugin.TreeCellEditing',
        'Gnt.column.PercentDone',
        'Gnt.column.StartDate',
        'Gnt.column.EndDate',
        'Gnt.widget.AssignmentCellEditor',
        'Gnt.column.ResourceAssignment',
        'Gnt.model.Assignment'
    ],

    height : 400,
    width: 1000,
    multiSelect : true,
    highlightWeekends : true,
    showTodayLine : true,
    loadMask : true,
    enableDependencyDragDrop : false,
    snapToIncrement : true,

    startDate : new Date(2010,0,11), 
    endDate : Sch.util.Date.add(new Date(2010,0,11), Sch.util.Date.WEEK, 20), 
    viewPreset : 'weekAndDayLetter',

        // Object with editor and dataIndex defined
        leftLabelField : {
        dataIndex : 'Name',
        editor : { xtype : 'textfield' }
    },

    // ... or an object with editor and renderer defined
    rightLabelField : {
        dataIndex : 'Id',
        renderer : function(value, record) {
        return 'Id: #' + value;
    }
    },


    initComponent: function() {
        var me = this;
        var resourceStore = Ext.create('gantt.store.resourceStore');
        var assignmentStore = Ext.create('gantt.store.assignmentStore');
        var taskStore = Ext.create('gantt.store.taskStore');

         var assignmentEditor = Ext.create('CustomAssignmentCellEditor', {
                assignmentStore : assignmentStore,
                resourceStore : resourceStore
            });

        Ext.apply(me, {
                resourceStore : resourceStore,
                assignmentStore : assignmentStore,
                taskStore : taskStore,
                stripeRows : true,

                plugins: [
                            Ext.create('Sch.plugin.TreeCellEditing', { 
                                 clicksToEdit: 1
                             })
                          ],

            eventRenderer : function(task) {
                if (assignmentStore.findExact('TaskId', task.data.Id) >= 0) {
                    // This task has resources assigned, show a little icon
                    return {
                        ctcls : 'resources-assigned'
                    };
                }
            },

         // Setup your static columns
            columns : [
                {
                    xtype : 'treecolumn',
                    header : 'Tasks', 
                    dataIndex : 'Name', 
                    width:250
                },
                {
                    header : 'Assigned Resources', 
                    width:150, 
                    editor : assignmentEditor,
                    xtype : 'resourceassigmentcolumn'
                }
            ],

            tbar : [
                    {
                        text : 'Indent',
                        iconCls : 'indent',
                        handler : function() {
                            var sm = g.lockedGrid.getSelectionModel();
                            sm.selected.each(function(t) {
                                t.indent();
                            });
                        }
                    },
                    {
                        text : 'Outdent',
                        iconCls : 'outdent',
                        handler : function() {
                            var sm = g.lockedGrid.getSelectionModel();
                            sm.selected.each(function(t) {
                                t.outdent();
                            });
                        }
                    }
                ]
        });

        me.callParent(arguments);

    }
});

my Resource model is

Ext.define('gantt.model.Resource', {
    extend : 'Gnt.model.Resource'
});

Actually in my application I am having the grid which displays all the data from AssignmentStore and grid had one column with selection drop down, whose data comes from the ResourceStore.

So I did work with the previous code, but the ResourceStore is not loading so my drop down selection box shows me empty drop down.

Please suggest me some solution I can try to solve it out.

can you provide a data sample for this: this.proxy.reader.jsonData.resources and what the Resource model looks like> — dbrin
Can you add also grid code? It would be easier. Try also to load data in datachange handler instead of load. — Krzysztof
@Lolo I had updated my question add the grid code containing resourcePanel Please help me to find out what here I am doing wrong and solve it as soon as possible. — Yogendra Singh
If you add trace for this inside you load handler: this.proxy.reader.jsonData.resources - what do you get? — sha

dbrin dbrin · Accepted Answer · 2012-03-11T06:38:04

Here is your 2nd store loaded with data from the first store load event, which answers the question you asked: http://jsfiddle.net/dbrin/bQvyg/5/embedded/result/

What's happening with your combobox is not clear to me. You need to break down your code into smaller piece so you can understand whats happening. Your model objects extend other model objects so I cant tell anything about them. Same goes to the panels - they extend custom components not part of ExtJS. You should really be asking Bryntum for advice. I assume it's their scheduler you are trying to extend.

store listener not able to load another store extjs 4

1 Answers