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

Posted 2023-03-31

【中文标题】从服务器端加载数据到 ExtJs Grid

【英文标题】：Load data from server side into ExtJs Grid

【发布时间】：2015-02-24 13:16:38

【问题描述】：

//****************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 (Not Found) localhost:8080/extjs/app/view/...

[E] [Ext.Loader] 一些请求的文件加载失败。 ext-all-rtl-debug.js?_dc=1424789229907:5600

未捕获的错误：[Ext.Loader] 某些请求的文件无法加载。 ext-all-rtl-debug.js?_dc=1424789229907:1603

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

【问题讨论】：

我们如何知道什么工作或不工作或抛出什么错误？由您来提供对您的问题的正确解释

加载资源失败：服务器响应状态为404（未找到）localhost:8080/extjs/app/view/…

[E] [Ext.Loader] 一些请求的文件无法加载。 ext-all-rtl-debug.js?_dc=1424789229907:5600

未捕获错误：[Ext.Loader] 某些请求的文件无法加载。 ext-all-rtl-debug.js?_dc=1424789229907:1603

不要将一堆更新转储到 cmets 中，更新问题本身。你显然有一个路径问题，甚至与显示的代码无关

【参考方案1】：

您想在您的商店中加载 json 文件吗？通过这个地址？ “本地主机：8080/extjs/app/view/OpenQuoteComp.js” 您的控制器方法 OpenQuoteComp 必须返回 JsonResult... 而不是 json 文件...

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