Sencha Touch LocalStorage

/**
 * @author Changweihua
 */
Ext.define('UserInfo', {
    extend : 'Ext.data.Model',
    config : {
        fields : ['id', 'age', 'username', 'portrait', 'description'],
        validations : [{
            type : 'format',
            field : 'portrait',
            matcher : /\.(jpg|gif|png|jpeg)+$/,
            message : '请输入有效的图片地址'
        }, {
            type : 'presence',
            field : 'age',
            message : '必须输入用户年龄'
        }, {
            type : 'presence',
            field : 'username',
            message : '请输入用户名'
        }]
    }
});
/**
 *  LocalStorage
 *  对html5中新增的local storage中的数据进行存取
 *  html5中的local storage 采用"键名/键值"的形式存取数据,所以可以在存取数据的时对数据进行序列化和反序列化,但是不能存取复杂的(如JSON格式)数据。
 *  使用方法1:在数据仓库中指定LocalStorage代理及其标识ID
 *      Ext.create('Ext.data.Store', {
 *          proxy:{ type:'localstorage', id:'localstorage1' }
 *      });
 *  使用方法2:直接创建LocalStorage代理并指定其标识ID
 *      Ext.create('Ext.data.proxy.LocalStorageProxy', { id:'localstorage1' });
 *
 *  可以在定义模型的时候直接指定LocalStorage代理,并且直接在local storage中保存模型的实例对象
 *  Ext.define('Search', {
        extend:'Ext.data.Model',
        config:{
            fields:['id', 'query'] 
        },
        proxy:{
            type:'localstorage',
            id:'id'
        }
    });
       
    var search = Ext.create('Search', { query:'Sencha Touch'});
    search.save();
 *
 *  直接使用模型对象的save方法来保存数据,这时数据模型对象使用的数据代理将自动实现模型对象的保存操作
 *
 */
Ext.application({
    name : 'Chapter8',
    launch : function() {
        var userStore = Ext.create('Ext.data.Store', {
            model : 'UserInfo',
            autoLoad:true,
            autoSync:true,
            proxy : {
                type : 'localstorage',
                id:'users'
            },
            listeners:{
                removerecords:function(store, records, indices){
                    console.log('删除记录' + records[0].getId() + ' (索引顺序为' + indices + ')');
                },
                addrecords:function(store, records){
                    console.log('添加记录' + records[0].getId());
                },
                updaterecord:function(store, record, nIndex, oIndex){
                    console.log('更新记录' + record.getId() + ' (索引顺序为' + nIndex + ')');
                },
                load:function(store, records, success){
                    console.log('成功加载记录' + store.getTotalCount() + "-" + records.length + "条");
                },
                beforeload:function(store){
                    console.log('预加载记录');
                }
            }
        });
           
        var userTemplate = new Ext.XTemplate('<tpl for=".">', '<div class="Book_img"><img src="images/{portrait}" /></div>', '<div class="Book_info">', '<h2>姓名:{username}</h2><br /><h3>年龄:{age}</h3>', '<p>{description}</p>', '</div>', '</div>', '</tpl>');
        var editButton = Ext.create('Ext.Button', {
            iconMask : true,
            iconCls : 'compose',
            disabled : true,
            handler : function() {
                if (dataView.getSelectionCount() > 0) {
                    var record = dataView.getSelection()[0];
                    var user = Ext.create('UserInfo', record.data);
                       
                    formPanel.setRecord(user);
                       
                    Ext.Viewport.getLayout().setAnimation({type:'slide', direction:'right'});
                    Ext.Viewport.setActiveItem('formpanel');//传入组件的ID
                } else {
                    Ext.Msg.alert('信息提示', '至少选择一条记录');
                }
            }
        });
        var deleteButton = Ext.create('Ext.Button', {
            iconMask : true,
            iconCls : 'delete',
            disabled : true,
            handler : function() {
                if (dataView.getSelectionCount() > 0) {
                    var record = dataView.getSelection()[0];
                    userStore.remove(record);
                } else {
                    Ext.Msg.alert('信息提示', '至少选择一条记录');
                }
            }
        });
        var bottomToolBar = Ext.create('Ext.Toolbar', {
            id : 'bottomToolBar',
            docked : 'bottom',
            layout : {
                type : 'hbox',
                pack : 'center'
            },
            items : [{
                iconMask:true,
                iconCls:'add',
                handler:function(){
                    var user = Ext.create('UserInfo', {
                        id:-1,
                        username:'',
                        age:18,
                        portrait:'',
                        description:''
                    });
                       
                    formPanel.setRecord(user);
                       
                    Ext.Viewport.getLayout().setAnimation({type:'slide', direction:'right'});
                    Ext.Viewport.setActiveItem('formpanel');//传入组件的ID
                       
                }
            }, editButton, deleteButton]
        });
        var dataView = Ext.create('Ext.DataView', {
            id : 'dataView',
            store : userStore,
            itemTpl : userTemplate,
            emptyText : 'No User Exists',
            baseCls : 'Book',
            listeners : {
                selectionchange : function() {
                    editButton.setDisabled(false);
                    deleteButton.setDisabled(false);
                }
            }
        });
        var dataViewPanel = Ext.create('Ext.Panel', {
            layout : 'fit',
            id : 'dataViewPanel',
            items : [{
                xtype : 'toolbar',
                docked : 'top',
                layout : {
                    type : 'hbox',
                    align : 'start'
                },
                items:[{
                    xtype:'searchfield',
                    flex:'50%',
                    placeHolder:'请输入要搜索的用户名',
                    listeners:{
                        keyup:function(){
                            userStore.clearFilter();
                            var val = this.getValue();
                            if(val != ''){
                                userStore.filter('username', val);
                            }
                            userStore.load();
                        }
                    }
                },{
                    xtype:'selectfield',
                    flex:'50%',
                    options:[{
                        text:'选择排序方式',
                        value:''
                    },{
                        text:'用户名升序',
                        value:'username-asc'
                    },{
                        text:'用户名降序',
                        value:'username-desc'
                    },{
                        text:'年龄升序',
                        value:'age-asc'
                    },{
                        text:'年龄降序',
                        value:'age-desc'
                    }],
                    listeners:{
                        change:function(item, nVal, oVal){
                            switch(nVal){
                                case 'username-asc':
                                    userStore.sort({
                                       property:'username',
                                       direction:'asc'
                                    });
                                    break;
                                case 'username-desc':
                                    userStore.sort({
                                       property:'username',
                                       direction:'desc'
                                    });
                                    break;
                                case 'age-asc':
                                    userStore.sort({
                                       property:'age',
                                       direction:'asc'
                                    });
                                    break;
                                case 'age-desc':
                                    userStore.sort({
                                       property:'age',
                                       direction:'desc'
                                    });
                                    break;
                            }
                            userStore.load();
                        }
                    }
                }]
            }, dataView, bottomToolBar]
        });
           
        var formPanel = Ext.create('Ext.form.FormPanel', {
            id:'formpanel',
            items:[{
                xtype:'toolbar',
                docked:'bottom',
                layout:{
                    type:'hbox',
                    pack:'end'
                },
                items:[{
                    iconMask:true,
                    iconCls:'action',
                    style:'float:right',
                    handler:function(){
                        var user = Ext.create('UserInfo', formPanel.getValues());
                        var errors = user.validate();
                        if(errors.isValid()){
                               
                            if(Ext.ComponentManager.get('id').getValue() == '-1'){
                                if(String(userStore.last()) == "undefined"){
                                    user.setId(1);
                                }else{
                                    user.setId(parseInt(userStore.last().getId()) + 1);
                                }
                                  
                                userStore.add(user);
                                   
                            }else{
                                //formPanel.setRecord(user);
                                userStore.add(user);
                                userStore.add({
                                    id:2,
                                    username:'xxx',
                                    portrait:'xxx.png',
                                    age:20
                                });
                            }
                            userStore.sync();
                            dataView.refresh();
                            Ext.Viewport.getLayout().setAnimation({type:'slide', direction:'left'});
                            Ext.Viewport.setActiveItem(dataViewPanel);
                        }else{
                            var message = "";
                            Ext.each(errors.items, function(u){
                                message += u.getMessage() + "<br />";
                            });
                            Ext.Msg.alert(message);
                        }
                    }
                },{
                    iconMask:true,
                    iconCls:'home',
                    style:'float:right',
                    handler:function(){
                        Ext.Viewport.getLayout().setAnimation({type:'slide', direction:'left'});
                        Ext.Viewport.setActiveItem(dataViewPanel);
                    }
                }]
            },{
                xtype:'fieldset',
                title:'用户信息',
                defaults:{
                    labelWidth:'20%' 
                },
                items:[{
                    xtype:'textfield',
                    name:'username',
                    label:'用户名',
                    maxLength:50,
                    placeHolder:'输入用户名',
                    required:true,
                    clearIcon:true
                },{
                    xtype:'spinnerfield',
                    name:'age',
                    label:'用户年龄',
                    minValue:0,
                    maxValue:30,
                    stepValue:1,
                },{
                    xtype:'textfield',
                    name:'portrait',
                    label:'用户头像',
                    placeHolder:'输入用户头像',
                    required:true,
                    clearIcon:true
                },{
                    xtype:'textareafield',
                    name:'description',
                    label:'用户描述',
                    placeHolder:'输入用户描述',
                    clearIcon:true
                },{
                    xtype:'hiddenfield',
                    name:'id',
                    id:'id'
                }]
            }]
        });
           
        Ext.Viewport.add(dataViewPanel);
        Ext.Viewport.add(formPanel);
    }
});


知识共享许可协议
《Sencha Touch LocalStorage》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     169.07ms