Ext4 Ext.data.proxy.Direct directFn示例

  Ext4中proxty为Ext.data.proxy.Direct示例代码,注意ext4.0和ext4.1+的区别,ext4.1+需要配置directCfg/method的getArgs方法,ext4.0不需要。

 

  示例代码,store使用Ext.data.proxy.Direct提供的数据源,然后gridpanel显示数据,ext4.0 directFn示例代码来源于:http://jsfiddle.net/molecule/XhvYe//molecule/XhvYe/,自己参考源代码后增加getArgs配置兼容4.1+版本的ext。

Ext4 Ext.data.proxy.Direct directFn示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext4 Ext.data.proxy.Direct directFn示例</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        var myData = { "data": [
            { "item_code": "ASCM72X36", "quantity": 1 },
            { "item_code": "ASCM72X60", "quantity": 2 },
            { "item_code": "ASCM72X33", "quantity": 3 },
            { "item_code": "ASCM72X44", "quantity": 4 },
            { "item_code": "ASCM72X55", "quantity": 5 },
            { "item_code": "ASCM72X66", "quantity": 6 },
            { "item_code": "ASCM72X77", "quantity": 7}]
        };
        var myDirectfn = function (opts, fn, config) {
            var data = myData.data || myData;
            var start = opts.start,
                end = opts.page * opts.limit,
                result = [];
            if (end > data.length) end = data.length;
            for (var i = start; i < end; i++)
                result.push(data[i]);
            console.log(result);
            result.total = data.length;
            fn(0, {
                status: true,
                result: result
            });
        };
        myDirectfn.directCfg = {
            //4.0不需要配置getArgs方法,但是method:{}配置一定不能少,要不会报错
            //4.1+需要配置获取myDirectfn的参数列表,要不会出错,具体可以参考源代码:src\data\proxy\Direct.js 中的doRequest方法
            //注意getArgs如果扩展了参数列表项目,则myDirectfn参数列表的最后fn,config2个参数之前的形参要和getArgs返回的数组格式一致,要不参数会错乱
            method: { getArgs: function (params, paramOrder, paramsAsHash) { return [params]; } }
        };
        var store = new Ext.data.Store({
            pageSize: 4,
            proxy: {
                type: 'direct',
                directFn: myDirectfn,
                reader: {
                    type: 'json'
                }
            },
            fields: [{ name: 'item_code' }, { name: 'quantity'}]
        });
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
            { id: 'item_code', header: "Item code", width: 160, sortable: true, dataIndex: 'item_code' },
            { header: "quantity", width: 75, sortable: true, dataIndex: 'quantity'}],
            stripeRows: true,
            autoExpandColumn: 'fullName',
            height: 200,
            width: 400,
            title: 'Array Grid',
            bbar: new Ext.PagingToolbar({
                store: store,
                pageSize: 4,
                displayInfo: true,
                disabled: true
            }),
            viewConfig: {
                forceFit: true
            }
        });
        grid.render(Ext.getBody());
        store.on('load', function () {
            grid.down('pagingtoolbar').enable();
        });
        setTimeout(function () { store.load(); }, 1500)
    });
</script>
</head>
<body>
</body>
</html> 

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:Ext4 Ext.data.proxy.Direct directFn示例

评论(0)Web开发网
阅读(847)喜欢(0)extjs开发技巧