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

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

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

fcipmucu

fcipmucu1#

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

  1. Ext.application({
  2. name: 'Fiddle',
  3. launch: function () {
  4. Ext.create('Ext.data.Store', {
  5. storeId: 'simpsonsStore',
  6. fields: ['name', 'email', 'phone'],
  7. data: [{
  8. name: 'Lisa',
  9. email: 'lisa@simpsons.com',
  10. phone: '555-111-1224'
  11. }, {
  12. name: 'Bart',
  13. email: 'bart@simpsons.com',
  14. phone: '555-222-1234'
  15. }, {
  16. name: 'Homer',
  17. email: 'homer@simpsons.com',
  18. phone: '555-222-1244'
  19. }, {
  20. name: 'Marge',
  21. email: 'marge@simpsons.com',
  22. phone: '555-222-1254'
  23. }]
  24. });
  25. Ext.create('Ext.ux.LiveSearchGridPanel', {
  26. title: 'Simpsons',
  27. store: Ext.data.StoreManager.lookup('simpsonsStore'),
  28. columns: [{
  29. text: 'Name',
  30. dataIndex: 'name'
  31. }, {
  32. text: 'Email',
  33. dataIndex: 'email',
  34. flex: 1
  35. }, {
  36. text: 'Phone',
  37. dataIndex: 'phone'
  38. }],
  39. height: 200,
  40. renderTo: Ext.getBody(),
  41. listeners: {
  42. // HERE IS THE CODE
  43. beforerender: function (grid) {
  44. var searchField = this.down('textfield[name=searchField]');
  45. searchField.setTriggers({
  46. reset: {
  47. cls: 'x-form-clear-trigger',
  48. hidden: true,
  49. handler: function () {
  50. this.setValue('')
  51. }
  52. }
  53. });
  54. searchField.on('change', function(searchField, value) {
  55. searchField.getTrigger('reset').setHidden(Ext.isEmpty(value));
  56. });
  57. }
  58. }
  59. });
  60. }
  61. });

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

展开查看全部

相关问题