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%';

      }

  });