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