EXTJS为什么这样的布局出不来 Ext.Panel

[code="js"]
Ext.onReady(function() {
var headToolbar = new Ext.Panel({
renderTo:'dictionary_List_div'

});

 headToolbar.add(new Ext.Toolbar({
          items:[ 
            {text :"查询",iconCls :'icon-search',handler:function(){}},
            {text :"清空条件",iconCls :'icon-edit',handler:function(){}}
         ]
}));

headToolbar.show();

}
[/code]

页面是

1. div设置如下：
   [code="html"]

   [/code]

2. 在ExtJS 4中
   [code="js"]
   Ext.onReady(function() {
   Ext.createWidget('panel', {
   renderTo: 'dictionary_List_div',
   tbar: [{
   text :"查询",iconCls :'icon-search',handler:function(){}
   },{
   text :"清空条件",iconCls :'icon-edit',handler:function(){}
   }]
   });

   var panel = Ext.createWidget('panel', {
   renderTo: 'dictionary_List_div2',
   tbar: []
   });
   panel.getDockedComponent(0).add([{
   text :"查询",iconCls :'icon-search',handler:function(){}
   },{
   text :"清空条件",iconCls :'icon-edit',handler:function(){}
   }]);

});
[/code]

1. ExtJS 3中 [code="js"] Ext.onReady(function() { new Ext.Panel({ renderTo: 'dictionary_List_div', tbar: [{ text :"查询",iconCls :'icon-search',handler:function(){} },{ text :"清空条件",iconCls :'icon-edit',handler:function(){} }] }); var panel = new Ext.Panel({ renderTo: 'dictionary_List_div2', height: 10, tbar: [] }); panel.getTopToolbar().add([{ text :"查询",iconCls :'icon-search',handler:function(){} },{ text :"清空条件",iconCls :'icon-edit',handler:function(){} }]); }); [/code]

试试headToolbar.doLayout()

另外，这里可以不用panel，用Ext.Container就好