extjs中Toolbar工具栏

<script type="text/javascript">    
Ext.onReady(function() ...{      
    var toolbar = new Ext.toolbar.Toolbar(...{    
        renderTo:Ext.getBody(),    
        width:500    
    });    
    toolbar.add(    
        ...{text:'新建'},...{text:'打开'},    
        ...{text:'编辑'},...{text:'保存'},//加入按钮    
        '-',    
        ...{//加入表单元素    
            xtype:'textfield',    
            hideLabel:true,    
            width:150    
        },    
        '->',    
        '<a href=#>超链接</a>',    
        ...{xtype:'tbspacer',width:50},    
        '静态文本'    
    );    
});      
</script>   

		

var panel = new Ext.Panel(...{

    renderTo: "li1",

    width: 600,

    height: 250,

    collapsible: true,

    layout: 'fit',

    title: '演示工具栏',

    items: listView,

    tbar: tbar,

    bbar: bbar,

    rbar: [...{

        iconCls: 'add16',

        tooltip: '按钮1'

    },

        '-',

        ...{

            iconCls: 'add16',

            tooltip: ...{

                text: '按钮2',

                anchor: 'left'

            }

        }, ...{

            iconCls: 'add16'

        }, ...{

            iconCls: 'add16'

        },

        '-',

        ...{

            iconCls: 'add16'

        }

    ]

});

		

//创建母工具栏 
var toolbar = Ext.create('Ext.toolbar.Toolbar', ...{ 
           renderTo: document.body, 
           width: 700, 
           items: 
           [ 
            ...{ 
             text: 'Example Button' 
            } 
           ] 
});

var addedItems = [];  //添加项数组

Ext.create('Ext.toolbar.Toolbar', ...{ 
          renderTo: document.body, 
          width: 700, 
          margin: '5 0 0 0', 
          items: 
          [ 
           ...{ 
             text: 'Add a button', 
             scope: this, 
             handler: function () ...{ 
              var text = prompt('Please enter the text for your button:'); 
              addedItems.push(toolbar.add(...{   //装入 
                  text: text 
              })); 
             } 
          }, 
          ...{ 
          text: 'Add a text item', 
          scope: this, 
          handler: function () ...{ 
              var text = prompt('Please enter the text for your item:'); 
              addedItems.push(toolbar.add(text)); 
          } 
          }, 
          ...{ 
          text: 'Add a toolbar seperator', 
          scope: this, 
          handler: function () ...{ 
              addedItems.push(toolbar.add('-')); 
          } 
          }, 
          ...{ 
          text: 'Add a toolbar spacer', 
          scope: this, 
          handler: function () ...{ 
              addedItems.push(toolbar.add('->')); 
          } 
          }, 
          '->', 
          ...{ 
          text: 'Remove last inserted item', 
          scope: this, 
          handler: function () ...{ 
              if (addedItems.length) ...{ 
                  toolbar.remove(addedItems.pop()); 
              } else if (toolbar.items.length) ...{ 
                  toolbar.remove(toolbar.items.last()); 
              } else ...{ 
                  alert('No items in the toolbar'); 
              } 
             } 
         }, 
         ...{ 
          text: 'Remove all items', 
          scope: this, 
          handler: function () ...{ 
              toolbar.removeAll(); 
          } 
         } 
       ] 
 });