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

      }
  });

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值