《HTML 5移动web开发指南》&＃xff0c;是UC公司著名前端开发师唐俊开&＃xff08;网名&＃xff1a;三桥&＃xff09;
的新书&＃xff0c;介绍了jquery mobile,sencha touch,phonegap的开发&＃xff0c;内容很丰富&＃xff0c;
最后还有一个小的实例&＃xff0c;推荐阅读&＃xff0c;给分85分&＃xff0c;下面是其中sencha touch的
一些本人新学到的知识点小结
1 sencha touch中如果为某控件同时指定了cls样式和componentCls样式的话&＃xff0c;
则componentCls样式会覆盖cls样式&＃xff0c;如果还加了baseCls样式&＃xff0c;则原来的样式会被命名
为比如panel_baseCls和pannel_baseCls登新的样式名称
2 UI 按钮
按钮根据 ui 配置选项进行样式化。支持的按钮类型是 normal、back、round、action 和 forward。
3 为sencha touch设置自定义图标&＃xff0c;见
http://wenku.baidu.com/view/47bc9087e53a580216fcfead.html
实际上ui,iconmark,iconcls三个组件属性来实现&＃xff0c;其实是base64编码而已&＃xff0c;体积大了
4 按钮分组SegmentedButton.toggle&＃xff0c;多个按钮中只有一个能按&＃xff0c;比如
xtype: &＃39;toolbar&＃39;,
docked: &＃39;top&＃39;,
items: [{
xtype: &＃39;segmentedbutton&＃39;,
items: [{
text: &＃39;left&＃39;,
pressed: true
}, {
text: &＃39;center&＃39;
}, {
text: &＃39;right&＃39;
}, {
text: &＃39;justify&＃39;
}], // items
listeners: {
toggle: function (segBtn, btn, isPressed) {
Ext.Msg.alert(&＃39;Ext.SegmentedButton toggle:&＃39;,
btn.config.text &＃43; &＃39; (pressed:&＃39; &＃43; isPressed &＃43; &＃39;)&＃39;);
} // toggle
5 Carousels&＃xff0c;翻译过来“传送带”的意思&＃xff0c;顾名思义&＃xff0c;仿佛屏幕背后就有一传送带&＃xff0c;用户发出向左或向右的指令&＃xff0c;即可命令传送带“移动”。移动设备上的屏
幕就是当前显示的内容。在中间的那个“一点点”图案即为指示器&＃xff0c;指示器可以告诉你剩余有多种张待现实的页面。
Ext.create(&＃39;Ext.Carousel&＃39;, {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [
{
html : &＃39;Item 1&＃39;,
style: &＃39;background-color: #5E99CC&＃39;
},
{
html : &＃39;Item 2&＃39;,
style: &＃39;background-color: #759E60&＃39;
},
{
html : &＃39;Item 3&＃39;
}
]
});
6 ext.util.geolocation用法&＃xff1a;
getCurrentPosition:function(){
var geo &＃61; new Ext.util.GeoLocation({
autoUpdate: true,
listeners: {
locationupdate: function (geo) {
Ext.getCmp(&＃39;latitude&＃39;)
.setValue(geo.coords.latitude);
Ext.getCmp(&＃39;longitude&＃39;)
.setValue(geo.coords.longitude);
},
locationerror:function(geo,
bTimeout,
bPermissionDenied,
bLocationUnavailable,
message){
}
}
});
geo.updateLocation();
}
7 自定义命名空间后&＃xff0c;则可以直接使用调用实例变量了
比如MyApp.panelDemo&＃61;new Ext.Pannel({ });
8 sencha touch mvc中的model:
MyApp.models.User&＃61;Ext.regModel( ..........)
然后定义store&＃xff0c;比如&＃xff1a;
app.stores.noteStore &＃61; new Ext.data.Store({
model:&＃39;note&＃39;,
id:&＃39;noteStore&＃39;
});
app.models.note &＃61; Ext.regModel("note",{
fields:[
{name:&＃39;id&＃39;,type:&＃39;int&＃39;},
{name:&＃39;title&＃39;,type:&＃39;string&＃39;},
{name:&＃39;content&＃39;,type:&＃39;string&＃39;},
{name:&＃39;position&＃39;,type:&＃39;string&＃39;},
{name:&＃39;latitude&＃39;,type:&＃39;string&＃39;},
{name:&＃39;longitude&＃39;,type:&＃39;string&＃39;}
],
/* 使用localStorage代理 */
proxy : {
type:&＃39;localstorage&＃39;,
id:&＃39;noteStorage&＃39;
}
});
一对多关系
Ext.regModel(&＃39;User&＃39;,[fields:[&＃39;id&＃39;],hasMany:[&＃39;Post&＃39;]});
belongsTo:........
9 setactiveitem方法&＃xff0c;能在不同的子组件中隐藏和切换&＃xff0c;比如
Ext.getCmp(&＃39;pannel1&＃39;).hide();
Ext.getCmp(&＃39;pannel2&＃39;).show();
等价于
Ext.getCmp(&＃39;pannel1&＃39;).setActviteItem(&＃39;pannel2&＃39;);
10 MVC中的控制类注册
MyApp.controllers.demoAction&＃61;Ext.regController(&＃39;demoAction&＃39;,{ showpannel:function()
{
});
}
});
调用时MyApp.controllers.demoAction.showpannel();
11 一个保存数据到sencha touch localstorage例子
saveNote:function(){
var form &＃61; Ext.getCmp("noteForm");
var store &＃61; app.stores.noteStore;
var last &＃61; store.last();
var maxId &＃61; last&＃61;&＃61;undefined?1:last.data.id&＃43;1;
form.submit({
waitMsg:&＃39;处理中...&＃39;,
success:function(){
app.controllers.appController.showListPanel();
}
});
var m &＃61; Ext.ModelMgr.create({id:maxId},&＃39;note&＃39;);
form.updateRecord(m,false);
app.stores.noteStore.insert(maxId,m);
app.stores.noteStore.sync();
form.reset();
app.controllers.appController.showListPanel();
},
删除记录&＃xff1a;
removeAllNote:function(){
Ext.Msg.confirm("确认", "你确认要清除本地所有数据?", function(){
var count &＃61; app.stores.noteStore.getCount();
for(var i&＃61;0;i
app.stores.noteStore.removeAt(0);
}
app.stores.noteStore.sync();
app.views.moreActionSheet.hide();
});
},
京公网安备 11010802041100号