PhoneGap中文网

 找回密码
 立即注册

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

2014-3-11 10:09| 发布者: admin| 查看: 6681| 评论: 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'

});

头晕

难过

扯淡

不解

搞笑

支持

超赞

欠扁

相关阅读

最新评论

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2021-3-6 18:55 , Processed in 0.140354 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部