Grid using dwr ajax

最新推荐文章于 2025-11-25 11:27:41 发布

最新推荐文章于 2025-11-25 11:27:41 发布 · 129 阅读

文章标签：

#Ajax #DWR #EXT #json #F#

extjs 专栏收录该内容

26 篇文章

订阅专栏

本文介绍ExtJS中Grid组件的两种分页与数据加载方法：一是直接修改Store的load方法；二是使用Ext.ux.data.DWRProxy进行数据加载，并提供具体的实现代码。

Grid 应该是任何一个标准库的重中之重，extjs 表格采用 mvc 结构，就先不细说了，而他的 bbar 分页，换页的方式并没有文档详细记载，当然是关于 ajax 的方式，经过试验应该有两种方式，以采用 dwr 为例

1。直接修改store 的 load 方法：（看 simplestore 的源码）

store.load = function (hoptions) {
    var params = hoptions.params;
    function showJobInside(arrayJobs) {
        Ext.MessageBox.hide();
        var html = "";
        if (arrayJobs == null || arrayJobs == undefined || arrayJobs.list == null || arrayJobs.list == undefined) {
            arrayJobs = {};
            arrayJobs.list = new Array();
            arrayJobs.total = 0;
        }
        var ddata = new Array();
        for (var i = 0; i < arrayJobs.list.length;
        i++) {
            var tob = arrayJobs.list[i];
            var tmpJobtitle = filterNull(getLabel(theJobCategories, filterNull(tob.jobTitle)));
            ddata.push([
            tob.employerId, filterNull(tob.employerName), tob.jobId, tmpJobtitle, tob.desiredCount, filterNull(tob.enterTime.toLocaleString()), filterNull(getLabel(theExperienceMap, filterNull(tob.requiredExperience))), tob.jobDesc]);
        }
        var o = store.reader.readRecords(ddata);
        o.totalRecords = arrayJobs.total;
        window.store.loadRecords(o, hoptions, true);
    }
    Ext.MessageBox.wait('数据加载中 ...', '招聘求职');
    JobSearcher.searchJobs($F('jobDay'), $F('jobAddress'), $F('jobCategory'), $F('jobType'), $F('industry'), getJobTitle(), getEmployName(), params['start'], params['limit'], {
        callback: showJobInside,
        timeout: TIMEOUT,
        errorHandler: function (message) {
            Ext.MessageBox.hide();
            alert("Error: " + message);
        }
    });
}

关键：

 var o = store.reader.readRecords(ddata);
 o.totalRecords = arrayJobs.total;
 window.store.loadRecords(o, hoptions, true);

代码结构不好。。。。

2. 采用 Ext.ux.data.DWRProxy.js

javascript :

 var py = window.store = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        id: 'employerIdStore',
        totalProperty: 'totalCount',
        root: 'rows',
        fields: [{
            name: 'employerId'
        },
        {
            name: 'employerName'
        },
        {
            name: 'jobId'
        },
        {
            name: 'jobTitle'
        },
        {
            name: 'desiredCount'
        },
        {
            name: 'enterTime'
        },
        {
            name: 'requiredExperience'
        },
        {
            name: 'jobDesc'
        },
        {
            name: 'agencyProvide'
        }]
    }),
    proxy: new Ext.ux.data.DWRProxy({
        dwrFunction: JobSearcher.loadSearchJob,
        // dwrFunction : Grid.loadData,
        listeners: {
            'beforeload': function (dataProxy, params) {
                var condition = {
                    'jobDay': $F('jobDay'),
                    'jobAddress': $F('jobAddress'),
                    'jobCategory': $F('jobCategory'),
                    'jobType': $F('jobType'),
                    'industry': $F('industry'),
                    'jobTitle': getJobTitle(),
                    'employName': getEmployName()
                };
                var p = Ext.apply({},
                condition, params);
                params[dataProxy.loadArgsKey] = [Ext.encode(p)];
                // alert(Ext.encode(p));
            },
            'loadexception': function (d, m) {
                Ext.Msg.alert('注意', '职位必须选择');
                return;
            }
        }
    })
});

java :

 public static HashMap loadSearchJob(String params) throws Exception {

        JSONObject jsonParams = JSONObject.fromObject(params);

        String issueDay = jsonParams.getString("jobDay");
        String jobTitle = jsonParams.getString("jobTitle");
        String employName = jsonParams.getString("employName");
        String workAddress = jsonParams.getString("jobAddress");
        String jobCategory = jsonParams.getString("jobCategory");
        if(jobCategory.equals("") ){
            throw new Exception("请选择职位。");
        }
        String jobType = jsonParams.getString("jobType");
        String industry = jsonParams.getString("industry");
        int fromNo = jsonParams.getInt("start");
        int maxCount = jsonParams.getInt("limit");
        MhrGetJobsRsp rsp = searchJobs(issueDay, workAddress,
                jobCategory, jobType, industry,
                jobTitle, employName,
                fromNo,
                maxCount);

        int total = 0;
        List<JSON> list = new ArrayList<JSON>();
        if (rsp.getList() != null) {
            for (int i = 0; i < rsp.getList().length; i++) {
                JSON json = JSONSerializer.toJSON(rsp.getList()[i]);
                list.add(json);
            }

            total = rsp.getTotal();
        } else {

        }
        HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("totalCount", total);
        map.put("rows", list);

        // String str = JSONSerializer.toJSON(map).toString();
        return map;
    }

我第一次看了 n 多源代码，因为不想介入ext的网络传输，结果搞出了第一种方法，痛苦啊，后来在网上看到了 proxy，才想起 ext store 是可以设proxy的，当时以为 proxy 很难写，不过看了牛人写的确实不简单，附件我上传了，大家看看。