sencha touch 通讯录
Sencha touch 手机通讯录
1. 效果如上图（目前支持的浏览器safari和google浏览器chrome）
2. 主要参考：http://mobile.51cto.com/others-278559_2.htm
3. sencha-touch.js下载地址：http://www.sencha.com/products/touch/
4. 想分2步来说，布局，代码
5. 布局：上面2图是2个panel，放在viewport后，就可以随意跳转了
6. 代码
1. 新建一个web项目
2. 新建一个index.htm
3. js/notes.js里的代码
index.htm 代码如下
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title >sencha </ title >
< link href ="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css" rel ="stylesheet" type ="text/css" />
< script src ="http://dev.sencha.com/deploy/touch/sencha-touch-debug.js" type ="text/javascript" ></ script >
< script src ="js/notes.js" type ="text/javascript" ></ script >
</ head >
< body >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title >sencha </ title >
< link href ="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css" rel ="stylesheet" type ="text/css" />
< script src ="http://dev.sencha.com/deploy/touch/sencha-touch-debug.js" type ="text/javascript" ></ script >
< script src ="js/notes.js" type ="text/javascript" ></ script >
</ head >
< body >
</ body >
</ html >
Notes1.js代码：（出现list页面）
var notesApp = new Ext.Application({
name: "NotesApp",
useLoadMask: true,
launch: function() {
Ext.regModel("Note", {
idProperty: "Id",
fields: [
{ name: "Id", type: "int" },
{ name: "Name", type: "string" },
{ name: "Phone", type: "string" },
{ name: "Email", type: "string"}
],
validations: [
{ type: "presence", field: "Id" },
{ type: "presence", field: "Name", message: "Name cannot be empty!" }
]
});
NotesApp.views.NotesStore = Ext.regStore("NotesStore", {
model: "Note",
sorters: { property: "Name", direction: "ASC" },
proxy: { type: "localstorage",id:"note-store-app" },
data:[
{Id:"-1",Name:"xiaoxinmiao",Phone:"15811016818",Email:"[email protected]"}
,{Id:"-1",Name:"huangrong",Phone:"13145207520",Email:"[email protected]"}
]
});
NotesApp.views.notesList = new Ext.List({
id: "notesList",
store: "NotesStore",
emptyText: " < div >note is not cached </ div >", //onItemDisclosure
itemTpl: " < div >{Name} </ div >" + " < div >{Phone} </ div >",
onItemDisclosure: function(record) {
// show detail note
}
});
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: "notesListToolbar",
title: "Contact",
layout: "hbox",
items: [
{ xtype: "spacer" },
{
text: "New", ui: "action", handler: function() {
//add new data
}
}]
});
NotesApp.views.notesListContainer = new Ext.Panel({
id: "notesListContainer",
layout: "fit",
dockedItems: [NotesApp.views.notesListToolbar]
,
items: [NotesApp.views.notesList]
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true, //fullscreen
layout: "card",
cardSwitchAnimation: "slide",
items: [NotesApp.views.notesListContainer
]
});
}
});
name: "NotesApp",
useLoadMask: true,
launch: function() {
Ext.regModel("Note", {
idProperty: "Id",
fields: [
{ name: "Id", type: "int" },
{ name: "Name", type: "string" },
{ name: "Phone", type: "string" },
{ name: "Email", type: "string"}
],
validations: [
{ type: "presence", field: "Id" },
{ type: "presence", field: "Name", message: "Name cannot be empty!" }
]
});
NotesApp.views.NotesStore = Ext.regStore("NotesStore", {
model: "Note",
sorters: { property: "Name", direction: "ASC" },
proxy: { type: "localstorage",id:"note-store-app" },
data:[
{Id:"-1",Name:"xiaoxinmiao",Phone:"15811016818",Email:"[email protected]"}
,{Id:"-1",Name:"huangrong",Phone:"13145207520",Email:"[email protected]"}
]
});
NotesApp.views.notesList = new Ext.List({
id: "notesList",
store: "NotesStore",
emptyText: " < div >note is not cached </ div >", //onItemDisclosure
itemTpl: " < div >{Name} </ div >" + " < div >{Phone} </ div >",
onItemDisclosure: function(record) {
// show detail note
}
});
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: "notesListToolbar",
title: "Contact",
layout: "hbox",
items: [
{ xtype: "spacer" },
{
text: "New", ui: "action", handler: function() {
//add new data
}
}]
});
NotesApp.views.notesListContainer = new Ext.Panel({
id: "notesListContainer",
layout: "fit",
dockedItems: [NotesApp.views.notesListToolbar]
,
items: [NotesApp.views.notesList]
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true, //fullscreen
layout: "card",
cardSwitchAnimation: "slide",
items: [NotesApp.views.notesListContainer
]
});
}
});
代码解释：
1. new Ext.Application应用程序入口
2. NotesApp.views.viewport：应用程序的viewport界面视图，将整个界面布局设置为使用Panel面板 ，并且设置了fullscreen属性为true，
1. new Ext.Application应用程序入口
2. NotesApp.views.viewport：应用程序的viewport界面视图，将整个界面布局设置为使用Panel面板 ，并且设置了fullscreen属性为true，
应用一启动后，首先显示的是NotesApp.views.notesListContainer
3. NotesApp.views.notesListContainer：记事列表页面包括
1. NotesApp.views.notesListToolbar：显示标题和新增按钮
2. NotesApp.views.notesList：显示list数据
4. NotesApp.views.notesList需要指定store，NotesApp.views.NotesStore里面指定了Model（相当于一个实体类），还指定了proxy属性，
3. NotesApp.views.notesListContainer：记事列表页面包括
1. NotesApp.views.notesListToolbar：显示标题和新增按钮
2. NotesApp.views.notesList：显示list数据
4. NotesApp.views.notesList需要指定store，NotesApp.views.NotesStore里面指定了Model（相当于一个实体类），还指定了proxy属性，
使用HTML 5本地存储机制保存用户本地的数据，可以在客户端的浏览器中保存数据
Notes2.js代码：（完成2个页面布局，并且能成功跳转，绿色背景为新增代码）
var notesApp =
new Ext.Application({
name: "NotesApp",
useLoadMask: true,
launch: function() {
Ext.regModel("Note", {
idProperty: "Id",
fields: [
{ name: "Id", type: "int" },
{ name: "Name", type: "string" },
{ name: "Phone", type: "string" },
{ name: "Email", type: "string" }
],
validations: [
{ type: "presence", field: "Id" },
{ type: "presence", field: "Name", message: "Name cannot be empty!" }
]
});
NotesApp.views.NotesStore = Ext.regStore("NotesStore", {
model: "Note",
sorters: { property: "Name", direction: "ASC" },
proxy: { type: "localstorage", id: "note-store-app" },
data: [
{ Id: "-1", Name: "xiaoxinmiao", Phone: "15811016818", Email: "[email protected]" }
, { Id: "-1", Name: "huangrong", Phone: "13145207520", Email: "[email protected]" }
]
});
NotesApp.views.notesList = new Ext.List({
id: "notesList",
store: "NotesStore",
emptyText: "<div>note is not cached</div>", // onItemDisclosure
itemTpl: "<div>{Name}</div>" + "<div>{Phone}</div>",
onItemDisclosure: function(record) {
// show detail note
}
});
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: "notesListToolbar",
title: "Contact",
layout: "hbox",
items: [
{ xtype: "spacer" },
{
text: "New", ui: "action", handler: function() {
// add new data
NotesApp.views.viewport.setActiveItem("noteEditor", { type: "slide", direction: "left" } );
}
}]
});
NotesApp.views.notesListContainer = new Ext.Panel({
id: "notesListContainer",
layout: "fit",
dockedItems: [NotesApp.views.notesListToolbar],
items: [NotesApp.views.notesList]
});
// Add Part(editor page)
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
id: "noteEditorTopToolbar",
title: "Edit Contact",
layout: "hbox",
items: [
{ text: "Home", ui: "back",
handler: function() {
// to home
NotesApp.views.viewport.setActiveItem("notesListContainer", { type: "slide", direction: "right" });
}
},
{ xtype: "spacer" },
{
text: "Save", ui: "action", handler: function() {
// save data
}
}
]
});
NotesApp.views.noteEditorBottomToolbar = new Ext.Toolbar({
id: "noteEditorBottomToolbar",
dock: "bottom",
layout: "hbox",
items: [
{ xtype: "spacer" },
{ iconCls: "trash", iconMask: true, handler: function() {
// delete data
}
}
]
});
NotesApp.views.noteEditor = new Ext.form.FormPanel({
id: "noteEditor",
items: [
{ xtype: "textfield", name: "Name", label: "Name", required: true },
{ xtype: "textfield", name: "Phone", label: "Phone" },
{ xtype: "textfield", name: "Email", label: "Email" }
],
dockedItems: [NotesApp.views.noteEditorTopToolbar, NotesApp.views.noteEditorBottomToolbar]
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true, // fullscreen
layout: "card",
cardSwitchAnimation: "slide",
items: [NotesApp.views.notesListContainer,
NotesApp.views.noteEditor
]
});
}
});
name: "NotesApp",
useLoadMask: true,
launch: function() {
Ext.regModel("Note", {
idProperty: "Id",
fields: [
{ name: "Id", type: "int" },
{ name: "Name", type: "string" },
{ name: "Phone", type: "string" },
{ name: "Email", type: "string" }
],
validations: [
{ type: "presence", field: "Id" },
{ type: "presence", field: "Name", message: "Name cannot be empty!" }
]
});
NotesApp.views.NotesStore = Ext.regStore("NotesStore", {
model: "Note",
sorters: { property: "Name", direction: "ASC" },
proxy: { type: "localstorage", id: "note-store-app" },
data: [
{ Id: "-1", Name: "xiaoxinmiao", Phone: "15811016818", Email: "[email protected]" }
, { Id: "-1", Name: "huangrong", Phone: "13145207520", Email: "[email protected]" }
]
});
NotesApp.views.notesList = new Ext.List({
id: "notesList",
store: "NotesStore",
emptyText: "<div>note is not cached</div>", // onItemDisclosure
itemTpl: "<div>{Name}</div>" + "<div>{Phone}</div>",
onItemDisclosure: function(record) {
// show detail note
}
});
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: "notesListToolbar",
title: "Contact",
layout: "hbox",
items: [
{ xtype: "spacer" },
{
text: "New", ui: "action", handler: function() {
// add new data
NotesApp.views.viewport.setActiveItem("noteEditor", { type: "slide", direction: "left" } );
}
}]
});
NotesApp.views.notesListContainer = new Ext.Panel({
id: "notesListContainer",
layout: "fit",
dockedItems: [NotesApp.views.notesListToolbar],
items: [NotesApp.views.notesList]
});
// Add Part(editor page)
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
id: "noteEditorTopToolbar",
title: "Edit Contact",
layout: "hbox",
items: [
{ text: "Home", ui: "back",
handler: function() {
// to home
NotesApp.views.viewport.setActiveItem("notesListContainer", { type: "slide", direction: "right" });
}
},
{ xtype: "spacer" },
{
text: "Save", ui: "action", handler: function() {
// save data
}
}
]
});
NotesApp.views.noteEditorBottomToolbar = new Ext.Toolbar({
id: "noteEditorBottomToolbar",
dock: "bottom",
layout: "hbox",
items: [
{ xtype: "spacer" },
{ iconCls: "trash", iconMask: true, handler: function() {
// delete data
}
}
]
});
NotesApp.views.noteEditor = new Ext.form.FormPanel({
id: "noteEditor",
items: [
{ xtype: "textfield", name: "Name", label: "Name", required: true },
{ xtype: "textfield", name: "Phone", label: "Phone" },
{ xtype: "textfield", name: "Email", label: "Email" }
],
dockedItems: [NotesApp.views.noteEditorTopToolbar, NotesApp.views.noteEditorBottomToolbar]
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true, // fullscreen
layout: "card",
cardSwitchAnimation: "slide",
items: [NotesApp.views.notesListContainer,
NotesApp.views.noteEditor
]
});
}
});
代码解释：
1. new Ext.form.FormPanel因为有文本框，并且需要提交数据，所以用了FormPanel
2. NotesApp.views.viewport.setActiveItem实现跳转功能
3. iconCls属性指定了使用默认的垃圾站图标，iconMask则指定了图标是在按钮中
Notes3.js代码：（完成各个按钮功能，new，save，delete，绿色背景为新增代码）
View Code
var notesApp =
new Ext.Application({
name: "NotesApp",
useLoadMask: true,
launch: function() {
// page one
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: "notesListToolbar",
title: "Contact",
layout: "hbox",
items: [
{ xtype: "spacer" },
{
text: "New", ui: "action", handler: function() {
name: "NotesApp",
useLoadMask: true,
launch: function() {
// page one
NotesApp.views.notesListToolbar = new Ext.Toolbar({
id: "notesListToolbar",
title: "Contact",
layout: "hbox",
items: [
{ xtype: "spacer" },
{
text: "New", ui: "action", handler: function() {
var note = Ext.ModelMgr.create({ Id: (new Date()).getTime(),Name: "", Phone: "", Email: "" }, "Note");
// 自动加载数据
NotesApp.views.noteEditor.load(note);
NotesApp.views.viewport.setActiveItem("noteEditor", { type: "slide", direction: "left" });
}
}
]
});
Ext.regModel("Note", {
idProperty: "Id",
fields: [
{ name: "Id", type: "int" },
{ name: "Name", type: "string" },
{ name: "Phone", type: "string" },
{ name: "Email", type: "string", message: "Wrong Email Format" }
],
validations: [
{ type: "presence", field: "Id" },
{ type: "presence", field: "Name", message: "Name cannot be empty!" },
// 验证，注意type是"format"
{ type: "format", field: "Phone", matcher: /^[0-9]+$/, message: "please enter corrent number!" },
{ type: "format", field: "Email", matcher: /^[.]*$|^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message: "please enter corrent email!" }
]
});
NotesApp.views.NotesStore = Ext.regStore("NotesStore", {
model: "Note",
sorters: { property: "Name", direction: "ASC" },
proxy: { type: "localstorage", id: "note-store-app" },
// 分组的时候用
getGroupString: function (record) {
if (record && record.data.Name) {
return record.get("Name")[0].toString();
}
else {
return "";
}
}
});
NotesApp.views.notesList = new Ext.List({
id: "notesList",
store: "NotesStore",
// 分组
grouped: true ,
// 右侧的字母索引
indexBar: true,
emptyText: "<div>note is not cached</div>", // onItemDisclosure
itemTpl: "<div>{Name}</div>" + "<div>{Phone}</div>",
onItemDisclosure: function(record) {
//
var selectedNote = record;
NotesApp.views.noteEditor.load(selectedNote);
NotesApp.views.viewport.setActiveItem("noteEditor", { type: "slide", direction: "left" });
}
,
// 只要展示listview就会触发这个事件
listeners: { "render":
function (thisComponent) {
thisComponent.getStore().load();
}
}
});
// page two
// home and save
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
id: "noteEditorTopToolbar",
title: "Edit Contact",
layout: "hbox",
items: [
{ text: "Home", ui: "back",
handler: function() {
NotesApp.views.viewport.setActiveItem("notesListContainer", { type: "slide", direction: "right" });
}
},
{ xtype: "spacer" },
{
text: "Save", ui: "action", handler: function () {
var noteEditor = NotesApp.views.noteEditor;
// 得到record里的数据，比如：从list表单中选择一个
var currentNote = noteEditor.getRecord();
// 将修改后的数据保存在record里，如：在文本框中修改姓名
noteEditor.updateRecord(currentNote);
// 验证，规则对应于Model里的validations
var errors = currentNote.validate();
if (!errors.isValid()) {
var message = "<span style='color:red'>";
Ext.each(errors.items, function (rec, i) {
message += rec.message + "<br>";
});
message += "</span>";
Ext.Msg.alert("<span style='color:red'>Validate</span>", message, Ext.emptyFn);
return ;
}
// 保存notesStore中的数据
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();
if (notesStore.findRecord('Id', currentNote.data.Id) === null ) {
notesStore.add(currentNote);
}
notesStore.sync();
notesStore.sort([{ property: 'Name', direction: 'ASC'}]);
// 刷新notesList中的数据
notesList.refresh();
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
// delete
NotesApp.views.noteEditorBottomToolbar = new Ext.Toolbar({
id: "noteEditorBottomToolbar",
dock: "bottom",
layout: "hbox",
items: [
{ xtype: " spacer" },
{ iconCls: "trash", iconMask: true , handler: function () {
// 得到record里的数据
var currentNote = NotesApp.views.noteEditor.getRecord();
// 删除notesStore中的数据
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();
if (notesStore.findRecord('Id', currentNote.data.Id)) {
notesStore.remove(currentNote);
}
notesStore.sync();
// 刷新notesList中的数据
notesList.refresh();
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
// editor content
NotesApp.views.noteEditor = new Ext.form.FormPanel({
id: "noteEditor",
items: [
{ xtype: "textfield", name: "Name", label: "Name", required: true },
{ xtype: "textfield", name: "Phone", label: "Phone" },
{ xtype: "textfield", name: "Email", label: "Email" }
],
dockedItems: [NotesApp.views.noteEditorTopToolbar, NotesApp.views.noteEditorBottomToolbar]
});
NotesApp.views.notesListContainer = new Ext.Panel({
id: "notesListContainer",
layout: "fit",
dockedItems: [NotesApp.views.notesListToolbar],
items: [NotesApp.views.notesList]
});
NotesApp.views.viewport = new Ext.Panel({
fullscreen: true, // fullscreen
layout: "card",
cardSwitchAnimation: "slide",
items: [NotesApp.views.notesListContainer
, NotesApp.views.noteEditor
]
});
}
});