如何在 Extjs 的文本字段中包含小 x 按钮
How to include small x button in textfield in Extjs
我想以文本字段中的可点击小按钮清除其值的方式覆盖 'Ext.ux.LiveSearchGridPanel'。
有不同的方法可以通过覆盖、插件..或添加适当的 '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' 触发器将被隐藏。
我想以文本字段中的可点击小按钮清除其值的方式覆盖 'Ext.ux.LiveSearchGridPanel'。
有不同的方法可以通过覆盖、插件..或添加适当的 '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' 触发器将被隐藏。