2011-10-10 51 views

回答

0

您尚未指定您正在使用的Ext JS版本。所以,一定會給你兩個版本的解決方案:

在ExtJS的3.X

您可以使用Ext.DataView類。這裏是一個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架構。你必須在控制器中添加事件監聽器等。