Как реализовать эту пользовательскую сетку в ExtJS? - PullRequest
Новая
       1

Как реализовать эту пользовательскую сетку в ExtJS?

0 голосов
/ 10 октября 2011

Я новичок в ExtJS. В настоящее время у меня реализована сетка, как показано ниже. enter image description here

Но я хочу показать ту же информацию иначе, чем показывать в полях, как показано ниже. Как мне это реализовать? enter image description here

1 Ответ

0 голосов
/ 11 октября 2011

Вы не указали, какую версию 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.Вам нужно будет добавить прослушиватели событий и т. Д. В свой контроллер.

...