Sencha touch 开发系列:容器组件:nestedList,navigationview
nestedList和navigationview其实没啥直接的关系,同根生，都是容器组件而以，操作上有点点相似的地方就是，在显示下一层的时候会自动创建toolbar和返回铵钮,先了解这么多，下面慢慢玩玩它们两个。
nestedList就是一个树导航组件，它需要绑定树型的数据结构treestore
navigationview是个有趣的导航组件，他可以像栈一样，去操作view。通过调用push来显示下一层view，通过pop来关闭当前显示的子view
先来玩nestedList吧
//定义一个数据模型，它只有一个text字段
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
//创建一个树型存储结构,注意看叶子节点需要标识：leaf: true
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
});
//创建一个创屏的nestedList，并将这个树型数据绑定起来
Ext.create('Ext.NestedList', {
fullscreen: true,
//数据
store:treeStore,
//显示model中的哪一个字段
displayField:'text',
updateTitleText:false,
//只有上面这项为false时，title才管用，要不然会被你的字段更新掉
title:'我的测试',
//是否使用title做为返回按钮的text【你可以改为true玩玩】
useTitleAsBackText:false,
//返回按钮的文字，只有当面上这项为false时才有用
backText:'返回',
//是否在列表显示箭头按钮
onItemDisclosure:true,
//点击叶节点的时候要显示的内容
detailCard:{xtype:'container',html:'my name is walter!'},
listeners:
{
//叶子节点项点击事件
leafitemtap:function(nlist,list,index,target,record)
{
alert("它将显示detailCard的内容!");
//我们调用detailCard，然后设置内容
nlist.getDetailCard().setHtml("你选择的是："+record.get("text"));
},
//列表项点击事件
itemtap:function()
{
//alert("点击了列表项!");
}
}
});
效果：
主要是看看备注，把一些关键的配置掌握好哦。先不要急于这个数据源如何来，后面我们会讲，如何从数据库里获取数据进行树绑定。
有同学会问，控制显示项的内容呢？
这个东东很重要，通常我可以不紧紧是显示，我可能会跟据规则，把一些项高亮或.....这里我们需要重写一个方法：getItemTextTpl
//定义一个数据模型，它只有一个text字段
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
//创建一个树型存储结构,注意看叶子节点需要标识：leaf: true
var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Walter',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
});
//自定义一个view
Ext.define('MyTree', {
xtype:'myTree',
extend: 'Ext.NestedList',
//我们重写一下列表项显示模板
getItemTextTpl: function(node) {
return '<span style="color:red;">{' + this.getDisplayField() + '}</span>';
},
});
//创建一个全屏的nestedList，并将这个树型数据绑定起来
Ext.create('MyTree', {
fullscreen: true,
//数据
store:treeStore,
//显示model中的哪一个字段
displayField:'text',
updateTitleText:false,
//只有上面这项为false时，title才管用，要不然会被你的字段更新掉
title:'我的测试',
//是否使用title做为返回按钮的text【你可以改为true玩玩】
useTitleAsBackText:false,
//返回按钮的文字，只有当面上这项为false时才有用
backText:'返回',
//是否在列表显示箭头按钮
onItemDisclosure:true,
//点击叶节点的时候要显示的内容
detailCard:{xtype:'container',html:'my name is walter!'},
listeners:
{
//叶子节点项点击事件
leafitemtap:function(nlist,list,index,target,record)
{
alert("它将显示detailCard的内容!");
//我们调用detailCard，然后设置内容
nlist.getDetailCard().setHtml("你选择的是："+record.get("text"));
},
//列表项点击事件
itemtap:function()
{
//alert("点击了列表项!");
}
}
});
看效果：
看吧，呵呵，列表项显示为红色了.
nestedList，最大的问题就是在于你这数据源，当你从后台读取的时候一定要注意，数据结构一定要是树形。
nestedList就介绍这些呗，把我的实例你码拿下来，看看备注，行属性玩玩，值为true的改false去玩玩，测测，配合API文档，试试玩玩其他属性。
下现我们再讲下
navigationview,它是个很单纯的玩意，子面意思就是导航view，如果你不习惯他，你完全可以自己用 card布局加toolbar去完成这样一个导航view.
不说了，上菜（代码）
//创建一个全屏的导航view
var view=Ext.create("Ext.NavigationView",
{
fullscreen:true,
//返回按钮的文字，不设置默认为:back
defaultBackButtonText:'返回',
//你如果想对导航栏做一些改变，如你想放到下面，或上面就可以用它来配置,如果不喜你可以去掉
navigationBar: {
ui: 'dark',
docked: 'top',
items:[{xtype:'spacer'},{xtype:'spacer'},{xtype:'button',text:'设置',handler:function()
{
Ext.Msg.alert("系统提示","你想干嘛？");
}}]
},
items: [
{
//第一层view的标题
title: '导航View综合合实例',
//内边距为10个像素
padding: 10,
items: [
{
//第一层view里面添加一个button按钮
xtype: 'button',
text: '弹出第二层view!',
handler: function() {
//在view里面显示第二层view 使用push方法
view.push({
title: '第二层view',
padding: 10,
items: [
{
//第二次view下面添加一个button
xtype: 'button',
text: '弹出第三层view',
handler: function() {
view.push({
title: '第三层view',
padding: 10,
items: [
{
//第三次view下面添加一个button
xtype: 'button',
text: '我是最后一层view了',
handler: function() {
Ext.Msg.alert("系统信息","我是最后一层view了再点也不会弹！");
}
},
{
xtype:'button',
text:'你可以点击我，返回第二层',
margin:10,
handler:function()
{
//返回到上一层
view.pop();
}
}]
});
}
}
]
});
}
}
]
}
]
});
效果：
我就不多说其他的了，注意pop和push方法，其他的，你看代码备注吧，在code editor中边玩边搞呗。
有问题的同学可以加入我们的社区或群：13453484在线提问，我尽速解答。
作者：Louja
出处：http://html5mob.cnblogs.com 同步在：http://html5mob.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。
