zoukankan      html  css  js  c++  java
  • 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',
                 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"}]})
  • 相关阅读:
    变量 常量 Python变量内存管理 赋值方式 注释
    leetcode 两数之和 整数反转 回文数 罗马数字转整数
    计算机基础之编程
    列表,集合,元组,字典
    小练习
    Ansi 与 Unicode 字符串类型的互相转换
    UVALive
    UVA
    UVA 10651 Pebble Solitaire 状态压缩dp
    UVA 825 Walkiing on the safe side
  • 原文地址:https://www.cnblogs.com/cart55free99/p/4530275.html
Copyright © 2011-2022 走看看