Как добавить заголовок над списком в extjs / sencha touch - PullRequest
Новая
       0

Как добавить заголовок над списком в extjs / sencha touch

3 голосов
/ 06 сентября 2011

Я хочу добавить заголовок над списком в extjs / sencha touch.

Заголовок будет динамичным и будет меняться в зависимости от страницы, поскольку будет содержать номер страницы и другие подробности.Из-за этого я исправил свой обработчик, который обновляет список новыми результатами, так что, кроме того, список результатов, добавляемых к моей dealerList карте, также добавляет контейнер: 

myapp.cards.dealerList.items.add(
     new Ext.Container({
         html: "Dealer results",
         cls: "centered-title",
         baseCls: "x-toolbar-title",
         scroll: false,
         layout: {
             type: "hbox",
             align: "stretch"
         }
     }),
     new Ext.List({ ...
     })
 )

Однакокогда я проверяю его, отображается только список ext.list, над ним нет контейнера.Обратите внимание, я не хочу панель инструментов.Также нет ошибок в chrome.

Вот моя dealerList карта: 

myapp.cards.dealerList = new Ext.Panel({
    scroll: false,
    layout: {
        type: "vbox",
        align: "stretch"
    },
    id: "dealer-list-results-card",
    dockedItems: [myapp.toolbars.dealerList, myapp.toolbars.dealerListNav],
})

Редактировать 1: Здесьявляются основными параметрами конфигурации для списка: 

{
    flex: 1,
    layout: {
        type: "fit",
        align: "stretch"
    },
    id: "results-list",
    singleSelect: true,
    scroll: "vertical",
}

Редактировать 2: Я сделал обнаружение.Если я избавлюсь от списка, появится контейнер.Что касается связанных с этим замечаний, я не могу отобразить более одного элемента, используя myapp.cards.dealerList.items.add(), даже если я вызываю функцию дважды и загружаю ее только с одним аргументом.

Ответы [ 2 ]

4 голосов
/ 07 сентября 2011

Что вам нужно знать, так это то, что Ext.List компонентный суперкласс не больше Ext.Panel, но Ext.DataView. По этой причине вы не можете напрямую прикреплять компоненты в своем списке, фактически, если вы посмотрите на исходный код Ext.List, то внутри функции initComponent вы увидите следующие строки кода: 

if (Ext.isDefined(this.dockedItems)) {
    console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
}

Итак, точно так, как это предупреждение говорит вам, я предлагаю вам "обернуть" ваш компонент List внутри Ext.Panel, для которого вы заполняете настройку конфигурации макета как 'fit', затем вы прикрепляете Ext.Toolbar к верхняя часть этой панели (не в списке). Таким образом, вы всегда можете изменить заголовок панели инструментов в соответствии с вашими потребностями, просто вызвав функцию setTitle. Помните, что все компоненты Sencha Touch можно настраивать, поэтому, если вы хотите назначить разные стили этой панели инструментов, я предлагаю вам использовать componentCls config.

Я публикую вам простой пример, который покажет вам, как это сделать: 

Ext.regApplication('EditableListSample.', {
    launch: function() {

    //Definition of the store Data Model
    Ext.regModel('Contact', {
        fields: ['firstName', 'lastName']
    });

    //Definition of the List Store
    var store = new Ext.data.JsonStore({
        model  : 'Contact',
        sorters: 'lastName',
        data: [
            {firstName: 'Tommy',   lastName: 'Maintz'},
            {firstName: 'Rob',     lastName: 'Dougan'}
        ]
    });

    //Definition of the wrapper panel
    var viewport = new Ext.Panel({
        fullscreen: true,
        layout: 'fit',
        items: [{
            //Definition of the list
            xtype: 'list',
            itemTpl: '{firstName} {lastName}',
            store: store,
            listeners: {
                itemtap: function(list, index){
                    //Updating the toolbar title
                    var firstName = list.getStore().getAt(index).get('firstName');
                    viewport.getDockedComponent('tbrListTitle').setTitle(firstName);
                }
            }
        }],
        dockedItems: [{
            //Definition of the custom toolbar
            xtype: 'toolbar',
            itemId: 'tbrListTitle',
            dock: 'top'
        }]
    });
}
});

Надеюсь, это поможет.

0 голосов
/ 07 ноября 2013

Вот как я добавил пользовательский заголовок в прокручиваемый список.Но будьте осторожны, чтобы уничтожить заголовок и удалить список, если вы планируете использовать тот же список и хранить (это зависит от того, как вы реализовали свое приложение). 

searchStore.load({

    callback: function(records){
        if(records.length > 0){
            var searchList = Ext.get('search-list'),

                firstRow = searchList.select('div.x-list-item').elements,
                html = item[0].outerHTML;

            item[0].outerHTML = 'div id="search-list-title" style="width: 100%;text-align: center;text-decoration: underline;">' + 'List Title: '/div>' + html;

        }
}

});

Удаление заголовка и списка очистки, если необходимо: 

var listTitle = Ext.fly('search-list-title');

    if(listTitle){
        listTitle.destroy();
    }
    var clearSearchStore = Ext.getStore('Search');
    clearSearchStore.removeAll();
...