我想覆盖'Ext.ux.LiveSearchGridPanel',在文本字段中有一个小可点击按钮来清除它值。
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)); }); } } }); }});
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”触发器。
1条答案
按热度按时间fcipmucu1#
有不同的方法可以通过覆盖、插件或添加适当的“beforerender”事件处理程序来实现这一点:
在下面的示例中,当搜索字段值为空时,将隐藏“Reset”触发器。