在上篇基礎上繼續學習：
1:檔案項目架構：
2: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" target="_blank" rel="external nofollow" >
<link href="resources/css/app.css" target="_blank" rel="external nofollow" 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>
3:app.js
/**
* Created by Chongshi Tan on 14-3-4.
*/
Ext.application( {
name: 'WifiApp',
controllers: ['WifiController'],
models: ['wifi'],
stores: ["wifis"],
views: ['WifiList', 'WifiListContainer'],
launch: function() {
var wifiListContainer = {
xtype: "wifiListContainer"
}
Ext.Viewport.add(wifiListContainer);
}
});
4: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;
}
.x-item-selected .list-item-title
{
color:#ffffff;
}
.x-item-selected .list-item-narrative
{
color:#ffffff;
}
.wifi-list-empty-text
{
padding:10px;
}
5: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("newWifiCommad",this);
},
onWifiListDisclose: function(list, record, target,index, evt,options) {
console.log('ediNoteCommand');
this.fireEvent('editWifiCommand',this,record);
},
config: {
layout:{
type: 'fit'
}
}
});
6: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,
itemTpl: '<pre><div class="list-item-title">{title}</div>'+
'<div class = "list-item-narrative">{narrative}</div></pre>'
}
});
7: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.'
}]
}
});
8.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"
},
data: [{
title: 'wifi 1',
narrative: 'narrative 1'
},{
title: 'wifi 2',
narrative: 'narrative 2'
},{
title: 'wifi 3',
narrative: 'narrative 3'
},{
title: 'wifi 4',
narrative: 'narrative 4'
},{
title: 'wifi 5',
narrative: 'narrative 5'
},{
title: 'wifi 6',
narrative: 'narrative 6'
}],
sorters: [{
property: 'dateCreated',
direction: 'DESC'
}]
});
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"
},
control: {
wifiListContainer: {
newWifiCommand: 'onNewWifiCommad',
editWifiCommand: 'onEditWifiCommand'
}
}
},
onNewWifiCommad: function() {
console.log("onNewWifiCommad");
},
onEditWifiCommand: function() {
console.log("onEditWifiCommand");
}
});
10:效果圖：
感謝這麼好的教程:
向作者緻敬：http://blog.csdn.net/yanwushu/article/category/1235170