Extjs combobox、displayfield、grid增加tip

最新推荐文章于 2022-08-10 00:07:16 发布

罗罗诺亚F

最新推荐文章于 2022-08-10 00:07:16 发布

阅读量2k

点赞数

分类专栏： extjs 文章标签： extjs combo box field

本文链接：https://blog.csdn.net/Tracycater/article/details/71453121

版权

extjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、combobox下拉选项添加tip

Ext.tip.QuickTipManager.init();//这行很关键

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: {
        fields: ['abbr', 'name', 'tip'],
        data: [{
            "abbr": "AL",
            "name": "Alabama ",
            tip: 'Quicktip 1'
        },
        {
            "abbr": "AK",
            "name": "Alaska",
            tip: 'Quicktip 2'
        },
        {
            "abbr": "AZ",
            "name": "Arizona",
            tip: 'Quicktip 3'
        }]
    },

    valueField: 'value',
    displayField: 'text',
    renderTo: Ext.getBody(),
    listConfig: {
        tpl: ['<table width="100%"><tpl for=".">', '<tr data-qtip="{tip}">', '<td role="option" class="x-boundlist-item">{name}</td>', '</tr>', '</tpl></table>']
    }
});

效果如下：
这里写图片描述
2、displayfield
在创建的时候执行，如果在define的时候使用，tip获取不到值。

{
    xtype: 'displayfield'
    , name: 'orderNo'
    , renderer:function(value, field){
        Ext.QuickTips.init();
        Ext.QuickTips.register({
            target: field.id,
            text: value
        });
    }
},

这里写图片描述
3、grid中操作按钮增加tip

{ text: '操作',  xtype: 'actioncolumn', align: 'center', menuDisabled:true, flex:0.5
    , items:[{
        iconCls: 'doc_lines',  // Use a URL in the icon config
        tooltip: '查看',
        handler: function(grid, rowIndex, colIndex) {
            editWin.show();
            var record = grid.getStore().getAt(rowIndex);
            editWin.updataForm(record.raw);
        }
    }]
}