How to set Extjs Toolbar items' width to expand the whole 工具栏项的宽度设为百分比

 Extjs 的toolbar 是一个快速定制的工具栏组件，通过给items:[]赋值，可以添加需要的element对象。

例如给grid tbar建一个简单的URL浏览器的导航条

 new Ext.Toolbar({
   height : 30,
   region : 'center',
   width:'100%',
   items : [

    'URL',

    new Ext.form.TextField({
        id : 'txt_url',
        width : '500',
        value : this.workdir,
           }),

     new Ext.Button({
      id :  'btn_url',
      icon : "./images/file/go.png",
      cls : "x-btn-text-icon",
      handler : this.showUrl.createDelegate(this)
     })]

     });

   设置好，预览发现，中间的TextField的宽度没有展开，当窗口变大后，就会出现多余的空白，很难看。

   于是把width : '500'修改为width : '100%',预览发现，TextField并没有伸展。而其父节点toolbar的div的width已设为100%并自动展开，为什么？

   查看dom发现，Extjs在实现Items时，其html表示为<table>

<div id="ext-comp-1089" class="x-toolbar x-small-editor" style="width: 100%; height: 25px;">

<table cellspacing="0">

<tbody>

<tr>

<td>

<span id="ext-gen1091" class="ytb-text">URL:</span>

</td>

<td id="ext-gen1092" >

<input id="file-win2txt_url" class=" x-form-text x-form-field" type="text" name="file-win2txt_url" autocomplete="off" size="20" style="width: 100%;">

</td>

<td id="ext-gen1098">

<table id="file-win2btn_url" class="x-btn-wrap x-btn x-btn-text-icon" cellspacing="0" cellpadding="0" border="0" style="width: auto;">

</td>

</tr>

</tbody>

</table>

</div>

由于Ext不会把input父dom的td也设为100%，因此input的width最大就和td默认的width一样宽，这样就会造成一个100%无效的假象。其实，TextField配置的width : '100%'已经生效，它的width等于其父td的width乘以100%，父亲的width决定了儿子的width。现在只需要下面的html片段

<td id="ext-gen1092" >

<input id="txt_url" class=" x-form-text x-form-field" type="text" name="file-win2txt_url" autocomplete="off" size="20" style="width: 100%;">

</td>

变为

<td id="ext-gen1092" style="width: 100%;">

<input id="txt_url" class=" x-form-text x-form-field" type="text" name="file-win2txt_url" autocomplete="off" size="20" style="width: 100%;">

</td>

就正确了。

 

但是如何做呢？

经过我的尝试，发现一个workaround的方法，在toolbar重写afterRender，设置其parent的width就可以。

      afterRender:function()
      {
       Ext.Toolbar.prototype.afterRender.apply(this, arguments);
         var pn=Ext.getCmp( 'txt_url').getEl();
         pn.dom.parentNode.style.width = '100%';

      }

 

附全码：

var tb3 = new Ext.Toolbar({
   height : 30,
   region : 'center',
   width:'100%',
   items : [‘URL’, new Ext.form.TextField({
        id :  'txt_url',
        width : '100%',
        value : this.workdir,
        listeners : {
         specialkey : function(field, e) {
          if (e.getKey() == Ext.EventObject.ENTER) {

           // this.grid.getSelectionModel().clearSelections(true);
           this.showUrl();
          }
         }.createDelegate(this)
        }
       }), new Ext.Button({
      id : 'btn_url',
      icon : "./images/file/go.png",
      cls : "x-btn-text-icon",
      handler : this.showUrl.createDelegate(this)
     })]
     ,
      afterRender:function()
      {
       Ext.Toolbar.prototype.afterRender.apply(this, arguments);
         var pn=Ext.getCmp( 'txt_url').getEl();
         pn.dom.parentNode.style.width = '100%';

      }
  });