Вложенные панели / панели инструментов в Sencha Touch - PullRequest
Новая
       3

Вложенные панели / панели инструментов в Sencha Touch

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

Я пытаюсь создать постоянную нижнюю панель инструментов, которая управляет панелью над ней.Тогда панель над ним должна иметь собственную панель инструментов (вверху).Я попробовал приведенный ниже код, который почти работает, но я не вижу html внутренней панели подстраницыЯ думаю, это потому, что панель не занимает оставшуюся высоту, но я не знаю почему.

У кого-нибудь есть идеи?Спасибо! 

Ext.setup({
    onReady: function() {


    // Sub-page sections
    var blah = {
        style: "background-color: #B22222; color:#FF0000;",
        title: "one",
        html: "Why can't I see this html",
        layout:"fit",
        flex: 1
    };
    var blah2 = {
        style: "background-color: #404040; color:#000000;",
        title: "one",
        html: "Why can't I see this html",
        layout:"fit",
        flex: 1
    };  

    // Main portion of the page, which includes top toolbar and content
    var page1 = new Ext.TabPanel({
        dock: "bottom",
        layout: "card",
        items: [blah, blah2, blah],
        title: "one",
        flex: 1
    });

    // This is the outer panel with the bottom toolbar
    var wrapper = new Ext.Panel({
        fullscreen: true,
        items: page1,
        dockedItems: [
          {
            xtype: "toolbar",
            dock: "bottom",
            items: [
              {
                iconMask: true,
                iconCls: "download"
              },
              {
                iconMask: true,
                iconCls: "favorites"
              },
              {
                iconMask: true,
                iconCls: "search"
              },
              {
                iconMask: true,
                iconCls: "user"
              }
            ]  
          }
        ]
      });
    }
});

Ответы [ 2 ]

8 голосов
/ 12 апреля 2011

Похоже, что вы пытаетесь сделать, можно сделать с помощью TabPanel, а не панели инструментов. Когда вы прикрепляете панель вкладок внизу, каждая кнопка вкладки может принимать значок.

Возможно, я неправильно понял, что вы пытаетесь сделать, но это должно помочь: 

Ext.setup({
    onReady: function() {


        // Sub-page sections
        var blah = {
            style: "background-color: #B22222; color:#FF0000;",
            title: "one",
            html: "Why can't I see this html",
        };
        var blah2 = {
            style: "background-color: #404040; color:#000000;",
            title: "one",
            html: "Why can't I see this html",
        };  

        // Main portion of the page, which includes top toolbar and content
        var page1 = new Ext.TabPanel({
            items: [blah, blah2, blah],
            title: "one",
            iconMask: true,
            iconCls: "download",
        });

        // This is the outer panel with the bottom toolbar
        var wrapper = new Ext.TabPanel({
            fullscreen: true,
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            items: [
                page1,
                {
                    iconMask: true,
                    iconCls: "favorites"
                },
                {
                    iconMask: true,
                    iconCls: "search"
                },
                {
                    iconMask: true,
                    iconCls: "user"
                }
            ]
        });
    }
});

Я сделал скриншот о создании пользовательского интерфейса в sencha touch с использованием вкладок и панелей инструментов . Существует живая демонстрация , а код находится на github , поэтому не стесняйтесь использовать его в качестве справочного материала.

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

взять

layout: "card",

из страницы1 TabPanel и поместите ее вместо панели обёртки

...