Extjs3.4 textfield组合button

最新推荐文章于 2023-07-12 22:26:57 发布

ASparrowJack

最新推荐文章于 2023-07-12 22:26:57 发布

阅读量357

点赞数

分类专栏： Extjs

本文链接：https://blog.csdn.net/ASparrowJack/article/details/88051184

版权

问题：将textfield和button组合成类似combobox的表单元素

思路：

1.建一个panel，布局为column，items分别为textfield和button

{
    xtype: 'panel',
    id: 'mypanel',
    width: 290,
    height: 29,
    border: false,
    layout: 'column',
    items: [
    {
        xtype: 'textfield',
        width: 265,
        height: 29,
        readOnly: true
    },
    {
        xtype: 'button',
        icon: prefixPath + '/image/xx.png',
        width: 25,
        height: 29,
        handler: function(){}
    }]
}

在某些div和样式设置的情况下，出现了问题，该段代码在ie和chrome的显示效果不同，或者说在chrome中无法正常显示，textfield比button窄。原因是在chrome中textfield的padding属性被x-column覆盖，原本上下左右的padding值分别为1133变成0，但是ext计算textfield高度时仍然假设存在padding来计算。该例子中高度29的textfield，显示出来的高度只有27。ie不受影响的原因在于textfield的父级元素存在ext-ie8的样式，.ext-ie8 .x-form-field得到的padding-top:2px会覆盖x-c