如何在Extjs的文本字段中包含小x按钮

yshpjwxd  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(143)

我想覆盖'Ext.ux.LiveSearchGridPanel',在文本字段中有一个小可点击按钮来清除它值。

fcipmucu

fcipmucu1#

有不同的方法可以通过覆盖、插件或添加适当的“beforerender”事件处理程序来实现这一点:

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.ux.LiveSearchGridPanel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            height: 200,
            renderTo: Ext.getBody(),
            listeners: {
                // HERE IS THE CODE
                beforerender: function (grid) {
                    var searchField = this.down('textfield[name=searchField]');
                    searchField.setTriggers({
                        reset: {
                            cls: 'x-form-clear-trigger',
                            hidden: true,
                            handler: function () {
                                this.setValue('')
                            }
                        }
                    });
                    searchField.on('change', function(searchField, value) {
                        searchField.getTrigger('reset').setHidden(Ext.isEmpty(value));
                    });
                }
            }
        });
    }
});

在下面的示例中,当搜索字段值为空时,将隐藏“Reset”触发器。

相关问题