Question

在下面的ExtJS 4.2.2代码中，您可以反复点击＆＃34;搜索＆＃34;和＆＃34;显示标签＆＃34;控件和标签＆＃34;这里是文字＆＃34;将切换可见/隐藏。

但是，如果您单击搜索文本输入字段，则只有在您第一次单击该标签时才会隐藏该标签。如果您然后单击＆＃34;显示标签＆＃34;再次显示标签，然后再次单击搜索文本输入字段，标签如果没有隐藏。

Ext.define('MyToolbar', {
    extend: 'Ext.grid.feature.Feature',
    alias: 'feature.myToolbar',
    requires: ['Ext.grid.feature.Feature'],
    width: 160,

    init: function () {
        if (this.grid.rendered)
            this.onRender();
        else{
            this.grid.on('render', this.onRender, this);
        }
    },

    onRender: function () {
        var panel = this.toolbarContainer || this.grid;
        var tb = panel.getDockedItems('toolbar[dock="top"]');
        if (tb.length > 0)
            tb = tb[0];
        else {
            tb = Ext.create('Ext.toolbar.Toolbar', {dock: 'top'});
            panel.addDocked(tb);
        }
        this.createSearchBox(tb);
    },

    createSearchBox: function (tb) {
        tb.add({
            text: 'Search',
            menu: Ext.create('Ext.menu.Menu'),
            listeners: {
                click: function(comp) {
                    MyApp.app.fireEvent('onGridToolbarControlClicked', comp);
                }
            }
        });

        this.field = Ext.create('Ext.form.field.Trigger', {
            width: this.width,
            triggerCls: 'x-form-clear-trigger',
            onTriggerClick: Ext.bind(this.onTriggerClear, this)
        });

        this.field.on('render', function (searchField) {
            this.field.inputEl.on('click', function() {
                MyApp.app.fireEvent('onGridToolbarControlClicked', searchField);
            }, this, {single: true});
        }, this, {single: true});

        tb.add(this.field);
    }
});

Ext.define('MyPage', {
    extend: 'Ext.container.Container',
    alias: 'widget.myPage',
    flex: 1,

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'container',
                layout: {
                    type: 'vbox',
                    align: 'middle'
                },
                items: [{
                    xtype: 'button',
                    text: 'Show Label',
                    handler: function(comp) {
                        comp.up('myPage').down('label').setVisible(true);
                    }
                },{
                    xtype: 'label',
                    itemId: 'testLbl',
                    text: 'here is the text'
                },{
                    xtype: 'gridpanel',
                    width: 250,
                    height: 150,
                    store: Ext.create('Ext.data.Store', {
                        fields: ['name'],
                        data: [
                            {name: 'one'},
                            {name: 'two'},
                            {name: 'three'}
                        ]
                    }),
                    columns: [{
                        text: 'Text',
                        flex: 1,
                        dataIndex: 'name'
                    }],
                    features: [{
                        ftype: 'myToolbar'
                    }]
                }]
            }]
        });

        me.callParent(arguments);

        MyApp.app.on({onGridToolbarControlClicked: function(comp) {
            if('function' == typeof comp.up && !Ext.isEmpty(comp.up('myPage')) &&
                'function' == typeof comp.up('myPage').down &&
                !Ext.isEmpty(comp.up('myPage').down('label'))) {
                comp.up('myPage').down('label').setVisible(false);
            }
        }});
    }
});

Ext.onReady(function() {
    Ext.application({
        name: 'MyApp',
        launch: function() {
            Ext.create('Ext.container.Viewport', {
                renderTo: Ext.getBody(),
                width: 700,
                height: 500,
                layout: 'fit',
                items: [{
                    xtype: 'myPage'
                }]
            });
        }
    });
});

Answer 1

这里

 this.field.inputEl.on('click', function() {
            MyApp.app.fireEvent('onGridToolbarControlClicked', searchField);
        }, this, {single: false});

而不是代码中的{single:true}。 onRender是单一的，onClick - （在你的情况下）不是。

为什么在ExtJS 4.2.2文本输入字段内单击时不会再次触发事件

1 个答案: