本文是学习记事本项目完成所有代码的完结篇
在之前3的基础上，本文实现
<!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>/**
* 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
]);
}
});
/* 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‘
}
}
});
/**
* 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>‘
}
});/**
* 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);
}
});/**
* 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.‘
}]
}
});/**
* 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://blog.csdn.net/yanwushu/article/category/1235170
sencha touch2.3.1入门学习(4),布布扣,bubuko.com
原文：http://blog.csdn.net/xizai2012/article/details/20590631