Sencha Touch SessionStorage

/**
 * @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 : '请输入用户名'
        }]
    }
});
/*
 *  SessionStorage
 *  对Html5中新增的session storage中的数据进行存取操作
 *  在不支持session storage的浏览器中使用SessionStorage,SessionStorage的构造器将抛出异常
 *  使用方法1:在数据仓库中指定SessionStorage代理及其标识ID
 *      Ext.create('Ext.data.Store', {
 *          proxy:{ type:'sessionstorage', id:'sessionstorage1' }
 *      });
 *  使用方法2:直接创建SessionStorage代理并指定其标识ID
 *      Ext.create('Ext.data.proxy.SessionStorageProxy', { id:'sessionstorage1' })
 *
 */
Ext.application({
    name : 'Chapter8',
    launch : function() {
        var userStore = Ext.create('Ext.data.Store', {
            model : 'UserInfo',
            autoLoad:true,
            autoSync:true,
            data : [{
                id : 1,
                age : 20,
                username : '张三',
                portrait : 'images/zhangsan.png',
                description : '我是张三'
            },{
                id : 2,
                age : 30,
                username : '李四',
                portrait : 'images/lisi.png',
                description : '我是李四'
            }],
            proxy : {
                type : 'sessionstorage',
                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 + ')');
                }
            }
        });
           
        var userTemplate = new Ext.XTemplate('<tpl for=".">', '<div class="Book_img"><img src="{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( + 1);
                                }
                                  
                                userStore.add(user);
                            }else{
                                formPanel.setRecord(user);
                            }
                            userStore.sync();
                            dataView.refresh();
                            Ext.Viewport.getLayout().setAnimation({type:'slide', direction:'left'});
                            Ext.Viewport.setActiveItem(dataViewPanel);
                            console.log(userStore.getCount());
                        }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 SessionStorage》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

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

Tab Content 5

开发技术


开发平台和工具

sitemap     164.12ms