Блог

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

Но я хочу показать ту же информацию по-другому, например, в виде полей, как показано ниже. Как мне это реализовать?

Вы не указали, какую версию 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 .Просмотр класса. Вот скелетный код:

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