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。
<!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示例