如何将工具栏添加到使用ExtJS的区域(How do I add a toolbar to a region with ExtJS)

 我在ExtJS中有一个边界布局， 
 
 北部地区包含一些HTML，但也需要包含这样的工具栏... 
 
 所以我设法设置了边界布局，将html添加到了布局的北部区域，但是我找不到如何实现工具栏的可行示例。 
 
 我已经发现了许多自己的工具栏的例子，但我没有充分享受这些奢侈品或者彻底学习ExtJs，所以这对我来说都是希腊化的。 
 
 我怀疑有一种方法可以在繁琐的JSON风格的流程之外定义一个工具栏来创建布局，并以某种方式将它附加到该区域，我希望它相对简单。 如果有人能解释我会如何做到这一点，那真的会有所帮助。 
 
 这是迄今为止的代码... 
 
//make sure YOUR path is correct to this image!!
Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';


//this runs on DOM load - you can access all the good stuff now.

Ext.onReady(function(){
    var viewport = new Ext.Viewport({
        layout: "border",
        border: false,
        renderTo: Ext.getBody(),
        items: [


        // ------------------------------------------------------------------
        {
            region: "north",
            id : "toolbar-area",
            xtype: 'panel',
            html: [ "<div id=\"html-header\">",
                    "<div id=\"council-logo\"></div>",
                    "<ul id=\"ancillary-menu\">",
                        "<li><a href=\"#\">Logout</a></li>",
                        "<li><a href=\"#\">Gazeteer Home</a></li>",
                        "<li>Hello Rachel</li>",
                    "</ul>",
                    "<img id=\"inteligent-logo\" src=\"applied-images/logos/inteligent.gif\">",
                    "</div>" ],

            /* ++++++++++++++++++++++++++++++++++++++++++++ */
            /* The toolbar needs to go around here....      */
            /* ++++++++++++++++++++++++++++++++++++++++++++ */

            height: 100
        },

        // ------------------------------------------------------------------
        // WEST
        // ------------------------------------------------------------------
        {
            region: 'west',
            xtype: 'panel',
            split: true,
            resizeable: false,
            maxWidth : 350,
            minWidth : 349,
            collapsible: true,
            title: 'Gazetteer Explorer',
            width: 350,
            minSize: 150,

            // --------------------------------------------------------------

            title: 'Nested Layout',
            layout: 'border',
            border: false,
            id: "west",
            items: [

                {
                    // ***********************************************
                    // Search Form
                    // ***********************************************

                    region : "north",
                    height: 300,
                    split : true,
                    id : "left-form-panel",
                    items : [{

                        xtype : "form",
                        id : "search-form",
                        items : [

                            // Authority combo box
                            // ===============================
                            {
                                xtype : "combo",
                                fieldLabel : "Authority",
                                name : "authority",
                                hiddenName : "authority",
                                id : "authority-combo"
                            },
                            // ===============================

                            // Search Fieldset
                            // ===============================
                            {
                                xtype : "fieldset",
                                autoHeight : true,
                                title : "Search by...",
                                id : "search-fieldset",
                                items : [

                                    // Ref Number text Box
                                    // %%%%%%%%%%%%%%%%
                                    {

                                        xtype : "textfield",
                                        name : "ref-number",
                                        fieldLabel : "Ref. Number",
                                        id : "ref-number-textfield"

                                    },
                                    // %%%%%%%%%%%%%%%%
                                    // Streetname Combo
                                    // %%%%%%%%%%%%%%%
                                    {

                                        xtype : "combo",
                                        name : "street-name",
                                        hiddenName : "street-name",
                                        fieldLabel : "Street Name",
                                        id : "street-name-combo"

                                    },
                                    // %%%%%%%%%%%%%%%%
                                    // Postcode Combo
                                    // %%%%%%%%%%%%%%%%
                                    {

                                        xtype : "combo",
                                        name : "postcode",
                                        hiddenName : "postcode",
                                        fieldLabel : "Postcode",
                                        id : "postcode-combo"

                                    },
                                    // %%%%%%%%%%%%%%%%

                                    // Postcode Combo
                                    // %%%%%%%%%%%%%%%%
                                    {

                                        xtype : "combo",
                                        name : "town",
                                        hiddenName : "town",
                                        fieldLabel : "Town",
                                        id : "towm-combo"

                                    },
                                    // %%%%%%%%%%%%%%%%

                                    // Postcode Combo
                                    // %%%%%%%%%%%%%%%%
                                    {

                                        xtype : "combo",
                                        name : "locality",
                                        hiddenName : "locality",
                                        fieldLabel : "Locality",
                                        id : "locality-combo"

                                    },
                                    // %%%%%%%%%%%%%%%

                                     // Search Button
                                    // %%%%%%%%%%%%%%%%

                                    {
                                        xtype : "button",
                                        text : "Search",
                                        id : "search-button"
                                    },  

                                    // Reset Button
                                    // %%%%%%%%%%%%%%%

                                    {
                                        xtype : "button",
                                        text : "Reset",
                                        id : "reset-button"
                                    } 


                                ]
                            },
                            // =======================


                        ]

                    }]

                    // *********************************************

                },

                {
                    region: 'center',
                    html: 'Tree view goes here'
                }

            ]



        },

        // ------------------------------------------------------------------
        {
            region: 'center',
            xtype: 'panel',


            // --------------------------------------------------------------
              layout: 'border',
              border: false,
              items: [

                  {
                    region: 'center',
                    height: 200,
                    split: true,
                    html: 'Map goes here'
                  },

                  {
                    region: 'south',
                    title: "Selection", 
                    split: true,
                    height: 200,
                    collapsible: true,
                    html: 'Nested Center'
                  }

              ]
        },

        // ------------------------------------------------------------------
        {
            region: 'east',

        },

        // ------------------------------------------------------------------

        {
            region: 'south',
        }]


    }); 
});
 
 对不起有很多代码，但ExtJS让我害怕碰触任何可以工作的东西。 

I have a border layout in ExtJS, 
 
The north region contains some HTML, but also needs to contain a toolbar like this...
 
So i've managed to get the border layout set up, added the html to the North Region of the layout, but I can't find any workable examples of how to implement a tool bar. 
 
I have found lot's of examples of toolbars on their own, but I've not got the luxury or learning ExtJs thoroughly so it's all greek to me. 
 
I suspect there's a way to define a tool bar outside of the cumbersome JSON style flow of creating a layout and somehow attaching it to the region, and I'm hoping it's relativley simple to do. If someone can explain how I'd do this, it would really help. 
 
Here's the code so far...
 
//make sure YOUR path is correct to this image!!
Ext.BLANK_IMAGE_URL = '../../ext-2.0.2/resources/images/default/s.gif';


//this runs on DOM load - you can access all the good stuff now.

Ext.onReady(function(){
    var viewport = new Ext.Viewport({
        layout: "border",
        border: false,
        renderTo: Ext.getBody(),
        items: [


        // ------------------------------------------------------------------
        {
            region: "north",
            id : "toolbar-area",
            xtype: 'panel',
            html: [ "<div id=\"html-header\">",
                    "<div id=\"council-logo\"></div>",
                    "<ul id=\"ancillary-menu\">",
                        "<li><a href=\"#\">Logout</a></li>",
                        "<li><a href=\"#\">Gazeteer Home</a></li>",
                        "<li>Hello Rachel</li>",
                    "</ul>",
                    "<img id=\"inteligent-logo\" src=\"applied-images/logos/inteligent.gif\">",
                    "</div>" ],

            /* ++++++++++++++++++++++++++++++++++++++++++++ */
            /* The toolbar needs to go around here....      */
            /* ++++++++++++++++++++++++++++++++++++++++++++ */

            height: 100
        },

        // ------------------------------------------------------------------
        // WEST
        // ------------------------------------------------------------------
        {
            region: 'west',
            xtype: 'panel',
            split: true,
            resizeable: false,
            maxWidth : 350,
            minWidth : 349,
            collapsible: true,
            title: 'Gazetteer Explorer',
            width: 350,
            minSize: 150,

            // --------------------------------------------------------------

            title: 'Nested Layout',
            layout: 'border',
            border: false,
            id: "west",
            items: [

                {
                    // ***********************************************
                    // Search Form
                    // ***********************************************

                    region : "north",
                    height: 300,
                    split : true,
                    id : "left-form-panel",
                    items : [{

                        xtype : "form",
                        id : "search-form",
                        items : [

                            // Authority combo box
                            // ===============================
                            {
                                xtype : "combo",
                                fieldLabel : "Authority",
                                name : "authority",
                                hiddenName : "authority",
                                id : "authority-combo"
                            },
                            // ===============================

                            // Search Fieldset
                            // ===============================
                            {
                                xtype : "fieldset",
                                autoHeight : true,
                                title : "Search by...",
                                id : "search-fieldset",
                                items : [

                                    // Ref Number text Box
                                    // %%%%%%%%%%%%%%%%
                                    {

                                        xtype : "textfield",
                                        name : "ref-number",
                                        fieldLabel : "Ref. Number",
                                        id : "ref-number-textfield"

                                    },
                                    // %%%%%%%%%%%%%%%%
                                    // Streetname Combo
                                    // %%%%%%%%%%%%%%%
                                    {

                                        xtype : "combo",
                                        name : "street-name",
                                        hiddenName : "street-name",
                                        fieldLabel : "Street Name",
                                        id : "street-name-combo"

                                    },
                                    // %%%%%%%%%%%%%%%%
                                    // Postcode Combo
                                    // %%%%%%%%%%%%%%%%
                                    {

                                        xtype : "combo",
                                        name : "postcode",
                                        hiddenName : "postcode",
                                        fieldLabel : "Postcode",
                                        id : "postcode-combo"

                                    },
                                    // %%%%%%%%%%%%%%%%

                                    // Postcode Combo
                                    // %%%%%%%%%%%%%%%%
                                    {

                                        xtype : "combo",
                                        name : "town",
                                        hiddenName : "town",
                                        fieldLabel : "Town",
                                        id : "towm-combo"

                                    },
                                    // %%%%%%%%%%%%%%%%

                                    // Postcode Combo
                                    // %%%%%%%%%%%%%%%%
                                    {

                                        xtype : "combo",
                                        name : "locality",
                                        hiddenName : "locality",
                                        fieldLabel : "Locality",
                                        id : "locality-combo"

                                    },
                                    // %%%%%%%%%%%%%%%

                                     // Search Button
                                    // %%%%%%%%%%%%%%%%

                                    {
                                        xtype : "button",
                                        text : "Search",
                                        id : "search-button"
                                    },  

                                    // Reset Button
                                    // %%%%%%%%%%%%%%%

                                    {
                                        xtype : "button",
                                        text : "Reset",
                                        id : "reset-button"
                                    } 


                                ]
                            },
                            // =======================


                        ]

                    }]

                    // *********************************************

                },

                {
                    region: 'center',
                    html: 'Tree view goes here'
                }

            ]



        },

        // ------------------------------------------------------------------
        {
            region: 'center',
            xtype: 'panel',


            // --------------------------------------------------------------
              layout: 'border',
              border: false,
              items: [

                  {
                    region: 'center',
                    height: 200,
                    split: true,
                    html: 'Map goes here'
                  },

                  {
                    region: 'south',
                    title: "Selection", 
                    split: true,
                    height: 200,
                    collapsible: true,
                    html: 'Nested Center'
                  }

              ]
        },

        // ------------------------------------------------------------------
        {
            region: 'east',

        },

        // ------------------------------------------------------------------

        {
            region: 'south',
        }]


    }); 
});
 
Sorry there's so much code, but ExtJS makes me scared to touch anything that's working.

原文：https://stackoverflow.com/questions/2506711