从零开始学习Sencha Touch MVC应用之十三
来源:互联网 发布:js幻灯片代码 编辑:程序博客网 时间:2024/06/08 03:26
我们已经为搜索按钮添加了两个新的属性:iconCls 和 iconMask。iconCls,是一个用来作为按钮图标进行设置css类背景图片的类(引自sencha touch文档),通过给search按钮设置属性值使按钮有一个放大镜的背景图像,为使这个特性能正常运转,我们也需要设置iconMask属性为true。
为Action设置了UI属性,可以使搜索按钮具有不风格。下面就是按钮显示:
现在我们必须为search按钮设置处理器的功能,因为这个按钮将总是做同样的事情,我们可以在应用中的分发功能中设置其处理器的功能如下:
用Ext.ControllerManager的Get功能函数,我们可以访问到我们所注册的名字获取到控制器的实例,然后我们就可以像访问普通的功能函数一样来简单调用它。现在你来点击测试这个搜索按钮,则可以弹出下面的文字:Search index working (正在检索中),这个提示警告信息正是我们在搜索控制启动indexaction中添加的脚本信息。
别急,现在还是不到建立和细化搜索视图的时候!
要想在搜索视图的顶部有搜索字段和取消按钮,使从底向上滑动时有一个半透明的背景以使下面的视图可视。
首先,在app/views/search文件夹中要建立SearchIndexView.js文件(其中:search文件夹需要提前建好),并把它包含到index文件中,并且添加如下的代码:
为Action设置了UI属性,可以使搜索按钮具有不风格。下面就是按钮显示:
现在我们必须为search按钮设置处理器的功能,因为这个按钮将总是做同样的事情,我们可以在应用中的分发功能中设置其处理器的功能如下:
launch: (){ this.viewport = new App.views.Viewport(); this.viewport.query('#searchBtn')[0].setHandler((){ Ext.ControllerManager.get('Search').index(); });},
用Ext.ControllerManager的Get功能函数,我们可以访问到我们所注册的名字获取到控制器的实例,然后我们就可以像访问普通的功能函数一样来简单调用它。现在你来点击测试这个搜索按钮,则可以弹出下面的文字:Search index working (正在检索中),这个提示警告信息正是我们在搜索控制启动indexaction中添加的脚本信息。
别急,现在还是不到建立和细化搜索视图的时候!
要想在搜索视图的顶部有搜索字段和取消按钮,使从底向上滑动时有一个半透明的背景以使下面的视图可视。
首先,在app/views/search文件夹中要建立SearchIndexView.js文件(其中:search文件夹需要提前建好),并把它包含到index文件中,并且添加如下的代码:
App.views.SearchIndex = Ext.extend(Ext.Panel, { cls: 'search-panel', fullscreen: true, floating: true, floatingCls: '', dockedItems: [{ xtype: 'toolbar', items: [ { xtype: 'searchfield', flex: 1, }, { text: 'Cancel', itemId: 'cancelSearchBtn', ui: 'action', } ], }],});Ext.reg('SearchIndex', App.views.SearchIndex);
- 从零开始学习Sencha Touch MVC应用之十三
- 从零开始学习Sencha Touch MVC应用之二
- 从零开始学习Sencha Touch MVC应用之三
- 从零开始学习Sencha Touch MVC应用之二
- 从零开始学习Sencha Touch MVC应用之三
- 从零开始学习Sencha Touch MVC应用之四
- 从零开始学习Sencha Touch MVC应用之五
- 从零开始学习Sencha Touch MVC应用之六
- 从零开始学习Sencha Touch MVC应用之七
- 从零开始学习Sencha Touch MVC应用之八
- 从零开始学习Sencha Touch MVC应用之九
- 从零开始学习Sencha Touch MVC应用之十
- 从零开始学习Sencha Touch MVC应用之十一
- 从零开始学习Sencha Touch MVC应用之十二
- 从零开始学习Sencha Touch MVC应用之十四
- 从零开始学习Sencha Touch MVC应用之十五
- 从零开始学习Sencha Touch MVC应用之十六
- 从零开始学习Sencha Touch MVC应用之十七
- linux 程序运行时 指定动态链接库位置 so library
- vc调试时使用vld(visual leak detector)出错的解决方法
- Use Python module tarfile to compress files
- SubVersion代码库的回滚 [转载]
- 程序员必知8大排序3大查找(二)
- 从零开始学习Sencha Touch MVC应用之十三
- 基于T6369C控制器的图形液晶显示模块
- Linux lsof找回系统下误删除数据文件
- 桥接模式
- buffer与cache的区别
- 针对oracle 误删除数据后闪回数据和备份数据库后,只要导入其中的某几张表语句
- 从零开始学习Sencha Touch MVC应用之十四
- Unity3D中模态对话框的简单解决方案
- <portal-logic/> 标记的详细描述