将数据从服务器端加载到ExtJs Grid中

时间:2015-02-24 13:16:38

标签: javascript extjs controller grid extjs4

//****************controller********************
Ext.define('Insurance.controller.OpenQuoteController', {
    extend: 'Ext.app.Controller',

    //define the stores
    stores: ['OpenQuote'],
    //define the models
    models: ['ApplicationListData'],
    //define the views
    views: ['OpenQuoteComp'],
    refs: [{
        ref: 'myGrid',
        selector: 'grid'
    }],

    init: function () {
        this.control({

            'viewport > panel': {
                render: this.onPanelRendered
            }

        });
    },

    onPanelRendered: function () {
        //just a console log to show when the panel si rendered
        console.log('The panel was rendered');
    },

    onMtai: function (t) {
        console.log('You typed something!');

        var thisRegEx = new RegExp(t.getValue(), "i");
        var store = this.getOpenQuoteStore();
        var grid = this.getMyGrid();
        store.filterBy(function (rec) {
            for (var i = 0; i < grid.columns.length; i++) {
                // Do not search the fields that are passed in as omit columns
                if (grid.omitColumns) {
                    if (grid.omitColumns.indexOf(grid.columns[i].dataIndex) === -1) {
                        if (thisRegEx.test(rec.get(grid.columns[i].dataIndex))) {
                            if (!grid.filterHidden && grid.columns[i].isHidden()) {
                                continue;
                            } else {
                                return true;
                            }
                            ;

                        }
                        ;

                    }
                    ;

                } else {
                    if (thisRegEx.test(rec.get(grid.columns[i].dataIndex))) {
                        if (!grid.filterHidden && grid.columns[i].isHidden()) {
                            continue;
                        } else {
                            return true;
                        }
                        ;
                    }
                    ;
                }
                ;
            }
            return false;
        });
    }


});
//*******************view**************************
Ext.define('Insurance.view.openquote.OpenQuoteComp', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.OpenQuoteGrid',
    title: 'Diary Record(s):0',
    width: 700,
    xtype: 'openquotecomp',
    defaults: {
        flex: 1
        // layout:'fit'
    },
    initComponent: function () {
        this.columns = [
            {header: 'Client Name', dataIndex: 'clientName'},
            {header: 'Business Manager', dataIndex: 'bmManger'},
            {header: 'Date', dataIndex: 'dealDate', flex: 1},
            {header: 'Reference Number', dataIndex: 'refNumber'},
            {header: 'Vehicle', dataIndex: 'vehicle'},
            {header: 'Agent', dataIndex: 'agent'}

        ];

        this.callParent(arguments);
    }
    //renderTo: Ext.getBody()
});
//***************model*********************
Ext.define('Insurance.model.ApplicationListData', {
    extend: 'Ext.data.Model',
    uses: [],
    fields: [
        {name: 'applicationID', type: 'int'},
        {name: 'firstClientName', type: 'string'},
        {name: 'secondClientName', type: 'string'},
        {name: 'salePerson', type: 'string'},
        {name: 'date', type: 'string'},
        {name: 'ref', type: 'string'},
        {name: 'vehicle', type: 'string'},
        {name: 'businessManager', type: 'string'},
        {name: 'locumName', type: 'string'},
        {name: 'addressLineOneFirstClient', type: 'string'},
        {name: 'addressLineOneSecondClient', type: 'string'},
        {name: 'addressLineTwoFirstClient', type: 'string'},
        {name: 'addressLineTwoSecondClient', type: 'string'},
        {name: 'policyNumber', type: 'string'},
        {name: 'agentName', type: 'string'},
        {name: 'archiveIndicator', type: 'boolean'},
        {name: 'createdByWS', type: 'boolean'}
    ]
});
//***************store****************
Ext.define('Insurance.store.OpenQuote', {
    extend: 'Ext.data.Store',
    model: 'Insurance.model.ApplicationListData',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'QuoteServlet',
        reader: {
            type: 'json',
            totalProperty: 'totalCount',
            root: 'openquote',
            successProperty: 'success'
        }
    }
});

这些是我收到的一些错误:

  

无法加载资源:服务器响应状态为404(未找到)localhost:8080 / extjs / app / view / ...

     

[E] [Ext.Loader]某些请求的文件无法加载。 EXT-全RTL-debug.js _dc = 1424789229907:5600

     

未捕获错误:[Ext.Loader]某些请求的文件无法加载。 EXT-全RTL-debug.js _dc = 1424789229907:1603

任何人都可以帮助解决这些错误

1 个答案:

答案 0 :(得分:0)

您想在商店中加载json文件吗?在这个地址? &#34;本地主机:8080 / ExtJS的/应用/视图/ OpenQuoteComp.js&#34; 你的控制器方法OpenQuoteComp必须返回JsonResult ...而不是json文件...

return Json(new { openquote = "yourDataObject" , totalCount = itemsCount }, JsonRequestBehavior.AllowGet);