Панели инструментов и панели инструментов стека в Sencha Touch - PullRequest
Новая
       27

Панели инструментов и панели инструментов стека в Sencha Touch

0 голосов
/ 22 февраля 2012

Я тренируюсь с Сенча Тач. Я создал простую панель вкладок, которая закреплена в нижней части экрана. Вот мой код: 

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        Ext.regModel('ListItem', {
            fields: [{name: 'text', type: 'string'}]
        });

        var d1 = new Ext.data.TreeStore({
                            model: 'ListItem',
                            root:{text:'D1',items:{}},
                            proxy: {
                                      type: 'ajax',
                                      reader: {
                                              type: 'tree',
                                              root: 'items'
                                          }
                            }
        });
            var d2 = new Ext.data.TreeStore({
                            model: 'ListItem',
                            root:{text:'D2',items:{}},
                            proxy: {
                                      type: 'ajax',
                                      reader: {
                                              type: 'tree',
                                              root: 'items'
                                          }
                            }
        }); 
        tabBar = new Ext.TabPanel({
            id:'tabPanel',
            fullscreen:true,
            tabBar: {
                dock: 'bottom'
            },
            items:[
                new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}),
                new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
            ]
        });
    }
});

Далее я хочу создать панель инструментов прямо над панелью вкладок. Эта панель инструментов напечатает некоторый текст (который я в конечном итоге буду использовать для создания прокрутки новостей). Как добавить панель инструментов прямо над панелью вкладок?

Ответы [ 2 ]

1 голос
/ 22 февраля 2012

Вот, пожалуйста: 

tabBar = new Ext.TabPanel({
            id:'tabPanel',
            fullscreen:true,
            tabBar: {
                dock: 'bottom'
            },
            items:[
                new Ext.NestedList({
                    dock:'left',
                    title:'title',
                    iconCls:'home', 
                    width:'350', 
                    store:d1,
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'bottom',
                        items: [{
                            text: 'Docked to the bottom'
                        }]
                    }]
                }),
                new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
            ]
        });

У первой вкладки теперь есть панель инструментов чуть выше вкладки

0 голосов
/ 10 апреля 2012

Сегодня вечером я играю с чем-то похожим, пытаюсь добавить панель сообщений над панелью вкладок.Я нашел хороший способ сделать это, используя метод initComponent (я использую ленивый экземпляр и Ext.extend для создания xtypes).Вот измененная версия вашего кода tabBar, который работал для меня: 

tabBar = new Ext.TabPanel({
        id:'tabPanel',
        fullscreen:true,
        tabBar: {
            dock: 'bottom'
        },
        items:[
            new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}),
            new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
        ]
        listeners: {
              beforerender: function(){
                  this.addDocked({
                      html: 'hello world',
                      dock: 'bottom'
                  });
              }
        }
    });
...