ExtJs4 - 自动完成组合框不显示空文本

发布于 2024-12-04 02:01:38 字数 1217 浏览 5 评论 0原文

我有一个具有以下配置的组合框。

{
    fieldLabel:'Service',
    xtype:'combo',
    displayField: 'srvcDesc',
    store: storeServiceCodeVar,
    valueField:'srvcCD',
    id:'serviceCodeId',
    name:'serviceCodeName',
    queryMode: 'remote',
    queryDelay:100,
    typeAhead: true,
    minChars:0,
    hideTrigger:true,
    forceSelection:true,
    maxHeight:23,
    deferEmptyText:false,
    autoSelect:true,
    fieldStyle:'text-transform:uppercase',
    listConfig: {
        loadingText: 'Loading...',
        // Custom rendering template for each item
        getInnerTpl: function() {
            return '<table width="200px"><tr><td height="5"></td></tr><tr valign="top"><td>Code:{srvcCD}</td></tr><tr><td height="2"></td></tr><tr valign="top"><td>Description:{srvcDesc}</td></tr><tr><td height="5"></td></tr></table>';
        },
        emptyText:'No Values Found'
    }
}

问题是,当服务器没有返回数据时,emptyText(有值 - 未找到值)可能会显示一毫秒,然后消失。我希望它保留在那里直到下一个查询(如果被触发)。怎么可能呢。我尝试过 deferEmptyText 但没有运气。

有人可以解释一下吗?我使用的是 ExtJS 4,IE9 和 Mozilla 中的行为是相同的。

提前致谢。

I have a combo-box with following configuration.

{
    fieldLabel:'Service',
    xtype:'combo',
    displayField: 'srvcDesc',
    store: storeServiceCodeVar,
    valueField:'srvcCD',
    id:'serviceCodeId',
    name:'serviceCodeName',
    queryMode: 'remote',
    queryDelay:100,
    typeAhead: true,
    minChars:0,
    hideTrigger:true,
    forceSelection:true,
    maxHeight:23,
    deferEmptyText:false,
    autoSelect:true,
    fieldStyle:'text-transform:uppercase',
    listConfig: {
        loadingText: 'Loading...',
        // Custom rendering template for each item
        getInnerTpl: function() {
            return '<table width="200px"><tr><td height="5"></td></tr><tr valign="top"><td>Code:{srvcCD}</td></tr><tr><td height="2"></td></tr><tr valign="top"><td>Description:{srvcDesc}</td></tr><tr><td height="5"></td></tr></table>';
        },
        emptyText:'No Values Found'
    }
}

The issue is that when there is no data returned from the server, then emptyText (which has value - No values found) gets displayed for may be a millisecond and goes off. I want it to stay there till the next query if fired. How is it possible. I have tried with deferEmptyText but no luck.

Could someone throw some light on this. I am using ExtJS 4 and behavior is same in IE9 and Mozilla.

Thanks in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

违心° 2024-12-11 02:01:38

从单步查看源代码来看,似乎没有任何对 listConfig.emptyText 的引用用于确定是否将元素的高度设置为非零的数字。

我最终覆盖了 Ext.form.field.ComboBox 从 Ext.form.field.Picker 继承的 alignPicker() 函数,并添加了对 listConfig.emptyText 的检查>。

Ext.override(Ext.form.field.ComboBox, {

    alignPicker: function() {
        var picker, height;

        if (this.isExpanded) {
            // Get the picker component.
            picker = this.getPicker();

            if (this.matchFieldWidth) {
                // Set the default height to null, since we don't 
                // automatically want to have the height changed.
                height = null;

                // If our store exists, but the count is zero
                // and we've got no emptyText defined...
                if (picker.store && 
                    picker.store.getCount() === 0 && 
                    Ext.isEmpty(this.listConfig.emptyText)) {
                    // ...we set the height to zero. 
                    height = 0;
                }

                // Set the size of the picker component.
                picker.setSize(this.bodyEl.getWidth(), height);
            }

            if (picker.isFloating()) {
                this.doAlign();
            }
        }
    }

});

希望这有帮助!

From stepping through the source, it doesn't seem like there is any reference to the listConfig.emptyText being used to determine whether or not to set the element's height to a number other than zero.

I've ended up overriding the alignPicker() function which Ext.form.field.ComboBox inherits from Ext.form.field.Picker, and adding a check for listConfig.emptyText.

Ext.override(Ext.form.field.ComboBox, {

    alignPicker: function() {
        var picker, height;

        if (this.isExpanded) {
            // Get the picker component.
            picker = this.getPicker();

            if (this.matchFieldWidth) {
                // Set the default height to null, since we don't 
                // automatically want to have the height changed.
                height = null;

                // If our store exists, but the count is zero
                // and we've got no emptyText defined...
                if (picker.store && 
                    picker.store.getCount() === 0 && 
                    Ext.isEmpty(this.listConfig.emptyText)) {
                    // ...we set the height to zero. 
                    height = 0;
                }

                // Set the size of the picker component.
                picker.setSize(this.bodyEl.getWidth(), height);
            }

            if (picker.isFloating()) {
                this.doAlign();
            }
        }
    }

});

Hope this helps!

夜未央樱花落 2024-12-11 02:01:38

这里有一句警告。我使用的是 ExtJs 4-0-6,似乎现在 Ext.form.field.ComboBox 中有一些代码,并且它不再仅仅依赖于从 Ext 继承方法。 field.form.Picker。

因此,上面的代码现在应该直接覆盖 Ext.field.form.Picker 中的代码,而不是 ComboBox 中的代码。

但不可否认的是,希望 Sencha 很快就能在 4.1 中自行修复这个问题。

A word of warning here. I'm on ExtJs 4-0-6 and it seems that there is now some code in Ext.form.field.ComboBox and it no longer just relies on inheriting the method from Ext.field.form.Picker.

So, instead the above code should now override the code directly in Ext.field.form.Picker rather than in the ComboBox.

But admittedly, hopefully Sencha will fix this themselves soon in 4.1.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文