第九讲 Navigation View 组件、Tab Panel、自定义list SenchaTouch MVC(2)

2014-3-11 10:09| 发布者: admin| 查看: 7508| 评论: 0

摘要: 学习要点： 1. Navigation View 组件介绍 2. Navigation View 结合Tab Panel 结合自定义list 实现文章分类、文章列表、文章详情显示 1. Navigation View 组件介绍 NavigationView 组件本质上是一个具有Card 布局 ...

本教程为赞助视频教程,只有赞助会员才可以下载此视频教程

详情请看:
http://bbs.phonegap100.com/thread-296-1-1.html

学习要点：
1. Navigation View 组件介绍
2. Navigation View 结合Tab Panel 结合自定义list 实现文章分类、文章列表、文章详情显示

1. Navigation View 组件介绍

NavigationView 组件本质上是一个具有Card 布局的容器组件，所以每次只显示一个内部子组
件。但是它提供一些附加特性，这使得该组件更加像一个“堆栈”容器组件。即可以将子组
件堆入该组件中，然后再按照入栈顺序依次取出位于栈顶的子组件。同时，NavigationView

组件自动实现在子组件进行入栈出栈操作时所执行的动画特效、自动实现 NavigationView
组件中后退按钮的展示功能、自动执行当用户单击后退按钮时位于栈顶的子组件的出栈操
作。

Push 表示入栈 pop 表示出栈默认点击返回按钮的话就会触发出栈操作

1.push 自定义内容
this.getHome().push({

       title: 'Second',
       html: 'Second view!'
});

2.可以push 面板可以push       多次

this.getHome().push(面板);

2. Navigation View 结合 Tab Panel    结合自定义list      实现文章分类、文章列表、   文章详情显示

1.   获取记录中的指定字段

var catid=record.get("catid");

2.   动态加载store

var threadListStore=Ext.getStore('threadListStore');
//threadListStore.removeAll();

threadListStore.load({
      params : {
             a:'getPortalList',

             catid : catid,
             page:'1'
      },

      callback : function(records, operation, success) {
             console.log(records);
      }

});

3.    自定义组件以list 为例子自定义contentlist

Ext.define('jsonp_store.view.Contentlist, {

      extend: 'Ext.List',

     xtype: 'contentlist'

});

4.    Navigation View   push 自定义的list

this.getHome().push({

                xtype: 'musiclist',

                title:'你好',

                itemTpl: [

                     '

{aid}{title}

'

],

store: 'threadListStore'

});