Ext Store Proxy Ajax

使用Store ajax的方式来获取数据

    <div id="grid1">    </div>
    <script>
    Ext.onReady(function() {
        var store = new Ext.data.JsonStore({
            storeId: 'myStore',
            // autoLoad: true,//加上这个配置 就无需手动的写store.load()
            proxy: {
                type: 'ajax',
                url: 'getImage.php',
                reader: {
                    type: 'json',
                    root: 'images',

                    //getData的函数最先触发
                    //这里配置过getData就相当于把数据取走了
                    //后面on事件  函数就不能通过records取到数据了 还是可以通过store.getProxy().getReader().rawData去到数据
                    // afterRequest 则根本取不到数据
                    // getData: function(data){
                    //     console.log('getData in reader');
                    //     console.log(data);
                    // }
                }
                // ,
                // afterRequest: function(req, res) {
                //     console.log("After Request!", req.operation.response);
                // }
            },

            //alternatively, a Ext.data.Model name can be given (see Ext.data.Store for an example)
            fields: ['name', 'url', {
                name: 'size',
                type: 'float'
            }, {
                name: 'lastmod',
                type: 'date'
            }]
        });
        store.on({
            'load': function(store, records, success, opts) {
                console.log('on1');
                console.log(success);
                //records 是 []
                console.log(records);
                //PS rawData是一个｛｝
                console.log(store.getProxy().getReader().rawData);
            }
        }, this, {single:true});
        store.on('load', function(store, records, success, eOpts ){
            console.log('on2');
            console.log(success);
            console.log(records);
            console.log(store.getProxy().getReader().rawData);
        });
        //这个就是手动load  只是在store.load()的基础上传入了一个config
        store.load({
            callback: function(records, opts, success) {
                console.log('load');
                console.log(success);
                console.log(records);
            }
        });
        console.log(store);
        var grid = new Ext.grid.Panel({
            renderTo: 'grid1',
            store: store,
            columns: [{
                header:'NAME',
                dataIndex: 'name'
            }, {
                header:'URL',
                dataIndex: 'url'
            }, {
                header: 'SIZE',
                dataIndex:'size'
            }, {
                header: 'LASTMOD',
                dataIndex:'lastmod'
            }]
        })
    });

    </script>

 响应

<?php
echo '{"images":[{"name":"Image one","url":"/GetImage.php?id=1","size":46.5,"lastmod":"2007-11-28T16:00:00.000Z"},{"name":"Image Two","url":"/GetImage.php?id=2","size":43.2,"lastmod":"2007-11-29T16:00:00.000Z"}]}';
?>

 

 

PS 动态添加列

        var fields = ['name', 'url', {
            name: 'size',
            type: 'float'
        }, {
            name: 'lastmod',
            type: 'date'
        }];
        var columns = [{
            header: 'NAME',
            dataIndex: 'name'
        }, {
            header: 'URL',
            dataIndex: 'url'
        }, {
            header: 'SIZE',
            dataIndex: 'size'
        }, {
            header: 'LASTMOD',
            dataIndex: 'lastmod'
        }];
        var store = new Ext.data.JsonStore({
            storeId: 'myStore',
            // autoLoad: true,//加上这个配置 就无需手动的写store.load()
            proxy: {
                type: 'ajax',
                url: 'getImage.php',
                reader: {
                    type: 'json',
                    root: 'images',
                },
                afterRequest: function(req, res) {
                    console.log("After Request!", req.operation.response);
                }
            },
            fields: fields
        });
        var grid = new Ext.grid.Panel({
            renderTo: 'grid1',
            store: store,
            columns: columns
        })
        var column = Ext.create('Ext.grid.column.Column', {
            text: 'New Column',
            dataIndex:'newColumn'
        });
        var field = new Ext.data.Field({
            name:'newColumn'
        });
        fields.push(field);
        grid.getStore().model.setFields(fields);
        grid.getStore().reload();
        grid.headerCt.insert(grid.columns.length, column);
        grid.getView().refresh();

 不过对于Ext4.0.7版本 则没有 setFields 方法

                    newCols.forEach(function(item){
                        fields.push(item.dataIndex);
                        _columns.push({
                            header: item.header,
                            dataIndex: item.dataIndex
                        });
                    });
                    var storeNew = new Ext.data.Store({
                        fields: fields,
                        data: result.data,
                        reader: {
                            root: 'data',
                            totalProperty: 'total'
                        }
                    });
                    grid.reconfigure(storeNew, _columns);
                    grid.setLoading(false);

 使用JsonP的Proxy

    Ext.onReady(function() {

        var columns = [{
            header: '编号',
            dataIndex: 'id'
        }, {
            header: '名称',
            dataIndex: 'name'
        }, {
            header: '描述',
            dataIndex: 'descn'
        }];


        //JsonP有两种实现方式
        var store = new Ext.data.Store({
            proxy: new Ext.data.ScriptTagProxy({
                url: 'http://www.mossle.com/data.json',
                // reader: new Ext.data.JsonReader({
                //     totalProperty: "totalProperty",
                //     root: "root",
                //     id: "id"
                // }),
                // 这两种reader的写法都可以
                reader:{
                    totalProperty: "totalProperty",
                    root: "root",
                    id: "id"
                }
            }),
            fields: [{
                name: 'id'
            }, {
                name: 'name'
            }, {
                name: 'descn'
            }]
        });

        var store = new Ext.data.Store({
            proxy:{
                type:'jsonp',
                url: 'http://www.mossle.com/data.json',
                reader: {
                    totalProperty: "totalProperty",
                    root: "root",
                    id: "id"
                },
                callbackKey: 'callback' //也可以不写  因为默认这个key就是 callback
            },
            fields: [{
                name: 'id'
            }, {
                name: 'name'
            }, {
                name: 'descn'
            }]
        })

        var grid = new Ext.grid.GridPanel({
            renderTo: 'grid',
            width: 350,
            height: 150,
            loadMask: true,
            store: store,
            columns: columns
        });
        store.load();

    });

响应

Ext.data.JsonP.callback1({"id":0,"totalProperty":5,"successProperty":true,"root":[{"id":"1","name":"name1","descn":"descn1"},{"id":"2","name":"name1","descn":"descn1"},{"id":"3","name":"name1","descn":"descn1"},{"id":"4","name":"name1","descn":"descn1"},{"id":"5","name":"name1","descn":"descn1"}]})