移动跨平台开发框架Sencha Touch实战-技术开发专区

移动跨平台开发框架Sencha Touch实战

作者：廖煜嵘编辑：景保玉 2011-07-10 00:05 IT168网站原创

　　创建记事列表界面

　　当我们的这个应用一启动后，首先显示的是记事列表页面，其中页面结构如下图：

　　可以看到，是在一个pannel面版中，存在一个list列表控件和一个toolbar工具条列表。下面是pannel的代码：

　NotesApp.views.notesListContainer = new Ext.Panel({
    id : 'notesListContainer',
    layout : 'fit',
    html: 'This is the notes list container'
});

　　此时，我们结合之前的代码，看下目前的代码应该是如下的样子：

var App = new Ext.Application({
    name: 'NotesApp',
    useLoadMask: true,
    launch: function () {

        NotesApp.views.notesListContainer = new Ext.Panel({
            id : 'notesListContainer',
            layout : 'fit',
            html: 'This is the notes list container'
        });

        NotesApp.views.viewport = new Ext.Panel({
            fullscreen : true,
            layout : 'card',
            cardAnimation : 'slide',
            items: [NotesApp.views.notesListContainer]
        });
    }
})

　　可以看到，在viewport中的items属性，我们将新的这个panel加入进去了。

　　并且请注意cardAnimation中，说明了面板的使用效果是slide的动画展现效果。在模拟器中运行后，会看到如下图的效果：

　　接下来，我们再为其增加工具条，代码如下：

　　NotesApp.views.notesListToolbar = new Ext.Toolbar({

　　id: 'notesListToolbar',

　　title: 'My Notes'

　　});

　　将工具条粘附到记事列表的面板中是很简单的，只需要dockedItems 属性即可：

　　NotesApp.views.notesListContainer = new Ext.Panel({

　　id: 'notesListContainer',

　　layout: 'fit',

　　html: 'This is the notes list container',

　　dockedItems: [NotesApp.views.notesListToolbar]

　　});

　　下图就是添加工具条后的运行效果：

　　到目前为止，本讲的内容结束，主要是讲解了如何架构应用的流程和页面，并给出了启动界面中的记事列表的界面设计原型，目前的完整代码如下：

　　在下一讲中，我们将继续学习，如何实现新建立和编辑记事的功能。

第1页：Sencha Touch的四大特性第2页：设计主页面第3页：构建程序基本结构第4页：创建记事列表界面

关注我们