最新版本号[免费下载]

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

作者:本站编辑 发布时间:2015-11-24 来源:本站原创 点击数:

学习要点: 
        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' 

});


本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友
AI智能听书
选取音色