このカスタムグリッドをExtJSに実装する方法は？

Question

私はExtJSを初めて使用しています。現在、グリッドは次のように実装されています。

しかし、以下に示すように、同じ情報を別の方法でボックスに表示するようにしたいとします。これをどのように実装すればよいですか？

Answer 1

使用しているExt JSのバージョンを指定していません。あなたがExt.DataViewクラスを利用することができExtJSの3.xのでは

を

：だから、あなたの両方のバージョンのためのソリューションを提供します。ここにはdataviewの例があります。この例ではイメージを使用していますが、ビューを簡単に変更できますが、テンプレートは変更できます。さて、あなたは改ページバーで作業する必要があります。 bbarプロパティを使用してツールバーを作成する必要があります。このツールバーにはナビゲーションボタンがあります。

var panel = new Ext.Panel({ 
    id:'person-view', 
    frame:true, 
    title:'User Grid', 
    bbar: [{ 
     text: Prev, 
     iconCls: 'prev-icon' 
    },{ 
     text: Next, 
     iconCls: 'next-icon' 
    }], 
    items: new Ext.DataView({ 
     store: yourStore, 
     tpl: yourTemplate, 
     autoHeight:true, 
     multiSelect: false, 
     overClass:'x-view-over', 
     itemSelector:'div.thumb-wrap', 
     emptyText: 'No users to display', 

    }) 
}); 

[もちろん、上記のコードは完全ではありません。だから、あなたはこのようなものを持っています。あなたは、ユーザーのニーズに応じて、他のプロパティとイベントリスナー、お店、テンプレートを追加する必要があります。]

ExtJSの4.xでは

あなたはExt.view.Viewクラスを利用するようになります。ここにスケルトンコードがあります：

Ext.define('MyApp.view.members.Display',{ 
    extend: 'Ext.panel.Panel', 
    alias : 'widget.memberslist',  
    initComponent: function() { 

     this.template = Ext.create('Ext.XTemplate', 
      '<tpl for=".">', 
       '<div class="member">', 
        'Name : {name} <br/>', 
        'Title : {title}',    
       '</div>', 
      '</tpl>' 
     ); 

     this.store = Ext.create('MyApp.store.Members'); 
     this.bbar = this.buildToolbar();   
     this.items = this.buildItems(); 

     this.callParent(arguments); 
    }, 
    buildItems: function() { 

     return [{ 
      xtype: 'dataview', 
      store: this.store, 
      id: 'members', 
      tpl: this.template, 
      itemSelector: 'div.member', 
      overItemCls : 'member-hover', 
      emptyText: 'No data available!'   
     }] 
    }, 
    buildToolbar : function() { 

     return [{ 
      text: 'Previous', 
      action: 'prev' 
     },{ 
      text: 'Next', 
      action: "next" 

     }]; 
    } 
}); 

上記のコードは、新しいMVCアーキテクチャを利用しています。コントローラにイベントリスナーなどを追加する必要があります。