Javascript Sencha Touch中的嵌套面板/工具栏

我正在尝试创建一个固定的底部工具栏，它控制它上面的一个面板。然后它上面的面板应该有自己的工具栏（在顶部）。我尝试了下面的代码，几乎可以正常工作，但是我看不到子页面内部面板的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"
              }
            ]  
          }
        ]
      });
    }
});

拿

布局：“卡片”，

从page1选项卡面板中取出，并将其放在包装器面板中

布局：“卡片”，

---

从page1选项卡面板中取出，并将其放在包装器面板中。听起来，您要做的事情可以使用选项卡面板而不是工具栏来完成。将选项卡栏固定到底部时，每个选项卡按钮都可以接受一个图标

我可能误解了您的意图，但这应该会有所帮助：

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"
                }
            ]
        });
    }
});

---

我做了一个关于电影的放映。有一个，和，所以请随意使用它作为参考。

听起来您尝试的操作可以使用选项卡面板而不是工具栏来完成。将选项卡栏固定到底部时，每个选项卡按钮都可以接受一个图标

我可能误解了您的意图，但这应该会有所帮助：

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"
                }
            ]
        });
    }
});

---

我做了一个关于电影的放映。有一个，和，所以请随意使用它作为参考。

注意，我正在尝试嵌套面板，以便在其他面板更改/转换时底部工具栏仍保持固定。注意，我正在尝试嵌套面板，以便在其他面板更改/转换时底部工具栏仍保持固定。谢谢！同时也感谢你们的视频教程。我已经看了很多遍了，试图弄明白这一点（和其他事情）。我还是个书呆子，但如果没有这些视频，我会完全不知所措。当我有你（如果你还在的话），你知道我什么时候/哪本书可以买来了解更多吗？我不能把几千块钱花在训练上，但我愿意投入时间。我能从Ext JS中学到多少适用于Sencha Touch的东西？哦，事实上，我错过了那个视频。我没有意识到这一页上列出的不止这些：Sencha Touch与Ext JS有很多共同点，所以在一本关于Touch的书问世之前，你最好的选择可能是阅读一本关于Ext JS的书。这是我的工作清单。顺便说一下，标签和工具栏上的那本书是昨天才出版的，所以我并不奇怪你还没有看到它！选项卡面板只在底部接受图标？我把位置改到了左边，但是我松开了图标，请你看一下，谢谢！非常感谢。同时也感谢你们的视频教程。我已经看了很多遍了，试图弄明白这一点（和其他事情）。我还是个书呆子，但如果没有这些视频，我会完全不知所措。当我有你（如果你还在的话），你知道我什么时候/哪本书可以买来了解更多吗？我不能把几千块钱花在训练上，但我愿意投入时间。我能从Ext JS中学到多少适用于Sencha Touch的东西？哦，事实上，我错过了那个视频。我没有意识到这一页上列出的不止这些：Sencha Touch与Ext JS有很多共同点，所以在一本关于Touch的书问世之前，你最好的选择可能是阅读一本关于Ext JS的书。这是我的工作清单。顺便说一下，标签和工具栏上的那本书是昨天才出版的，所以我并不奇怪你还没有看到它！选项卡面板只在底部接受图标？我把位置改到了左边，但是我松开了图标，请你看一下，谢谢！