Question

我正在使用ExtJS 3.3.0，我想要禁用保存按钮，直到组合框中有值。

我正在创建这样的组合框;

new Ext.form.ComboBox({
    id: this.idName + 'Combo_StateID',
    name: 'StateID',
    fieldLabel: 'State',
    singleOnly: true,
    typeAhead: true,
    triggerAction: 'all',
    store: StateStore,
    mode: 'remote',
    valueField: 'StateID',
    hiddenField: 'StateID',
    displayField: 'StateNumber',
    lazyInit: false,
    listClass: 'x-combo-list-small',
    tpl: '<tpl for=\".\"><div class=\"x-combo-list-item\"><span style=\"width: 50px;\">#{StateNumber}</span></div></tpl>',
}), " ) . "

我只是按这样创建按钮;

newPanel.addButton(
    {   
        iconCls:'icon-ok',
        text: 'Save Data'
    }
)

一切正常。但是禁用按钮我完全搞不清楚。

我尝试了以下内容，但仍然没有;

listeners: {
afterrender: function() {
  if (this.getValue() === null) {
    Ext.getCmp('yourButton').setDisabled(true);
      }
   else {
       Ext.getCmp('yourButton').setDisabled(false);
        }
    }
}

非常感谢任何帮助

Answer 1

当您使用 afterrender 时，它将在组件渲染完成后触发。

尝试使用ExtJS Combobox

的选择方法

我创建了一个演示。你可以在这里查看它是如何工作的Sencha fiddle

Ext.onReady(function () {
    var PanelMain = Ext.extend(Ext.Panel, {
            title: 'My Panel',
            initComponent: function () {
                Ext.applyIf(this, {
                    items: [{
                        xtype: 'combo',
                        typeAhead: true,
                        triggerAction: 'all',
                        lazyRender: true,
                        mode: 'local',
                        store: new Ext.data.ArrayStore({
                            id: 0,
                            fields: [
                                'myId',
                                'displayText'
                            ],
                            data: [
                                [1, 'item1'],
                                [2, 'item2']
                            ]
                        }),
                        valueField: 'myId',
                        displayField: 'displayText',
                        editable: false,
                        listeners: {
                            select: function (combo, record) {
                                Ext.getCmp('saveButton').setDisabled(false);
                            }
                        }
                    }, {
                        xtype: 'button',
                        id: 'saveButton',
                        iconCls: 'icon-ok',
                        disabled: true,
                        text: 'Save Data',
                        handler: function () {
                            //here you can put your logic..
                        }
                    }]
                });
                PanelMain.superclass.initComponent.call(this);
            }
        }),
        panel = new PanelMain({
            renderTo: Ext.getBody()
        });

});

ExtJS 3.3.0禁用保存按钮，直到组合框具有值

1 个答案: