nestedList和navigationview其實沒啥直接的關係,同根生，都是容器組件而以，操作上有點點相似的地方就是，在顯示下一層的時候會自動創建toolbar和返回銨鈕,先了解這麼多，下面慢慢玩玩它們兩個。
nestedList就是一個樹導航組件，它需要綁定樹型的數據結構treestore
navigationview是個有趣的導航組件，他可以像棧一樣，去操作view。通過調用push來顯示下一層view，通過pop來關閉當前顯示的子view
先來玩nestedList吧
//定義一個數據模型，它只有一個text字段Ext.define('ListItem',
{ extend:
'Ext.data.Model', config:
{ fields:
['text'] }});//創建一個樹型存儲結構,注意看葉子節點需要標識：leaf:
truevar 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:
truevar 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 } ] } ] }});//自定義一個viewExt.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(); } }] }); } } ] }); } } ] } ]}); |
效果：
