zoukankan      html  css  js  c++  java
  • Extjs 4 学习日志

    一。开始研究EXTJS4,实现要测试STORE和服务器连接问题。

    1.如何解决STORE/MODEL/PROXY等的关系

    Data package overview

    EXTJS3的时候,所有的设置都走STORE,并且提供了JSONSTORE,EXTJS4并不提供这个功能。需要自己写。

    EXTJS4引入了MODEL控件,各组件的功能发生了变化,

    STORE只负责解决数据集的操作,客户层的业务逻辑交给MODEL,而PROXY负责读和写,PROXY可以在STORE中定义也可以在MODEL中定义。

    比如:

        Ext.define('xt_czrz', {
            extend: 'Ext.data.Model'
                ,
            idProperty: 'CZRZID',

    //这里定义PROXY
            proxy: {
                type: 'ajax',
    //            actionMethods: { read: 'POST'},
                api:{
                    read: _path + '/xt_czrz_query.action?act=query',
                    create : _path + '/xt_czrz_query.action?act=insert',
                    update: _path + '/xt_czrz_query.action?act=update',
                    destroy: _path + '/xt_czrz_query.action?act=delete'
                },
                reader: {
    //                actionMethods: { read: 'POST' },
                    type: 'json',
                    root: 'root', //这个ROOT的设置还是需要的,可能是EXTJS的BUG,用METADATA设置的ROOT,对修改没有用处
                    totalProperty: 'totalProperty',
                    successProperty: 'success'
                },
                writer:{
                    encode: true,
                    root: 'root'
                }
            },
            fields: [
                         {name: 'CZRZID',  type: 'int', mapping: 'CZRZID'},
                    {name: 'BM',  type: 'string'},
                    {name: 'YWZJ',   type: 'int'},
                    {name: 'CSLX', type: 'string'},
                    {name: 'CZRID', type: 'int'//},
    //                {name:'a',
    //                    convert: function(value, record) {
    //                        return 121;
    //                }
                    }
                ]
        });
        var myStore = new Ext.data.Store({
            model: 'xt_czrz'

    //也可以在这里定义
    //        proxy: {
    //            type: 'ajax',
    ////            actionMethods: { read: 'POST'},
    //            api:{
    //                read: _path + '/xt_czrz_query.action?act=query',
    //                create : _path + '/xt_czrz_query.action?act=insert',
    //                update: _path + '/xt_czrz_query.action?act=update',
    //                destroy: _path + '/xt_czrz_query.action?act=delete'
    //            },
    //            reader: {
    ////                actionMethods: { read: 'POST' },
    //                type: 'json',
    //                root: 'root', //这个ROOT的设置还是需要的,可能是EXTJS的BUG,用METADATA设置的ROOT,对修改没有用处
    //                totalProperty: 'totalProperty',
    //                successProperty: 'success'
    //            },
    //            writer:{
    //                encode: true,
    //                root: 'root'
    //                   
    //            }
    //        }
        });

    ----------------------------------------------------------------------------------------

    2.如何解决POST/GET的问题

    EXTJS3的时候用JSONSTORE,默认和客户段的交互采用POST方式,而EXTJS4默认用GET.研究后发现,EXTJS4的RPOXY的READ和WRITE提供了actionMethods属性。

    actionMethods可以配置

    Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions and 'POST' for 'create', 'update' and 'destroy' actions. The Ext.data.proxy.Rest maps these to the correct RESTful methods.

    也就是说EXTJS4 默认read用GET,其他用POST。

    -----------------------------------------------------------------------------------

    3.如何解决FIELDS

    EXTJS3的时候FIELD信息在STORE中定义,使用METADATA在返回结果集的时候带FIELD和ID信息,就可以装载到STORE中,并且正常使用。

    EXTJS4不支持METADATA属性,FIELD可以在MODEL中定义,也可以在STORE中定义。

    如果在STORE中定义了FIELDS,则STORE可以不定义MODEL。

    查看AbstractStore,发现:

            if (!me.model && me.fields) {
                me.model = Ext.define('Ext.data.Store.ImplicitModel-' + (me.storeId || Ext.id()), {
                    extend: 'Ext.data.Model',
                    fields: me.fields,
                    proxy: me.proxy || me.defaultProxyType
                });

                delete me.fields;

                me.implicitModel = true;
            }
    也就是说,如果STORE中只定义FIELDS而不定义MODEL,其实STORE会自动创建一个MODEL,所以正常情况下还是定义MODEL比较好。
    在不支持METADATA后,只能定义MODEL(不知道还有没有更好的解决办法)
    还有一个很奇怪的问题,如果在MODEL中定义了FIELDS,在返回结果集中也返回METADATA里面增加FIELDS信息,则STORE中增加的DATA也会用METADATA中的FIELDS定义,而不会采用
    MODEL中的定义。目前没找到原因。
     
    通过STORE获取FIELDS:

    var fields = myStore.model.prototype.fields;

    var m = myStore.getAt(0).fields;

    --------------------------------------------------

     
    4.关于查询的参数传递
    EXTJS3提供了很baseParams属性定义查询条件,传递到服务器进行解析。这个方法感觉不是很灵活,但是也够用。
    EXTJS4的STORE不处理交互相关的问题。所以查询条件的定义只能到proxy层来解决。
    server.proxy提供了好多params来解决和服务器交互传递参数问题,比如:
    directionParamextraParamsfilterParamgroupParamlimitParamsortParampageParamstartParam
    如何使用这些参数,需要花时间研究。
    4.1directionParam
    如果simpleSortMode设置为TRUE,然后STORE的remoteSort设置为TRUE,那么在GRID点TITLE的时候,会再发一个QUERY的请求,其中参数会带上SORT相关内容
     
    image 
    递交内容:
    image 
    其中sortParam用于设置参数名,默认是’sort’
     
    4.2filterParamgroupParamlimitParamsortParampageParamstartParam 都与sortParam类似,用于指定参数名而已。
    4.3extraParams
    extraParams是一个OBJECT,可以和以前的baseParams使用。
     
    --------------------------------------------------
    5.关于保存

            var ed = Ext.ModelManager.create({BM: 'a'}, 'xt_czrz');
            myStore.insert(0, ed);
            myStore.sync();

    保存的方法改成了sync;
    另:
    1.MODEL必须指定idProperty,否则所有从服务器读取过来的数据都被当作CREATE而传递到服务器。

    idProperty: 'CZRZID',

    2.和服务器交互的时候,Content-Type默认采用application/json方式递交,这个STRUTS如何接收不是很清楚,所以需要修改。

    proxy增加writer,设置writer的encode和root属性

            proxy: {
                type: 'ajax',
                writer:{
                    encode: true,
                    root: 'root'
                }

     
  • 相关阅读:
    自动登录跳板机->开发机
    关于写代码的一下规范
    vscode 配置 GOPATH
    thinkphp6.0 nginx 配置
    vue-cli 3.x 构建项目,webpack没有了?
    Laravel6.0 使用 Jwt-auth 实现多用户接口认证
    怎么在 localhost 下访问多个 Laravel 项目,通过一个IP访问多个项目(不仅仅是改变端口哦)
    laravel 5.8 实现消息推送
    vs code 设置 保存自动格式化vue代码
    项目开发规范(编码规范、命名规范、安全规范、前端优化、源码提交规范、代码维护规范、产品发布规范)
  • 原文地址:https://www.cnblogs.com/barryhong/p/2163425.html
Copyright © 2011-2022 走看看