Ext 的triggerAction:'all'和editable:false

最新推荐文章于 2025-06-10 10:33:15 发布

原创最新推荐文章于 2025-06-10 10:33:15 发布 · 4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ext #控件 #extjs

框架专栏收录该内容

36 篇文章

订阅专栏

本文介绍了在ExtJS中使用combo控件时遇到的问题，即选择下拉选项后，再次选择只会显示已选内容。通过分析，发现原因是默认的query模式与triggerAction: 'all'的区别。'all'会导致每次都查询所有选项，而非条件查询。同时讨论了editable属性，当设置为false时，阻止在combo框内直接输入文字。并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我注意到triggerAction : ‘all’这个属性，是因为我在写ext的combo控件的时候，当我们选择了一个下拉选项，再次选择就会只显示之前选好的那个，问题是这样的：
这里写图片描述

当选择了一个之后，是这样的：
这里写图片描述

我上网查找原因，最后得知，是这样的：在extjs底层，默认查询是query，当使用triggerAction ： ‘all’这个属性的时候使用的是queryall，就是说我们没有triggerAction这个属性，查询时，当没有选择，那么会配置全部，当有了选择，会匹配选择的，怎么证明？

怎么证明，这就需要手动输入，当然这时editable 是true的。
这里写图片描述
我想看到这个图的人已经明白了，当用query的时候，配置像是sql的模糊查询，当用了triggerAction，每次查询就是查询全部，而不是条件查询。
然后，我们在设置editable ： ‘false’，不让在combo的框内直接输入文字。

最后，附上完整的代码：

var tablenum = new Ext.data.SimpleStore({
           fields : ['tableNumId','tableNum'],
           data : [['001','001'],['002','002'],                ['003','003'],['004','004'],['005','005']]
    });

{
                columnWidth : .25, // 该列有整行中所占百分比
                layout : "form", // 从上往下的布局
                items : [ {
                    xtype : "combo",
                    fieldLabel : "表号",
                    name : 'tableNum',
                    store : tablenum,
                    displayField : 'tableNum',
                    triggerAction : 'all',
                    mode : 'local',
                    enableKeyEvents : true,
                    editable : false,
                    anchor : '99%'
                } ]
            }