Sencha Touch, док-панель внутри вложенного списка - PullRequest
Новая
       14

Sencha Touch, док-панель внутри вложенного списка

1 голос
/ 28 апреля 2011

У меня есть приложение Sencha Touch, у которого есть вложенный список.

nestedList автоматически создает свою собственную панель инструментов.

Я бы хотел закрепить панель под панелью инструментов, но над элементами списка. И мне нужно это только на верхнем уровне списка. Я надеюсь, что он исчезнет после выбора первого листа.

Это звучит как что-то выполнимое? Как вы можете видеть из моего кода, у меня есть возможность закрепить панель элементов только поверх текущей панели инструментов.

Большое спасибо заранее. Я очень ценю любой совет, который вы, ребята, могли бы дать.

  • Al.

Вот то, что у меня есть ... 

  // Menu Pages
    var menu = new Ext.NestedList({ 
        fullscreen: true,
        title: 'Menu',
        displayField: 'text',
        store: menu_store,

// ** This is the dockedItem I would like to insert between the toolbar and list-items

            dockedItems: [ {
                  xtype     : 'panel',
                    dock        : 'top',
                    html        : '<span>This is the logo panel</span>',
                    cls         : 'front-logo-panel',
                    flex        : 1
                }], 
            // Add Panel for Leaf nodes
            getDetailCard: function(item, parent) {
                var itemData = item.attributes.record.data,
                parentData = parent.attributes.record.data,
                detailCard = new Ext.Panel({
                    scroll: 'vertical',
                    cls: 'menu-item-panel',
                    styleHtmlContent : true,
                    tpl: menuTemplate, 
                    // add button to Leaf Node
                     listeners: {                
                                           activate: function() {
                                        Ext.getCmp('itemToolbar').setTitle('New Title Bar');
                                    }   
                                    }
                }); 
                detailCard.update(itemData);
                this.backButton.setText(parentData.text);
                return detailCard;     
            }, 
            // add template for all nodes
            getItemTextTpl: function() {
                var tplConstructor =  
                '<tpl if="newItem">' +
                    '<span class="list-new-item">New&nbsp;Item!</span>' +
                '</tpl>'+
                '{text}' +
                '<tpl>'+
                    '<div class="metadata">' +
                        '{description:ellipsis(40)}' +
                    '</div>' +
                '</tpl>';
                return tplConstructor;
            }
    });

1 Ответ

0 голосов
/ 13 декабря 2013

Старый вопрос, я знаю, но для решения этой проблемы вы можете удалить панель инструментов из списка (не уничтожая ее) и добавить ее на панель над списком.Все функциональные возможности nestedList остаются неизменными на панели инструментов.Вот решение, которое у меня есть:

Сначала я создал представление, которое выходит из NestedList и содержит панель инструментов: 

Ext.define('MyApp.view.DynamicList', {
extend: 'Ext.dataview.NestedList',
alias: 'widget.dynamiclist',
config: {
    toolbar: {
        xtype: 'toolbar',
        docked: 'top',
        itemId: 'header-bar',
        layout: {
            pack: 'end',
            type: 'hbox'
        },
        items: [
            {
                xtype: 'spacer'
            },
            {
                xtype: 'button',
                itemId: 'show-nav-sheet-button',
                ui: 'plain',
                width: 45,
                iconCls: 'more'
            }
        ]
    }
}
});

Затем я создал основную панель с макетом vbox, который содержитдочерняя панель и эта панель инструментов: 

Ext.define('MyApp.view.MainContainer', {
extend: 'Ext.Container',

requires: [
    'MyApp.view.DynamicList'
],

config: {
    id: 'main-container',
    layout: {
        type: 'vbox'
    },
    items: [            

        {
            xtype: 'panel',
            flex: 1,
            itemId: 'info-container'                
        },
        {
            xtype: 'dynamiclist',
            flex: 1
        }
    ]        
}

});

Затем в контроллере я прослушиваю событие инициализации вложенного списка.Когда он запущен, я удаляю панель инструментов из вложенного списка и добавляю ее на панель.

onNestedListInitialize: function() {
    // need to wait until everythin is initialized;
    var me = this;

    var renderFn = function renderPanels() {
        var main = me.getMainContainer();

        // wait until main is intialized;
        if(!main) {
            Ext.defer(renderFn, 50, this);
            return;
        }

        var list = main.down('#my-list');
        var infocont = main.down('#info-container');

        // wait until the container's components are initialized
        if(!list || !infocont) {
            Ext.defer(renderFn, 50, this);
            return;
        }

        // remove the toolbar from the list, and add it to the container. 
        var toolbar = list.down('#header-bar');         
        list.remove(toolbar, false);
        infocont.add(toolbar);

    }

    // call the function for the first time.
    renderFn();
}

Обратите внимание, мне пришлось добавить несколько проверок, чтобы убедиться, что компоненты были правильно инициализированы перед их использованием, но суть этого заключается в list.remove (панель инструментов, false), за которым следует инфоконт.add (панель инструментов) команды.Флаг false в методе .remove () означает, что элемент не будет уничтожен, поэтому он доступен для повторного добавления на панель.

...