sencha touch2.3.1入门学习(4)_sencha-test 2.2.1-83入门-CSDN博客

本文链接：https://blog.csdn.net/xizai2012/article/details/20590631

本文是学习记事本项目完成所有代码的完结篇

在之前3的基础上，本文实现

添加删除功能
点击home回到WifiList视图
修改列表视图来实现日记按日期分组

效果图：

然后添加时间分栏

1：项目文件结构

1：index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>wifiApp</title>
    <link rel="stylesheet" type="text/css" href="touch-2.3/resources/css/sencha-touch.css">
    <link href="resources/css/app.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src = "touch-2.3/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

</body>
</html>

2:app.js

/**
 * Created by Chongshi Tan on 14-3-4.
 */

Ext.application( {
    name: 'WifiApp',
    controllers: ['WifiController'],
    models: ['wifi'],
    stores: ["wifis"],
    views: ['WifiList', 'WifiListContainer', 'WifiEditor'],
    launch: function() {
        var wifiListContainer = {
            xtype: "wifiListContainer"
        };

        var wifiEditor = {
           xtype: 'wifieditor'
        };
        Ext.Viewport.add([
            wifiListContainer,
            wifiEditor
        ]);
    }
});

3:app.css

/* Increase height of list item so title and narrative lines fit */
.x-list .x-list-item .x-list-item-label
{
    min-height: 3.5em!important;
}
/* Move up the disclosure button to account for the list item height increase */
.x-list .x-list-disclosure {
    position: absolute;
    bottom: 0.85em;
    right: 0.44em;
}
.list-item-title
{
    float:left;
    width:100%;
    font-size:90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right:25px;
    line-height:150%;
}
.list-item-narrative
{
    float:left;
    width:95%;
    color:#666666;
    font-size:80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right:25px;
}

.clear-both{
    clear: both;
}
.x-item-selected .list-item-title
{
    color:#ffffff;
}
.x-item-selected .list-item-narrative
{
    color:#ffffff;
}
.wifi-list-empty-text
{
    padding:10px;
}

4:WifiListContainer.js

/**
 * Created by Chonshi Tan on 14-3-4.
 */

Ext.define("WifiApp.view.WifiListContainer", {
    extend: 'Ext.Container',
    alias: 'widget.wifiListContainer',
    requires: ['Ext.Toolbar'],
    initialize: function() {
        this.callParent();
        var newBtn = {
            xtype: 'button',
            text: 'new',
            ui: 'action',
            iconCls: 'add',
            handler: this.onNewButtonTap,
            scope: this
        };
        var topToolBar = {
            xtype: 'toolbar',
            title: '设备',
            docked: 'top',
            items: [
                {
                    xtype: 'spacer'
                },
                newBtn
            ]
        };
        var wifiList = {
            xtype: 'wifilist',
            store: Ext.getStore('wifis'),
            listeners: {
                disclose: {
                    fn: this.onWifiListDisclose, scope: this
                }
            }
        };
        this.add([
            topToolBar,
            wifiList
        ]);
    },
    onNewButtonTap: function() {
        console.log("newWifiCommand");
        this.fireEvent("newWifiCommand",this);
    },
    onWifiListDisclose: function(list, record, target,index, evt,options) {
        console.log('ediNoteCommand');
        this.fireEvent('editWifiCommand',this,record);
    },
    config: {
      layout:{
          type: 'fit'
      }
    }
});

5:WifiList.js

/**
 * Created by Chongshi Tan on 14-3-4.
 */

Ext.define('WifiApp.view.WifiList', {
    extend: 'Ext.dataview.List',
    alias: 'widget.wifilist',
    config: {
        loadingText: 'Loading Notes……',
        emptyText: '<pre><div class="wifi-list-empty-text">'+
            'No List found.></div></pre>',
        onItemDisclosure: true,
        grouped: true,
        itemTpl: '<pre><div class="list-item-title">{title}</div>'+
            '<div class = "list-item-narrative">{narrative}</div><div class = "clear-both"></div></pre>'
    }
});

6:WifiEditor.js

/**
 * Created by Chongshi Tan on 14-3-4.
 */


Ext.define('WifiApp.view.WifiEditor', {
    extend: 'Ext.form.Panel',
    requires: 'Ext.form.FieldSet',
    alias: 'widget.wifieditor',
    config: {
        scrollable: 'vertical'
    },
    initialize: function() {
        this.callParent(arguments);
        var backBtn = {
            xtype: 'button',
            ui: 'back',
            text: 'Home',
            handler: this.onBackButtonTap,
            scope: this
        };
        var saveBtn = {
            xtype: 'button',
            ui: 'action',
            text: 'Save',
            handler: this.onSaveButtonTap,
            scope: this
        };
        var topToolbar = {
            xtype: 'toolbar',
            docked: 'top',
            title: 'Edit Wifi',
            items: [
                backBtn,
                {
                    xtype: 'spacer'
                },
                saveBtn
            ]
        };
        var deleteBtn = {
            xtype: 'button',
            iconCls: 'trash',
            iconMask: true,
            handler: this.onDeleteButtonTap,
            scope: this
        };
        var bottomToolbar = {
            xtype: 'toolbar',
            docked: 'bottom',
            items: [
                deleteBtn
            ]
        };
        var wifiTitleEditor = {
            xtype: 'textfield',
            name: 'title',
            label: 'Title',
            requires: true
        };
        var wifiNarrativeEditor = {
            xtype: 'textareafield',
            name: 'narrative',
            label: 'Narrative'
        };
        this.add([
            topToolbar,
            {   xtype: 'fieldset',
                items: [
                    wifiTitleEditor,
                    wifiNarrativeEditor
                ]
            },
            bottomToolbar
        ]);
    },
    onSaveButtonTap: function() {
        console.log('saveWifiCommand');
        this.fireEvent('saveWifiCommand', this);
    },
    onDeleteButtonTap: function() {
        console.log('deleteWifiCommand');
        this.fireEvent('deleteWifiCommand', this);
    },
    onBackButtonTap: function() {
        console.log('backToHomeCommand');
        this.fireEvent("backToHomeCommand", this);
    }
});

7:wifis.js

/**
 * Created by Chongshi Tan on 14-3-4.
 */


Ext.define('WifiApp.store.wifis', {
    extend: 'Ext.data.Store',
    requires: 'Ext.data.proxy.LocalStorage',
    config: {
        model: "WifiApp.model.wifi",
        proxy: {
            type: 'localstorage',
            id: 'wifi-app-store'
        },
        sorters: [{
            property: 'dateCreated',
            direction: 'DESC'
        }],
        grouper: {
            sortProperty: 'dateCreated',
            direction: 'Desc',
            groupFn: function (record) {
                if(record && record.data.dateCreated) {
                    return record.data.dateCreated.toDateString();
                }else {
                    return '';
                }
            }
        }
    }
});

8:wifi.js

/**
 * Created by Chongshi Tan on 14-3-4.
 */


Ext.define('WifiApp.model.wifi', {
    extend: 'Ext.data.Model',
    config: {
        idProperty: 'id',
        fields: [{
            name: 'id',
            type: 'int'
        },{
            name: 'dateCreated',
            type: 'date',
            dateFormat: 'c'
        },{
            name: 'title',
            type: 'string'
        },{
            name: 'narrative',
            type: 'string'
        }],
        validations: [{
            type: 'presence',
            field: 'id'
        },{
            type: 'presence',
            field: 'dateCreated'
        },{
            type: 'presence',
            field: 'title',
            message: 'Please enter a title for this wifi.'
        }]
    }
});

9:WifiController.js

/**
 * Created by Chongshi Tan on 14-3-4.
 */

Ext.define('WifiApp.controller.WifiController', {
    extend: 'Ext.app.Controller',
    launch: function() {
        this.callParent(arguments);
        Ext.getStore('wifis').load();
        console.log("launch");
    },
    init: function() {
        this.callParent();
        console.info('init');
    },
    config: {
        refs: {
            wifiListContainer: "wifiListContainer",
            wifiEditor: 'wifieditor'
        },
        control: {
            wifiListContainer: {
                newWifiCommand: 'onNewWifiCommad',
                editWifiCommand: 'onEditWifiCommand'
            },
            wifiEditor: {
                saveWifiCommand: 'onSaveWifiCommand',
                deleteWifiCommand: 'onDeleteWifiCommand',
                backToHomeCommand: 'onBackToHomeCommand'
            }
        }
    },
    getRandomInt: function (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    slideLeftTransition: { type: 'slide', direction: 'left' },
    slideRightTransition: { type: 'slide', direction: 'right' },
    activateWifiEditor: function (record) {
        var wifiEditor = this.getWifiEditor();
        wifiEditor.setRecord(record); // load() is deprecated.
        Ext.Viewport.animateActiveItem(wifiEditor, this.slideLeftTransition);
    },
    onNewWifiCommad: function() {
        console.log("onNewWifiCommad");
        var now = new Date();
        var wifiId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();
        var newWifi = Ext.create('WifiApp.model.wifi', {
            id: wifiId,
            dateCreated: now,
            title: '',
            narrative: ''
        });
        this.activateWifiEditor(newWifi);
    },
    onEditWifiCommand: function(list,record) {
        console.log("onEditWifiCommand");
        this.activateWifiEditor(record);
    },
    onSaveWifiCommand: function() {
        console.log("onSaveWifiCommand");
        var wifiEditor = this.getWifiEditor();
        var currentWifi = wifiEditor.getRecord();
        var newValues = wifiEditor.getValues();
        currentWifi.set('title', newValues.title);
        currentWifi.set('narrative', newValues.narrative);
        var errors = currentWifi.validate();
        if(!errors.isValid()) {
            Ext.Msg.alert('wait!', errors.getByField('title')[0].getMessage(), Ext.empty());
            currentWifi.reject();
            return;
        }
        var wifiStore = Ext.getStore('wifis');
        if(null == wifiStore.findRecord('id', currentWifi.data.id)) {
            wifiStore.add(currentWifi);
        }
        wifiStore.sync();
        wifiStore.sort([{
            property: 'dateCreated',
            direction: 'DESC'
        }]);
        this.activateWifiList();
    },
    activateWifiList: function() {
        Ext.Viewport.animateActiveItem(this.getWifiListContainer(), this.slideRightTransition);
    },
    onDeleteWifiCommand: function() {
        console.log('onDeleteWifiCommand');
        var wifiEditor = this.getWifiEditor();
        var currentWifi = wifiEditor.getRecord();
        var wifiStore = Ext.getStore('wifis');
        wifiStore.remove(currentWifi);
        wifiStore.sync();
        this.activateWifiList();
    },
    onBackToHomeCommand: function() {
        console.log('onBackToHomeCommand');
        this.activateWifiList();
    }
});

最终代码下载： http://download.csdn.net/detail/xizai2012/7003045

感谢这么好的教程:

向作者致敬：http://blog.csdn.net/yanwushu/article/category/1235170