设置嵌套列表的“toolbar”属性

时间:2011-12-17 15:16:47

标签: sencha-touch nested-lists

我是Sencha Touch的新用户。我想在默认的NestedList工具栏中添加更多项目,但我找不到使用“toolbar”属性的工作示例。

来自Sencha Docs

toolbar : Object
Ext.Toolbar shared across each of the lists. This will only exist when useToolbar is true which is the default.  

我设法做到这一点的唯一方法是在创建NestedList时使用initComponent方法,但我觉得我正在重新发明轮子......

var myNestedList= new Ext.NestedList({
    fullscreen: true,
    title: 'myTitle',
    useToolbar: true,
    store: myStore,
    initComponent : function() {
            ...
            } 

......修改本节

if (this.useToolbar) {
    // Add the back button
    this.backButton = new Ext.Button({
        text: this.backText,
        ui: 'back',
        handler: this.onBackTap,
        scope: this,
        // First stack doesn't show back
        hidden: true
    });

    // MY ADDED CODE
    var buttonsSpec = [
        { xtype: 'spacer' },
        { xtype: 'searchfield', placeHolder: 'Search', name: 'search' }
    ];
            // END MY ADDED CODE


    //this.searchButton.addListener('action', searchHandler);
    if (!this.toolbar || !this.toolbar.isComponent) {

                 /**
         * @cfg {Object} toolbar
         * Configuration for the Ext.Toolbar that is created within the Ext.NestedList.
         */
        this.toolbar = Ext.apply({}, this.toolbar || {}, {
            dock: 'top',
            xtype: 'toolbar',
            ui: 'light',
            title: title,
            items: [buttonsSpec] //MY ADDED CODE, WAS items: []
        });

        this.toolbar.items.unshift(this.backButton);
        this.toolbar = new Ext.Toolbar(this.toolbar);

        this.dockedItems = this.dockedItems || [];
        this.dockedItems.push(this.toolbar);
    } else {
        this.toolbar.insert(0, this.backButton);
    }
}

0 个答案:

没有答案