Sencha touch 開發系列:容器組件:dataview,list

dataview就是數據展現組件

list是由dataview派生過來的, 美觀了一些多些也多了一些功能，如分組顯示，索引導航，disclose按鈕...

下面我們就來學習下dataview的用法及list的用法，學習他們之後你需要了解啥時後用dataview啥時後用list就像上一篇一樣，你需要知道你啥時用panel啥時用formpanel一樣。

dataview最重要的兩個配置就是store（數據源）itemtpl(數據項顯示模板)

下面來一段小代碼，實踐中學習。

//創建一個全屏的DataView

var touchTeam
= Ext.create('Ext.DataView',
{

    fullscreen:
true,

    //數據源

    store:
{

        fields:
['name',
'age'],

        data:
[

            {name:
'Jamie
Avins', 
age: 100},

            {name:
'Rob
Dougan',  
age: 21},

            {name:
'Tommy
Maintz',
age: 24},

            {name:
'Jacky
Nguyen',
age: 24},

            {name:
'Ed
Spencer',  
age: 26}

        ]

    },

    //數據項顯示模板

    itemTpl:
'{name}
is {age} years old'

});

效果：

實在是太醜了，沒法看。

我們把上面代碼中的dataview改爲list

//創建一個全屏的List

var touchTeam
= Ext.create('Ext.dataview.List',
{

    fullscreen:
true,

    //數據源

    store:
{

        fields:
['name',
'age'],

        data:
[

            {name:
'Jamie
Avins', 
age: 100},

            {name:
'Rob
Dougan',  
age: 21},

            {name:
'Tommy
Maintz',
age: 24},

            {name:
'Jacky
Nguyen',
age: 24},

            {name:
'Ed
Spencer',  
age: 26}

        ]

    },

    //數據項顯示模板

    itemTpl:
'{name}
is {age} years old'

});

效果:

整齊了很多吧，呵呵。所以如果你一點樣式都不想玩，那麼dataview你絕對傷不起。選list吧.

就這麼點區別，這麼簡單？

當然不是了，下面我們繼續dataview....

爲了讓dataview能夠展示的好看一些，我們在itemtpl做點小動作

//創建一個全屏的DataView

var touchTeam
= Ext.create('Ext.DataView',
{

    fullscreen:
true,

    //數據源

    store:
{

        fields:
['name',
'age'],

        data:
[

            {name:
'Jamie
Avins', 
age: 100},

            {name:
'Rob
Dougan',  
age: 21},

            {name:
'Tommy
Maintz',
age: 24},

            {name:
'Jacky
Nguyen',
age: 24},

            {name:
'Ed
Spencer',  
age: 26}

        ]

    },

    //數據項顯示模板

    itemTpl:
'<p
style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is {age} years old</p>'

});

效果：

看起來和list基本一樣了吧，這是啥在做怪呢：樣式。

在itemTpl裏面，數據項如何顯示，只要你有過硬的html+css基礎，你可以隨便發揮。

基本顯示沒問題了，我們現在該玩下store了

如果我想在列表裏面添加一項怎麼辦呢？

很簡單，我們可以查看一下store的API，瞭解一些基本的數據操作

比如，我也想加入touchteam

那麼我只需要一行代碼

touchTeam.getStore().add({name:'劉江',age:15});或者使用insert方法

//創建一個全屏的DataView

var touchTeam
= Ext.create('Ext.DataView',
{

    fullscreen:
true,

    //數據源

    store:
{

        fields:
['name',
'age'],

        data:
[

            {name:
'Jamie
Avins', 
age: 100},

            {name:
'Rob
Dougan',  
age: 21},

            {name:
'Tommy
Maintz',
age: 24},           

             

        ]

    },

    //數據項顯示模板

    itemTpl:
'<p
style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is {age} years old</p>'

});

//添加一項

touchTeam.getStore().add({name:
'劉江',age:
13});

//指定位置添加一項

touchTeam.getStore().insert(0,{name:
'劉江他弟',age:
11});

效果：

看到沒，呵呵，當然你還可以調用remove或removeAt進行數據項移除.這裏就不試了，你去code editor裏面玩玩。

你還可以玩玩排序，如讓顯示按年年齡倒序：

touchTeam.getStore().sort("age","desc");

之前有同學問過，如何讓一些合規則的數據高亮？

恩，是可行的而且在開發中常有這樣的需求，我們又需要在itemTpl上下功夫了，比如我讓年齡大於20歲的數字高亮下

代碼：

//創建一個全屏的DataView

var touchTeam
= Ext.create('Ext.DataView',
{

    fullscreen:
true,

    //數據源

    store:
{

        fields:
['name',
'age'],

        data:
[

            {name:
'Jamie
Avins', 
age: 100},

            {name:
'Rob
Dougan',  
age: 21},

            {name:
'Tommy
Maintz',
age: 24},           

             

        ]

    },

    //數據項顯示模板(我在們tpl上下了點功夫，就做到了一些數據高亮)

            itemTpl:
'<p
style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name} is  <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>'

});

//添加一項

touchTeam.getStore().add({name:
'劉江',age:
13});

//指定位置添加一項

touchTeam.getStore().insert(0,{name:
'劉江他弟',age:
11});

效果：

怎樣，還不錯吧。

當然我還需要再個性化一點，那怎麼搞呢？簡單的if無法處理我的需求了,那麼我們還可以在tpl中添加函數，我們來完成讓每個名字前面都加上一個團隊名：touchteam

如何搞呢？

仍然是在itemtpl上下手。

代碼：

//創建一個全屏的DataView

var touchTeam
= Ext.create('Ext.DataView',
{

    fullscreen:
true,

    //數據源

    store:
{

        fields:
['name',
'age'],

        data:
[

            {name:
'Jamie
Avins', 
age: 100},

            {name:
'Rob
Dougan',  
age: 21},

            {name:
'Tommy
Maintz',
age: 24},           

             

        ]

    },

    //數據項顯示模板(我在們tpl上下了點功夫，就做到了一些數據高亮)

            itemTpl:
Ext.create('Ext.XTemplate','<p
style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name:this.addTeam} is  <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>',{addTeam:function(value)

            {

                return "touchteam 
"+value;

            }})

});

//添加一項

touchTeam.getStore().add({name:
'劉江',age:
13});

//指定位置添加一項

touchTeam.getStore().insert(0,{name:
'劉江他弟',age:
11});

效果：

OK了吧，在每一個名字前面加一個touchteam，呵呵，你可以按照你想要的去格式化需要顯示的內容。

再扯下dataview的事件吧，然後再講下list要不然.....呵呵

dataview有哪些事件呢，你可以通過API的events下看到，但有一些我們基本不用的，這裏我講一下常用的，常用的就是點擊某一項然後做某事...

//創建一個全屏的DataView

var touchTeam
= Ext.create('Ext.DataView',
{

    fullscreen:
true,

    scrollable:false,

    //數據源

    store:
{

        fields:
['name',
'age'],

        data:
[

            {name:
'Jamie
Avins', 
age: 100},

            {name:
'Rob
Dougan',  
age: 21},

            {name:
'Tommy
Maintz',
age: 24},           

        ]

    },

    //數據項顯示模板(我在們tpl上下了點功夫，就做到了一些數據高亮)

            itemTpl:
Ext.create('Ext.XTemplate','<p
style=" background: #fff; padding: 1em;border-bottom: 1px solid #ccc;">{name:this.addTeam} is  <tpl if="age>=20"><span style="color:red">{age}</span></tpl><tpl if="age<20"><span style="color:yellow">{age}</span></tpl> years old</p>',{addTeam:function(value)

            {

                return "touchteam 
"+value;

            }})

});

//添加一項

touchTeam.getStore().add({name:
'劉江',age:
13});

//指定位置添加一項

touchTeam.getStore().insert(0,{name:
'劉江他弟',age:
11});

//添加item項tap(按)事件

touchTeam.on("itemtap",function(list,index,target,record,e,opt){

                //alert("your
name is "+record.get("name"));

            var txt="your
name is "+record.get("name");

            //通常我們會點擊一行後，然後跳到別一個
view去查看詳情

            var panel=Ext.create("Ext.Panel",{fullscreen:true,html:txt,items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){

                //返回按鈕事件

                //顯示列表頁

                Ext.Viewport.setActiveItem(touchTeam);

                //銷燬上次跳出的view

                panel.destroy();

            }}]}]});

            //添加到容器

            Ext.Viewport.add(panel);

            //顯示

            Ext.Viewport.setActiveItem(panel);

});

touchTeam.on("itemtaphold",function(list,index,target,record,e,opt){

                alert("長按後：your
name is "+record.get("name"));

});

這次代碼有些長,好好看備註吧

再看下效果

點擊前：

點擊一項後和長按一項後

怎樣，能消化麼？

其他事件，就不一一舉例了。

開始玩我們的list了，它是dataview的兒子，所謂青出一藍勝於藍，所以它比list更強大更猛。

list除了具備dataview的所有特針外，還有上面提到的那些不同,下面我們一一來玩玩唄。

onItemDisclosure:如果爲true或者一個 function 時，在每一項的右邊出現一個可點擊（三角）按鈕

下來我們來體驗他，並練習一些常和事件

認真看下面的代碼哦：

var myList=Ext.create('Ext.List',
{

    fullscreen:
true,

    store:
{

        fields:
['name'],

        data:
[

            {name:
'Cowper'},

            {name:
'Everett'},

            {name:
'University'},

            {name:
'Forest'}

        ]

    },

    itemTpl:
'{name}',

    //點擊那個小三角會執行這裏

    onItemDisclosure:function(record,d,a,b,c)

    {

        //創建一個view，然後跳過去，還可以返回過來

        var panel=Ext.create("Ext.Panel",{fullscreen:true,html:record.get("name"),items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){

                //返回按鈕事件

                //顯示列表頁

                Ext.Viewport.setActiveItem(myList);

                //銷燬上次跳出的view

                panel.destroy();

             }}]}]});

            //添加到容器

            Ext.Viewport.add(panel);

            //顯示

            Ext.Viewport.setActiveItem(panel);

        //停止事件冒泡，防止他執行itemtap事件

        b.stopPropagation();       

    },

    listeners:
{

        //先擇一項會執行,只是執行一次

        select:
function(view,
record) {

            //Ext自帶的
alert

            Ext.Msg.alert('Selected!',
'You
selected ' +
record.get('name'));

        },

        //點擊行時執行

        itemtap:function(list,index,target,record,e)

        {

            //當然，你也可以在點擊行的時候跳轉到別一個view，看onItemDisclosure中的代碼

            Ext.Msg.alert("itemtap",record.get("name"));

        }

    }

});

代碼有點多，但不算複雜吧。

多看備註哦，沒啥要特別注意的。

我就們看下點擊小三角後的效果吧

剛纔說了list下還分組和索引功能呢

看代碼

Ext.define('Contact',
{

    extend:
'Ext.data.Model',

    config:
{

        fields:
['firstName',
'lastName']

    }

});

 

var store
= Ext.create('Ext.data.Store',
{

   model:
'Contact',

   sorters:
'lastName',

   //分組函數

   grouper:
{

       groupFn:
function(record)
{

           return record.get('lastName')[0];

       }

   },

   data:
[

       {
firstName: 'Tommy',  
lastName: 'Maintz'  },

       {
firstName: 'Rob',    
lastName: 'Dougan'  },

       {
firstName: 'Ed',     
lastName: 'Spencer' },

       {
firstName: 'Jamie',  
lastName: 'Avins'   },

       {
firstName: 'Aaron',  
lastName: 'Conran'  },

       {
firstName: 'Dave',   
lastName: 'Kaneda'  },

       {
firstName: 'Jacky',  
lastName: 'Nguyen'  },

       {
firstName: 'Abraham',
lastName: 'Elias'   },

       {
firstName: 'Jay',    
lastName: 'Robinson'},

       {
firstName: 'Nigel',  
lastName: 'White'   },

       {
firstName: 'Don',    
lastName: 'Griffin' },

       {
firstName: 'Nico',   
lastName: 'Ferrero' },

       {
firstName: 'Jason',  
lastName: 'Johnston'}

   ]

});

 

//創建一個全屏的list

var myList=Ext.create('Ext.List',
{

    fullscreen:
true,    

    store:
store,

    //分組

    grouped:true,

    //索引欄

    indexBar:true,

    itemTpl:
'{firstName}++++++{lastName}',

    //點擊那個小三角會執行這裏

    onItemDisclosure:function(record,d,a,b,c)

    {

        //創建一個view，然後跳過去，還可以返回過來

        var panel=Ext.create("Ext.Panel",{fullscreen:true,html:record.get("name"),items:[{xtype:'toolbar',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){

                //返回按鈕事件

                //顯示列表頁

                Ext.Viewport.setActiveItem(myList);

                //銷燬上次跳出的view

                panel.destroy();

             }}]}]});

            //添加到容器

            Ext.Viewport.add(panel);

            //顯示

            Ext.Viewport.setActiveItem(panel);

        //停止事件冒泡，防止他執行itemtap事件

        b.stopPropagation();       

    },

    listeners:
{

        //先擇一項會執行,只是執行一次

        select:
function(view,
record) {

            //Ext自帶的
alert

            Ext.Msg.alert('Selected!',
'You
selected ' +
record.get('name'));

        },

        //點擊行時執行

        itemtap:function(list,index,target,record,e)

        {

            //當然，你也可以在點擊行的時候跳轉到別一個view，看onItemDisclosure中的代碼

            Ext.Msg.alert("itemtap",record.get("name"));

        }

    }

});