Panel Data View

Pernah kita melihat data yang ditampilkan secara matrik dengan komponen icon dan keterangan di bawahnya seperti demo dibawah ini.

 
Contoh diatas yang digunakan adalah komponen dataview dengan memadukan css yang diatus pada parameter tpl di pada komponen dataview tersebut sehingga bisa terbentuk seperti demo diatas.

Link berikut ini adalah sebuah demo yang menngunakan viewport:
http://www.kiezie.web.id/demo/panel_data_view/viewport.html

Download


Demo diatas adalah dataview yang diletakkan pada sebuah komponen Panel. Berikut pemakaiannya:

Ext.create('Ext.panel.Panel', {
title: 'Panel Data View',
layout: 'fit',
items: [Ext.create('dataView')],
height: 360,
width: 497,
renderTo: document.body
});

Jika ingin ditampilkan pada viewport tinggal mengganti komponen panel nya ke komponen viewport. Berikut pemakaiannya:

Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [Ext.create('dataView')],
autoShow: true
});

Link berikut ini adalah sebuah demo yang menngunakan viewport:
http://www.kiezie.web.id/demo/panel_data_view/viewport.html

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *