Sencha Touch CRUD

研究草稿，代码随性，记录思路以备用.

1.Sencha Touch List简单数据绑定

View:

Ext.define("lab.view.ListA",{
extend:"Ext.List",
alias:"widget.lista",

config:{

scrollable: {
directionLock: true
},
itemTpl: "{firstName}--{lastName}",
store: {
xclass:"lab.store.Contact"
}
}
});

Store:

Ext.define("lab.store.Contact", {
extend:"Ext.data.Store",
config: {
model: "lab.model.Contact",
data: [//直接把数组作为数据配置项。这些数据会被加工处理，最终形成record数组。
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Conran'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Ape', lastName: 'Evilias'},
{firstName: 'Dave', lastName: 'Kaneda'}
]
},
constructor:function(){
this.callParent();
}
})
;

2.List Ajax数据绑定,数据类型为xml

Ext.define("lab.view.ListB",{
extend:"Ext.List",
alias:"widget.listb",

config:{

scrollable: {
directionLock: true
},
itemTpl: "<tpl for='.'>{book_name}--{author}</tpl>",
store:{
type:"store",
autoLoad:true,
fields:["book_name","author"],
proxy:{
type:"ajax",
url:"http://localhost/data/books.xml",
reader:{
type:"xml",
record:'book'
}
}
}

}
});

xml数据

<books>
<book>
<book_name>水浒转</book_name>
<author>施耐奄</author>
</book>
<book>
<book_name>西游记</book_name>
<author>吴承恩</author>
</book>
<book>
<book_name>红楼梦</book_name>
<author>曹雪芹</author>
</book>
</books>

3.List数据绑定,数据类型为JSON

Ext.define("lab.view.ListC",{
extend:"Ext.List",
alias:"widget.listc",

config:{

scrollable: {
directionLock: true
},
itemTpl: "<tpl for='.'>{book_name}--{author}</tpl>",
store:{
type:"store",
autoLoad:true,
fields:["book_name","author"],
proxy:{
type:"ajax",
url:"http://localhost/data/books.json",
reader:{
type:"json",
rootProperty:'data'
}
}
}

}
});

JSON内容

{
data:[
{
book_name:"花千骨",
author:'xxx1'
},{
book_name:'倚天屠龙记',
author:'xxx2'
},{
book_name:'降龙十八掌',
author:'xxx3'
}
]
}

4.List分页

模型:

Ext.define("lab.model.Notice",{
extend:"Ext.data.Model",

config:{
fields:["bulletinid","title","content","publishdate"],
idProperty:"bulletinid"
}
});

视图关键代码:

Ext.define("lab.view.ListD",{
extend:"Ext.List",
alias:"widget.listd",

config:{

scrollable: {
directionLock: true
},
mode:"MULTI",
itemTpl: "<tpl for='.'><div><h5>{title}</h5><h5>{content}</h5></div></tpl>",

store:{
type:"store",
autoLoad:false,
model:"lab.model.Notice",
//fields:["bulletinid","title","content","publishdate"],
proxy:{
type:"ajax",
//url:"http://xxxxx:81/mobile/bulletin/recently10",
api:{
create  : 'json_new.mvc',
read    : 'http://xxxxxx:81/mobile/bulletin/recently10',
update  : 'json_update.mvc',
destroy : 'json_destroy.mvc'
},
url:"json_new.mvc",
headers:{
"Content-Type":"application/x-www-form-urlencoded"
},
reader:{
type:"json",
rootProperty:'data',
totalProperty:'total'
},
pageParam:'page',
limitParam:'rows',
startParam:'start',
listeners:{
exception:function(proxy,response,operation){
Ext.Msg.alert("警告",Ext.decode(response.responseText).message);
console.log(operation);
}
}
},
pageSize:5,
pageCount:0,
listeners:[{
event:"load",
fn:"onLoad"
}]
}
},
onLoad:function(store,records,successful,operation){
if(!successful){
Ext.Msg.alert("温馨提示",this.getProxy().getReader().rawData.message);
}else{
var reader = store.getProxy().getReader();
var recordCount = reader.rawData[reader.getTotalProperty()];
var pageSize = store.getPageSize();
var pageCount = Math.ceil(recordCount/(pageSize+0.0));
store.config.pageCount=pageCount;
console.log(Ext.util.Format.format("共{0}条,每页{1}条,当前第{2}/{3}页",recordCount,pageSize,store.currentPage,pageCount));

}
this.callParent(arguments);
},
initialize:function(){
var self = this;

var args = arguments;
self.callParent(args);
//首先登录
Ext.Ajax.request({
url:"http://xxxxx:81/mobile/login.json",
params:{
uname:"xm01",
pwd:"1234"
},
method:"post",
success: function(response){
eval("var rs = "+response.responseText);
if(rs.status==0){
self.getStore().getModel().setIdProperty("bulletinid");
self.getStore().load();

}
}
});
}
});

主视图：

Ext.define('lab.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'lab.view.ListA'
],
config: {
tabBarPosition: 'bottom',

items: [
{
title: 'Store 1',
iconCls: 'home',
layout: "fit",
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'List Example inline data'
}, {
xclass: "lab.view.ListA"
}, {
xtype: "toolbar",
docked:"bottom",
defaults:{
flex:1
},
items: [{
xtype: "button",
text: "过滤"
}, {
xtype: "button",
text: "取消过滤"
}]
}]

},
{
title: 'Store 2',
iconCls: 'home',
layout:'fit',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'List Example ajax xml data'
}, {
xclass: "lab.view.ListB"
}
]
},
{
title: 'Store 3',
iconCls: 'home',
layout:'fit',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'List Example ajax json data'
}, {
xclass: "lab.view.ListC"
}
]
},
{
title: 'Store 4',
iconCls: 'home',
layout:'fit',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'List Example ajax pager data'
},
{
xtype:"container",
docked: 'top',
layout:{
type:"hbox",
align:"middle"
},
items:[{
xtype:"searchfield",
placeHolder:"请输入公告标题",
flex:1
}]

},
{
xclass: "lab.view.ListD"
},
{
xtype: "toolbar",
docked:"bottom",
defaults:{
flex:1
},
items: [{
xtype: "button",
text: "上页"
}, {
xtype: "button",
text: "下页"
},{
xtype:"button",
iconCls:"add"
},{
xtype:"button",
iconCls:"delete"
},{
xtype:"button",
iconCls:"compose"
}]
}
]
}
]
},
initialize: function () {
this.callParent();

}

});

controller完整代码,涵盖分页、远程过滤、添加、修改、删除:

Ext.define("lab.controller.Main",{
extend:"Ext.app.Controller",
config:{
view:["main","listd"],
refs:{
main:"main",
find_button1:"toolbar button[text='过滤']",
listd:"listd"
},
control:{
find_button1:{
tap:"onTapFind_button1"
},
"toolbar button[text=取消过滤]":{
tap:"onTapFind_button2"
},
"toolbar button[text=上页]":{
tap:"onPageUp"
},
"toolbar button[text=下页]":{
tap:"onPageDown"
},
"searchfield":{
change:"onSearchChange"
},
"toolbar button[iconCls=delete]":{
tap:"onDelete"
},
"toolbar button[iconCls=add]":{
tap:"onAdd"
},
"toolbar button[iconCls=compose]":{
tap:"onUpdate"
}
}
},
onUpdate:function(){
var listd = Ext.Viewport.down("listd");
if(listd.getSelectionCount()>0){
var selection = listd.getSelection();
try{
selection[0].dirty=true;
listd.getStore().sync();
}finally{
selection[0].dirty=false;
}
}else{
Ext.Msg.alert("温馨提示","至少选择一个项目");
}
},
onAdd:function(){
var listd = Ext.Viewport.down("listd");
var m = Ext.create("lab.model.Notice",
{"bulletinid":"11111223344",title:"2222",content:"xxxx","publishdate":"11111"}
);
listd.getStore().add(m);
/*
* phantom : Boolean
true when the record does not yet exist in a server-side database (see setDirty). Any record which has a real database pk set as its id property is NOT a phantom -- it's real.

Defaults to: false
* */

try{
m.phantom=true;
listd.getStore().sync();
}finally{
m.phantom=false;
}

},
onDelete:function(){
var listd = Ext.Viewport.down("listd");
if(listd.getSelectionCount()>0){

Ext.Msg.confirm("温馨提示",Ext.util.Format.format("你准备删除选择的{0}条数据吗?",listd.getSelectionCount()),function(){
if(arguments[0]=="yes"){
var selection = listd.getSelection();

//下面两种做法:
//方法1:
//selection[0].erase();

//方法2:
//delete local record
listd.getStore().remove(selection);
//syn to server
listd.getStore().sync();
}
});
}else{
Ext.Msg.alert("温馨提示","至少选择一个项目");
}
},
onSearchChange:function(sfeild,val){
var listd = Ext.Viewport.down("listd");
if(listd.timeoutId){
window.clearTimeout(listd.timeoutId);
delete listd.timeoutId;
}
listd.timeoutId=window.setTimeout(function(){
listd.getStore().setRemoteFilter(true);
listd.getStore().filter("title",val);
listd.getStore().loadPage(1);
},100);
},
onTapFind_button1:function(){
var store = Ext.Viewport.down("lista").getStore();
var index = store.find("firstName","Dave");
//Ext.Msg.alert("温馨提示","Dave--"+store.getAt(index).data.lastName,Ext.emptyFn);
store.filter("firstName","Dave");
},
onTapFind_button2:function(){
var store = Ext.Viewport.down("lista").getStore();
store.clearFilter();
},
onPageUp:function(){
var listd = Ext.Viewport.down("listd");

if(listd.getStore().currentPage>1){
listd.getStore().previousPage({addRecords:false});
}else{
Ext.Msg.alert("温馨提示","前面没有了");
}
},
onPageDown:function(){
var listd = Ext.Viewport.down("listd");
if(listd.getStore().currentPage<listd.getStore().config.pageCount){
listd.getStore().nextPage({addRecords:true});
}else{
Ext.Msg.alert("温馨提示","后面没有了");
}

}
});