PDA

View Full Version : Event not fired again when click inside ExtJS 4.2.2 text input field.



xjscrafter
3 Oct 2014, 10:15 AM
In the below ExtJS 4.2.2 code, you can click repeatedly on the "Search" and "Show Label" controls, and the label "here is the text" will toggle visible/hidden.

But if you click in the search text input field, the label is only hidden the first time you click there. If you then click "Show Label" to once again display the label, and then again click the search text input field, the label if not hidden.


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'
}]
});
}
});
});

carol.ext
3 Oct 2014, 10:37 AM
Looks like you've got a "single: true" on the click handler.



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

xjscrafter
6 Oct 2014, 11:33 AM
That was it. Thanks very much!