ExtJS 4代理存储不会消耗传递的数据

时间:2013-03-21 08:46:22

标签: rest extjs store extjs4.1

我有两个网格,每个网格都有一个自己的代理商店。每个商店都使用以下定义绑定到同一模型:

Ext.define('Issue', {
    extend: 'Ext.data.Model',
    fields : [{
        name : 'updated_on',
        type : 'string'
    }, {
        name : 'done_ratio',
        type : 'int'
    }, {
        name : 'start_date',
        type : 'string'
    }, {
        name : 'subject',
        type : 'string'
    }, {
        name : 'due_date',
        type : 'string'
    }, {
        name : 'created_on',
        type : 'string'
    }, {
        name : 'description',
        type : 'string'
    }, {
        name : 'id',
        type : 'int'
    }, {
        name : 'assigned_to',
        mapping: 'assigned_to.name'
    }, {
        name: 'parked',
        mapping: 'custom_fields[9].value',
        type: 'boolean'
    }]
});

存储其网格和相关容器按钮等是在函数中创建的。这两个函数看起来像:

var createMyPanel = function() {
        var store = new Ext.data.Store({
            /*sorters: ['gemeinde','assigned_to'],
            groupField: 'gemeinde',*///comment in when want enable grouping
            model : 'Issue',
            autoLoad: true,
            autoSync: true,
            proxy : {
                type : 'rest',
                url : '/issues.json',
                reader : {
                    type : 'json',
                    root : 'issues'
                },
                extraParams : runtime.CView.Model.getParams('my')
            }
        });
        var groupingFeature = new Ext.grid.feature.Grouping({
            groupHeaderTpl: 'Gemeinde: {name} ({rows.length})'
        });
        var searching = new Ext.ux.grid.feature.Searching({
            minChars: 3,
            mode: 'local',
            searchText: 'Suche einschränken',
            selectAllText: 'Alle Felder (ab)wählen',
            searchTip: '',
            minCharsTipText: 'Bitte mindestens 3 Zeichen eingeben...',
            width: 200
        });
        var commentBtn = new Ext.Button({
            text: 'Kommentar zum gewählten Ticket erfassen',
            disabled: true,
            ticket: null,
            margin: 5
        });
        var toGfBtn = new Ext.Button({
            text: 'an GIS-Fachstelle melden',
            disabled: true,
            ticket:null,
            margin: 5
        });
        var abbruchBtn = new Ext.Button({
            text: 'als abgebrochen melden',
            disabled: true,
            ticket:null,
            margin: 5
        });
        var parkBtn = new Ext.Button({
            text: 'Ticket zurücklegen',
            disabled: true,
            ticket:null,
            margin: 5
        });
        var journalPanel = new Ext.Panel({
            title: 'Kommentare',
            html:'',
            border: false,
            autoScroll: true,
            flex: 30,
            padding: '5 5 5 5'
        });
        var buttonPanel = new Ext.Panel({
            padding: '30 30 10 30',
            border: false,
            flex: 20,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items:[toGfBtn, commentBtn, abbruchBtn, parkBtn]
        });
        var contentPanel = new Ext.Panel({
            title : 'Beschreibung',
            border: false,
            html:'',
            flex: 50,
            padding: '5 5 5 5'
        });
        var southPanel = new Ext.Panel({
            padding: '0 0 5 0',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            flex: 30,
            items:[contentPanel, journalPanel, buttonPanel]
        });

        var grid = new Ext.grid.Panel({
            store : store,
            autoScroll : true,
            flex: 70,
            columns : [{
                        text : 'Ticket-Nummer',
                        width : 100,
                        sortable : true,
                        dataIndex : 'id',
                        menuDisabled : true
                    }, {
                        text : 'Abgabe-Datum',
                        sortable : true,
                        width : 100,
                        dataIndex : 'due_date',
                        menuDisabled : true
                    }, {
                        header : 'Thema',
                        width : 200,
                        sortable : true,
                        dataIndex : 'subject',
                        renderer : function(val) {
                            return '<div style="white-space:normal !important;">'
                                    + val + '</div>';
                        },
                        menuDisabled : true
                    }, {
                        header : 'Gemeinde',
                        width : 200,
                        sortable : true,
                        dataIndex : 'gemeinde',
                        menuDisabled : true

                    }, {
                        header : 'Parzelle',
                        width : 200,
                        sortable : true,
                        dataIndex : 'parzelle',
                        menuDisabled : true

                    }, {
                        header : 'zurückgelegt',
                        width : 200,
                        sortable : true,
                        dataIndex : 'parked',
                        menuDisabled : true,
                        renderer : function(val) {
                            if(val){
                                return 'Ja';
                            }else{
                                return 'Nein';
                            }
                        },
                    },{
                        header: 'Beschreibung',
                        dataIndex: 'description',
                        hidden: true,
                        menuDisabled : true
                    }],
            bbar: ['->'],
            features: [searching/*, groupingFeature*/],//comment this in when want to group
            selModel: new Ext.selection.RowModel()
        });

        var myPanel = new Ext.Panel({
            title: 'Meine Fälle',
            padding: '0 5 0 5',
            bl_id:'my',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items : [grid, southPanel]
        });
        return {
            that : myPanel,
            contentPanel: contentPanel,
            grid: grid,
            store: store,
            toGfBtn:toGfBtn,
            journalPanel:journalPanel,
            commentBtn:commentBtn,
            southPanel:southPanel,
            abbruchBtn:abbruchBtn,
            parkBtn:parkBtn
        }
    };

var createAllPanel = function() {
    var store = new Ext.data.Store({
        /*sorters: ['gemeinde','assigned_to'],
        groupField: 'gemeinde',*///comment in when want enable grouping
        model : 'Issue',
        autoLoad: true,
        autoSync: true,
        proxy : {
            type : 'rest',
            url : '/issues.json',
            reader : {
                type : 'json',
                root : 'issues'
            },
            extraParams : runtime.CView.Model.getParams('all')
        }
    });
    var groupingFeature = new Ext.grid.feature.Grouping({
        groupHeaderTpl: 'Gemeinde: {name} ({rows.length})'
    });
    var searching = new Ext.ux.grid.feature.Searching({
        minChars: 3,
        mode: 'local',
        searchText: 'Suche einschränken',
        selectAllText: 'Alle Felder (ab)wählen',
        searchTip: '',
        minCharsTipText: 'Bitte mindestens 3 Zeichen eingeben...',
        width: 200
    });
    var commentBtn = new Ext.Button({
        text: 'Kommentar zum gewählten Ticket erfassen',
        disabled: true,
        ticket: null,
        margin: 5
    });
    var toGfBtn = new Ext.Button({
        text: 'an GIS-Fachstelle melden',
        disabled: true,
        ticket:null,
        margin: 5
    });
    var abbruchBtn = new Ext.Button({
        text: 'als abgebrochen melden',
        disabled: true,
        ticket:null,
        margin: 5
    });
    var parkBtn = new Ext.Button({
        text: 'Ticket zurücklegen',
        disabled: true,
        ticket:null,
        margin: 5
    });
    var journalPanel = new Ext.Panel({
        title: 'Kommentare',
        html:'',
        border: false,
        autoScroll: true,
        flex: 30,
        padding: '5 5 5 5'
    });
    var buttonPanel = new Ext.Panel({
        padding: '30 30 10 30',
        border: false,
        flex: 20,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items:[toGfBtn, commentBtn, abbruchBtn, parkBtn]
    });
    var contentPanel = new Ext.Panel({
        title : 'Beschreibung',
        border: false,
        html:'',
        flex: 50,
        padding: '5 5 5 5'
    });
    var southPanel = new Ext.Panel({
        padding: '0 0 5 0',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        flex: 30,
        items:[contentPanel, journalPanel, buttonPanel]
    });

    var grid = new Ext.grid.Panel({
        store : store,
        autoScroll : true,
        flex: 70,
        columns : [{
                    text : 'Ticket-Nummer',
                    width : 100,
                    sortable : true,
                    dataIndex : 'id',
                    menuDisabled : true
                }, {
                    text : 'Abgabe-Datum',
                    sortable : true,
                    width : 100,
                    dataIndex : 'due_date',
                    menuDisabled : true
                }, {
                    header : 'Thema',
                    width : 200,
                    sortable : true,
                    dataIndex : 'subject',
                    renderer : function(val) {
                        return '<div style="white-space:normal !important;">'
                                + val + '</div>';
                    },
                    menuDisabled : true
                }, {
                    header : 'Gemeinde',
                    width : 200,
                    sortable : true,
                    dataIndex : 'gemeinde',
                    menuDisabled : true

                }, {
                    header : 'Parzelle',
                    width : 200,
                    sortable : true,
                    dataIndex : 'parzelle',
                    menuDisabled : true

                }, {
                    header : 'zugewiesen an',
                    width : 200,
                    sortable : true,
                    dataIndex : 'assigned_to',
                    menuDisabled : true
                }, {
                    header : 'zurückgelegt',
                    width : 200,
                    sortable : true,
                    dataIndex : 'parked',
                    menuDisabled : true,
                    renderer : function(val) {
                        if(val){
                            return 'Ja';
                        }else{
                            return 'Nein';
                        }
                    },
                },{
                    header: 'Beschreibung',
                    dataIndex: 'description',
                    hidden: true,
                    menuDisabled : true
                }],
        bbar: ['->'],
        features: [searching/*, groupingFeature*/],//comment this in when want to group
        selModel: new Ext.selection.RowModel()
    });

    var allPanel = new Ext.Panel({
        title: 'Alle Fälle',
        padding: '0 5 0 5',
        bl_id:'all',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items : [grid, southPanel]
    });
    return {
        that : allPanel,
        contentPanel: contentPanel,
        grid: grid,
        store: store,
        toGfBtn:toGfBtn,
        journalPanel:journalPanel,
        commentBtn:commentBtn,
        southPanel:southPanel,
        abbruchBtn:abbruchBtn,
        parkBtn:parkBtn
    }
};

正如你所看到的那样,2个面板的男性气质相同。当我加载页面时,请求自动启动,导致商店将自动加载设置为true。现在,第一个商店非常好地加载数据。一切都很好,工作得像预期。随你。第二家商店没有。我通过firebug跟踪了下面的内容:

  • 商店已创建
  • 商店正确绑定到代理
  • 称为加载函数
  • 数据请求已完成
  • 数据看起来非常像它应该
  • 我可以通过firebug检查答案对象

只有对象(在浏览器中)才会在商店中“加载”。商店数据项保持为零。再次重新加载后。我不明白这一点。

值得一提的是:第一家商店有大约50件商品可以容纳第二件商品220件或更多。我试图为代理设置时间。没有帮助。我还试图切换商店。将存储1设置为网格2,反之亦然(它由代理中的额外参数设置引导)。只有物品数量较少的商店才能装好。

有人知道这个问题吗?我好几天都不能得出结论。

1 个答案:

答案 0 :(得分:0)

从Sencha的文档中查看代理配置。

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json-cfg-totalProperty

并且您的json不是有效的json格式,请在json查看器中验证它是否有错误。

编辑:您可以收听数据阅读器抛出的异常:http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-event-exception