Sencha Touch CRUD

研究草稿，代码随性，记录思路以备用.

1.Sencha Touch List简单数据绑定

View:

Ext.define("lab.view.ListA",{
    extend:"Ext.List",
    alias:"widget.lista",

    config:{

        scrollable: {
            directionLock: true
        },
        itemTpl: "{firstName}--{lastName}",
        store: {
            xclass:"lab.store.Contact"
        }
    }
});

Store:

Ext.define("lab.store.Contact", {
    extend:"Ext.data.Store",
    config: {
        model: "lab.model.Contact",
        data: [//直接把数组作为数据配置项。这些数据会被加工处理，最终形成record数组。
            {firstName: 'Tommy', lastName: 'Maintz'},
            {firstName: 'Ed', lastName: 'Spencer'},
            {firstName: 'Jamie', lastName: 'Avins'},
            {firstName: 'Aaron', lastName: 'Conran'},
            {firstName: 'Dave', lastName: 'Conran'},
            {firstName: 'Michael', lastName: 'Mullany'},
            {firstName: 'Abraham', lastName: 'Elias'},
            {firstName: 'Jay', lastName: 'Robinson'},
            {firstName: 'Tommy', lastName: 'Maintz'},
            {firstName: 'Ed', lastName: 'Spencer'},
            {firstName: 'Jamie', lastName: 'Avins'},
            {firstName: 'Aaron', lastName: 'Conran'},
            {firstName: 'Ape', lastName: 'Evilias'},
            {firstName: 'Dave', lastName: 'Kaneda'}
        ]
    },
    constructor:function(){
        this.callParent();
    }
})
;

2.List Ajax数据绑定,数据类型为xml

Ext.define("lab.view.ListB",{
    extend:"Ext.List",
    alias:"widget.listb",

    config:{

        scrollable: {
            directionLock: true
        },
        itemTpl: "<tpl for='.'>{book_name}--{author}</tpl>",
        store:{
            type:"store",
            autoLoad:true,
            fields:["book_name","author"],
            proxy:{
                type:"ajax",
                url:"http://localhost/data/books.xml",
                reader:{
                    type:"xml",
                    record:'book'
                }
            }
        }

    }
});

xml数据

<books>
    <book>
        <book_name>水浒转</book_name>
        <author>施耐奄</author>
    </book>
    <book>
        <book_name>西游记</book_name>
        <author>吴承恩</author>
    </book>
    <book>
        <book_name>红楼梦</book_name>
        <author>曹雪芹</author>
    </book>
</books>

3.List数据绑定,数据类型为JSON

Ext.define("lab.view.ListC",{
    extend:"Ext.List",
    alias:"widget.listc",

    config:{

        scrollable: {
            directionLock: true
        },
        itemTpl: "<tpl for='.'>{book_name}--{author}</tpl>",
        store:{
            type:"store",
            autoLoad:true,
            fields:["book_name","author"],
            proxy:{
                type:"ajax",
                url:"http://localhost/data/books.json",
                reader:{
                    type:"json",
                    rootProperty:'data'
                }
            }
        }

    }
});

JSON内容

{
    data:[
        {
            book_name:"花千骨",
            author:'xxx1'
        },{
            book_name:'倚天屠龙记',
            author:'xxx2'
        },{
            book_name:'降龙十八掌',
            author:'xxx3'
        }
    ]
}

4.List分页

模型:

Ext.define("lab.model.Notice",{
    extend:"Ext.data.Model",

    config:{
        fields:["bulletinid","title","content","publishdate"],
        idProperty:"bulletinid"
    }
});

视图关键代码:

Ext.define("lab.view.ListD",{
    extend:"Ext.List",
    alias:"widget.listd",

    config:{

        scrollable: {
            directionLock: true
        },
        mode:"MULTI",
        itemTpl: "<tpl for='.'><div><h5>{title}</h5><h5>{content}</h5></div></tpl>",

        store:{
            type:"store",
            autoLoad:false,
            model:"lab.model.Notice",
            //fields:["bulletinid","title","content","publishdate"],
            proxy:{
                type:"ajax",
                //url:"http://xxxxx:81/mobile/bulletin/recently10",
                api:{
                    create  : 'json_new.mvc',
                    read    : 'http://xxxxxx:81/mobile/bulletin/recently10',
                    update  : 'json_update.mvc',
                    destroy : 'json_destroy.mvc'
                },
                url:"json_new.mvc",
                headers:{
                    "Content-Type":"application/x-www-form-urlencoded"
                },
                reader:{
                    type:"json",
                    rootProperty:'data',
                    totalProperty:'total'
                },
                pageParam:'page',
                limitParam:'rows',
                startParam:'start',
                listeners:{
                    exception:function(proxy,response,operation){
                        Ext.Msg.alert("警告",Ext.decode(response.responseText).message);
                        console.log(operation);
                    }
                }
            },
            pageSize:5,
            pageCount:0,
            listeners:[{
                event:"load",
                fn:"onLoad"
            }]
        }
    },
    onLoad:function(store,records,successful,operation){
        if(!successful){
            Ext.Msg.alert("温馨提示",this.getProxy().getReader().rawData.message);
        }else{
            var reader = store.getProxy().getReader();
            var recordCount = reader.rawData[reader.getTotalProperty()];
            var pageSize = store.getPageSize();
            var pageCount = Math.ceil(recordCount/(pageSize+0.0));
            store.config.pageCount=pageCount;
            console.log(Ext.util.Format.format("共{0}条,每页{1}条,当前第{2}/{3}页",recordCount,pageSize,store.currentPage,pageCount));

        }
        this.callParent(arguments);
    },
    initialize:function(){
        var self = this;

        var args = arguments;
        self.callParent(args);
        //首先登录
        Ext.Ajax.request({
            url:"http://xxxxx:81/mobile/login.json",
            params:{
                uname:"xm01",
                pwd:"1234"
            },
            method:"post",
            success: function(response){
                eval("var rs = "+response.responseText);
                if(rs.status==0){
                    self.getStore().getModel().setIdProperty("bulletinid");
                    self.getStore().load();

                }
            }
        });
    }
});

主视图：

Ext.define('lab.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'lab.view.ListA'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Store 1',
                iconCls: 'home',
                layout: "fit",
                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'List Example inline data'
                }, {
                    xclass: "lab.view.ListA"
                }, {
                    xtype: "toolbar",
                    docked:"bottom",
                    defaults:{
                        flex:1
                    },
                    items: [{
                        xtype: "button",
                        text: "过滤"
                    }, {
                        xtype: "button",
                        text: "取消过滤"
                    }]
                }]

            },
            {
                title: 'Store 2',
                iconCls: 'home',
                layout:'fit',
                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'List Example ajax xml data'
                    }, {
                        xclass: "lab.view.ListB"
                    }
                ]
            },
            {
                title: 'Store 3',
                iconCls: 'home',
                layout:'fit',
                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'List Example ajax json data'
                    }, {
                        xclass: "lab.view.ListC"
                    }
                ]
            },
            {
                title: 'Store 4',
                iconCls: 'home',
                layout:'fit',
                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'List Example ajax pager data'
                    },
                    {
                        xtype:"container",
                        docked: 'top',
                        layout:{
                            type:"hbox",
                            align:"middle"
                        },
                        items:[{
                            xtype:"searchfield",
                            placeHolder:"请输入公告标题",
                            flex:1
                        }]

                    },
                    {
                        xclass: "lab.view.ListD"
                    },
                    {
                        xtype: "toolbar",
                        docked:"bottom",
                        defaults:{
                            flex:1
                        },
                        items: [{
                            xtype: "button",
                            text: "上页"
                        }, {
                            xtype: "button",
                            text: "下页"
                        },{
                            xtype:"button",
                            iconCls:"add"
                        },{
                            xtype:"button",
                            iconCls:"delete"
                        },{
                            xtype:"button",
                            iconCls:"compose"
                        }]
                    }
                ]
            }
        ]
    },
    initialize: function () {
        this.callParent();

    }

});

controller完整代码,涵盖分页、远程过滤、添加、修改、删除:

Ext.define("lab.controller.Main",{
    extend:"Ext.app.Controller",
    config:{
        view:["main","listd"],
        refs:{
            main:"main",
            find_button1:"toolbar button[text='过滤']",
            listd:"listd"
        },
        control:{
            find_button1:{
                tap:"onTapFind_button1"
            },
            "toolbar button[text=取消过滤]":{
                tap:"onTapFind_button2"
            },
            "toolbar button[text=上页]":{
                tap:"onPageUp"
            },
            "toolbar button[text=下页]":{
                tap:"onPageDown"
            },
            "searchfield":{
                change:"onSearchChange"
            },
            "toolbar button[iconCls=delete]":{
                tap:"onDelete"
            },
            "toolbar button[iconCls=add]":{
                tap:"onAdd"
            },
            "toolbar button[iconCls=compose]":{
                tap:"onUpdate"
            }
        }
    },
    onUpdate:function(){
        var listd = Ext.Viewport.down("listd");
        if(listd.getSelectionCount()>0){
            var selection = listd.getSelection();
            try{
                selection[0].dirty=true;
                listd.getStore().sync();
            }finally{
                selection[0].dirty=false;
            }
        }else{
            Ext.Msg.alert("温馨提示","至少选择一个项目");
        }
    },
    onAdd:function(){
        var listd = Ext.Viewport.down("listd");
        var m = Ext.create("lab.model.Notice",
            {"bulletinid":"11111223344",title:"2222",content:"xxxx","publishdate":"11111"}
        );
        listd.getStore().add(m);
        /*
        * phantom : Boolean
         true when the record does not yet exist in a server-side database (see setDirty). Any record which has a real database pk set as its id property is NOT a phantom -- it's real.

         Defaults to: false
        * */

        try{
            m.phantom=true;
            listd.getStore().sync();
        }finally{
            m.phantom=false;
        }

    },
    onDelete:function(){
        var listd = Ext.Viewport.down("listd");
        if(listd.getSelectionCount()>0){


            Ext.Msg.confirm("温馨提示",Ext.util.Format.format("你准备删除选择的{0}条数据吗?",listd.getSelectionCount()),function(){
                if(arguments[0]=="yes"){
                    var selection = listd.getSelection();

                    //下面两种做法:
                    //方法1:
                    //selection[0].erase();

                    //方法2:
                    //delete local record
                    listd.getStore().remove(selection);
                    //syn to server
                    listd.getStore().sync();
                }
            });
        }else{
            Ext.Msg.alert("温馨提示","至少选择一个项目");
        }
    },
    onSearchChange:function(sfeild,val){
        var listd = Ext.Viewport.down("listd");
        if(listd.timeoutId){
            window.clearTimeout(listd.timeoutId);
            delete listd.timeoutId;
        }
        listd.timeoutId=window.setTimeout(function(){
            listd.getStore().setRemoteFilter(true);
            listd.getStore().filter("title",val);
            listd.getStore().loadPage(1);
        },100);
    },
    onTapFind_button1:function(){
        var store = Ext.Viewport.down("lista").getStore();
        var index = store.find("firstName","Dave");
        //Ext.Msg.alert("温馨提示","Dave--"+store.getAt(index).data.lastName,Ext.emptyFn);
        store.filter("firstName","Dave");
    },
    onTapFind_button2:function(){
        var store = Ext.Viewport.down("lista").getStore();
        store.clearFilter();
    },
    onPageUp:function(){
        var listd = Ext.Viewport.down("listd");

        if(listd.getStore().currentPage>1){
            listd.getStore().previousPage({addRecords:false});
        }else{
            Ext.Msg.alert("温馨提示","前面没有了");
        }
    },
    onPageDown:function(){
        var listd = Ext.Viewport.down("listd");
        if(listd.getStore().currentPage<listd.getStore().config.pageCount){
            listd.getStore().nextPage({addRecords:true});
        }else{
            Ext.Msg.alert("温馨提示","后面没有了");
        }

    }
});