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
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此聲明，且在文章頁面給出原文連接，否則保留追究法律責任的權利。