HTML 5モバイルWebアプリケーション開発——Sencha Touch編(8)

DataViewはSencha Touchで最も重要なコンポーネントであり、データの可視化に使用されます.データの可視化の重要性は言うまでもなく、いかなるデータもユーザーにイメージ的に示すことができる.現在、どのようによりよく可視化するかは、多くの企業やフレームワークが追求しています.データの可視化により,データ間の法則を発見し,将来の状況を予測することができる.次に、Sencha Touchでどのようにデータの可視化が行われているかを見てみましょう.
DataViewコンポーネントの内容が非常に多いため、この部分の学習は今後しばらく継続されます.
まずくだらないことは言わないで、DataViewコンポーネントのコードフレームワークを直接使用します.

launch:function(){
var store = Ext.create('Ext.data.Store',{//    
fields:[
'name','url'//       （  ）
],
data:[
{name:'Tom',url:'a.png'},
{name:'Marry',url:'b.png'},
{name:'Jack',url:'c.png'},
]
});
var tpl = new Ext.XTemplate(//    
'<tpl for=".">',
'<div style="font-size:12px;">',
'<img src="{url}" title="{name}" style="width:70px;height:70px;"><br/>',
'{name}',
'</div>',
'</tpl>'
);
var dataView = Ext.create('Ext.DataView',{
fullscreen:true,
scrollable:'vertical',
store:store,
itemTpl:tpl,
itemCls:’bookItem’//css         
});
Ext.Viewport.add(dataView);
}

関連する注釈はすべてコードの中にあります.ここで詳しく説明します.
まずデータの準備ですが、これは前のブログでも話しましたが、ここでもう一度強調します.storeコンポーネントを使用してデータを定義し、fieldはnameとurlを含むデータウェアハウス内のデータのプロパティを定義します.次にdataでデータを定義できます.
データstoreを定義した後、テンプレートを定義します.ここでは前述したように、html内のコンテンツをデータ編集するテンプレートです.
最後に、DataViewコンポーネントを定義します.storeプロパティは定義されたデータウェアハウスを選択し、itemTplは前に定義されたテンプレートを選択し、テンプレート、データ、可視化を関連付けます.またitemClsプロパティでDataViewのcssスタイルを設定することもできます.
次回の学習では、DataViewコンポーネントの他のプロパティについて詳しく説明し、DataViewを使用して高性能なデータ可視化を作成します.