如何将ExtJS 3.X中ComboBox组件的触发图标改为搜索图标？

要把ComboBox默认的下拉触发图标改成搜索图标，你可以通过自定义CSS类结合组件配置来实现，具体步骤如下：

• 第一步：定义自定义CSS类，覆盖触发按钮的背景样式
  为触发按钮指定新的背景图标，替换默认的下拉箭头。假设你已准备好搜索图标（比如search-icon.png），可编写如下CSS：

  .x-form-search-trigger {
      background-image: url('path/to/your/search-icon.png') !important;
      background-position: center center !important;
  }
  

  注：!important用于确保自定义样式覆盖默认样式，图标路径需替换为你实际的文件路径。

• 第二步：在ComboBox配置中指定自定义触发类
  创建ComboBox实例时，添加triggerClass配置项指向自定义CSS类：

  var combo = new Ext.form.ComboBox({
      fieldLabel: '选择项',
      store: yourStore,
      displayField: 'text',
      valueField: 'value',
      triggerClass: 'x-form-search-trigger' // 指定自定义触发样式类
  });
  

• 可选：调整触发按钮的点击逻辑
  如果需要把默认的下拉展开行为改成搜索逻辑，可重写onTriggerClick方法：

  var combo = new Ext.form.ComboBox({
      // 其他配置项...
      triggerClass: 'x-form-search-trigger',
      onTriggerClick: function() {
          // 执行搜索逻辑，比如触发查询
          this.doQuery(this.getRawValue(), true);
      }
  });
  

内容的提问来源于stack exchange，提问作者srk