- 浏览: 7834466 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
《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();
});
},
的新书,介绍了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();
});
},
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 743刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 473三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1437http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 758https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1636即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 946不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 2965参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 92501. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 587http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 800http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 9401 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 535虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 515【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1375https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 766深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 899(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1100https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3108http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1514canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 511http://www.ruanyifeng.com/blog/ ...
相关推荐
《HTML5移动Web开发指南》共分为四大部分,第一部分主要讲述web技术的发展及html5标准在移动web技术中的应用;第二部分主要介绍html5的新功能和新特性如何在移动设备浏览器中使用及相关展望;第三部分主要介绍目前...
《HTML5移动Web开发指南》共分为四大部分,第一部分主要讲述Web技术的发展及HTML5标准在移动Web技术中的应用;第二部分主要介绍HTML5的新功能和新特性如何在移动设备浏览器中使用及相关展望;第三部分主要介绍目前...
本书主要围绕HTML5技术,讲述如何利用HTML5相关技术开发移动Web网站和WebApp应用程序。本书共分为四大部分,第一部分主要讲述Web技术的发展及HTML5标准在移动Web技术中的应用;第二部分主要介绍HTML5的新功能和新...
基于上述两种原因,作者认为需要编写一本能够利用HTML5新技术开发移动Web应用的入门书籍,令广大读者在真正学习到HTML5新技术的同时,也能快速掌握移动Web开发的基础知识。 关于本书 本书不足之处在于,本书并没有...
Sencha Touch 是第一个专门设计为移动设备开发 web 应用的 JavaScript 框架,它基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple iOS,通过 Sencha Touch 框架用户可以创建非常像移动设备本地应用的 web ...
本书主要围绕 HTML5 技术, 讲述如何利用 HTML5 相关技术开发移动 Web 网站和 Web App 应 用程序。本书共分为四大部分,第一部分主要讲述 Web 技术的发展及 HTML5 标准在移动 Web 技术 中的应用;第二部分主要介绍 ...
SenchaTouch 开发指南 SenchaTouch 开发指南附有案例
[Packt Publishing] Sencha Touch 2 移动应用开发教程 (英文版) [Packt Publishing] Creating Mobile Apps with Sencha Touch 2 (E-Book) ☆ 出版信息:☆ [作者信息] John Earl Clark , Bryan P. Johnson [出版...
sencha touch 移动跨平台开发
《SenchaTouch权威指南》同书源代码 本代码清单内包括本书全部资源文件与全部代码文件,其中内容如下所示: 1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-...
Sencha Touch开发的项目《般若人生》源码
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
[Manning Publications] Sencha Touch 实战 英文版 [Manning Publications] Sencha Touch in Action E Book ☆ 出版信息:☆ [作者信息] Jesus Garcia Anthony De Moss Mitchell Simoens [出版机构] Manning ...
《Sencha Touch 权威指南》陆凌牛著的源码包
Sencha Touch 权威指南 陆凌牛源码
移动Web应用,简单来理解就是针对移动终端优化过的Web 站点,终端用户通过支持Html5、Css3、Javascript标准的Webkit内核浏览器访问部署在服务器的Web应用。
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
使用SenchaTouch开发跨平台移动Web应用
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
Sencha Touch是专门用于移动应用开发的JavaScript框架,也是第一个基于HTML5的移动应用框架,其前身是Ext。使用Sencha Touch,开发者可以构建在iPhone、Android和BlackBerry touch等设备上运行的移动web应用,其效果...