《HTML 5移动web开发指南》，是UC公司著名前端开发师唐俊开（网名：三桥）
的新书，介绍了jquery mobile,sencha touch,phonegap的开发，内容很丰富，
最后还有一个小的实例，推荐阅读，给分85分，下面是其中sencha touch的
一些本人新学到的知识点小结
1 sencha touch中如果为某控件同时指定了cls样式和componentCls样式的话，
则componentCls样式会覆盖cls样式，如果还加了baseCls样式，则原来的样式会被命名
为比如panel_baseCls和pannel_baseCls登新的样式名称


2 UI 按钮
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
items: [
// add a panel to the root panel
// this will contain a vertical layout of buttons
{
xtype: "panel",
layout: "vbox",
items: [
{
xtype: "button",
ui: "normal",
text: "Normal"
},
{
xtype: "button",
ui: "back",
text: "Back"
},
{
xtype: "button",
ui: "round",
text: "Round"
},
{
xtype: "button",
ui: "action",
text: "Action"
},
{
xtype: "button",
ui: "forward",
text: "Forward"
}
]
}
]
});
}
});
</script>

按钮根据 ui 配置选项进行样式化。支持的按钮类型是 normal、back、round、action 和 forward。


3 为sencha touch设置自定义图标，见
​​​http://wenku.baidu.com/view/47bc9087e53a580216fcfead.html ​​​
实际上ui,iconmark,iconcls三个组件属性来实现，其实是base64编码而已，体积大了

4 按钮分组SegmentedButton.toggle，多个按钮中只有一个能按，比如
xtype: 'toolbar',
docked: 'top',
items: [{
xtype: 'segmentedbutton',
items: [{
text: 'left',
pressed: true
}, {
text: 'center'
}, {
text: 'right'
}, {
text: 'justify'
}], // items
listeners: {
toggle: function (segBtn, btn, isPressed) {
Ext.Msg.alert('Ext.SegmentedButton toggle:',
btn.config.text + ' (pressed:' + isPressed + ')');
} // toggle


5 Carousels，翻译过来“传送带”的意思，顾名思义，仿佛屏幕背后就有一传送带，用户发出向左或向右的指令，即可命令传送带“移动”。移动设备上的屏

幕就是当前显示的内容。在中间的那个“一点点”图案即为指示器，指示器可以告诉你剩余有多种张待现实的页面。

Ext.create('Ext.Carousel', {
fullscreen: true,

defaults: {
styleHtmlContent: true
},

items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
});

6 ext.util.geolocation用法：

getCurrentPosition:function(){
var geo = new Ext.util.GeoLocation({
autoUpdate: true,
listeners: {
locationupdate: function (geo) {
Ext.getCmp('latitude')
.setValue(geo.coords.latitude);
Ext.getCmp('longitude')
.setValue(geo.coords.longitude);
},
locationerror:function(geo,
bTimeout,
bPermissionDenied,
bLocationUnavailable,
message){
}
}
});
geo.updateLocation();
}


7 自定义命名空间后，则可以直接使用调用实例变量了
比如MyApp.panelDemo=new Ext.Pannel({ });

8 sencha touch mvc中的model:

MyApp.models.User=Ext.regModel( ..........)


然后定义store，比如：


app.stores.noteStore = new Ext.data.Store({
model:'note',
id:'noteStore'
});


app.models.note = Ext.regModel("note",{
fields:[
{name:'id',type:'int'},
{name:'title',type:'string'},
{name:'content',type:'string'},
{name:'position',type:'string'},
{name:'latitude',type:'string'},
{name:'longitude',type:'string'}
],
/* 使用localStorage代理 */
proxy : {
type:'localstorage',
id:'noteStorage'
}
});


一对多关系
Ext.regModel('User',[fields:['id'],hasMany:['Post']});
belongsTo:........

9 setactiveitem方法，能在不同的子组件中隐藏和切换，比如
Ext.getCmp('pannel1').hide();
Ext.getCmp('pannel2').show();
等价于
Ext.getCmp('pannel1').setActviteItem('pannel2');

10 MVC中的控制类注册
MyApp.controllers.demoAction=Ext.regController('demoAction',{ showpannel:function()
{

});
}
});
调用时MyApp.controllers.demoAction.showpannel();


11 一个保存数据到sencha touch localstorage例子
saveNote:function(){
var form = Ext.getCmp("noteForm");
var store = app.stores.noteStore;

var last = store.last();
var maxId = last==undefined?1:last.data.id+1;
form.submit({
waitMsg:'处理中...',
success:function(){
app.controllers.appController.showListPanel();
}
});
var m = Ext.ModelMgr.create({id:maxId},'note');
form.updateRecord(m,false);
app.stores.noteStore.insert(maxId,m);
app.stores.noteStore.sync();
form.reset();
app.controllers.appController.showListPanel();
},

删除记录：
removeAllNote:function(){
Ext.Msg.confirm("确认", "你确认要清除本地所有数据?", function(){
var count = app.stores.noteStore.getCount();
for(var i=0;i<count;i++){
app.stores.noteStore.removeAt(0);
}
app.stores.noteStore.sync();
app.views.moreActionSheet.hide();
});
},