PDA

View Full Version : Add click listener



westvovik
15 Apr 2010, 10:12 PM
How to add to the tag id="abc" of the listener of click, help me please

tpl: '<tpl for="."><div class="x-combo-list-item ux-icon-combo-item">{' + this.displayField + '}</div><a id="abc">click 1</a></tpl>'
:-/:((

swarnendude
15 Apr 2010, 10:43 PM
If you are creating a number of elements within that for loop, then how can you give a single id to each of them. I'd suggest you to put a class for each of the links and put a listener on that class.

tubamanu
15 Apr 2010, 10:47 PM
Ext.onReady(function(){
var component = Ext.get('abc');
component.on('click', function(component) {
// do some action
});
});

tubamanu
15 Apr 2010, 10:59 PM
Ext.onReady(function(){
var component = Ext.get('abc');
component.on('click', function(component) {
alert(component);
});
});

Animal
16 Apr 2010, 12:01 AM
Slow down here!

A little thought about that code snippet would indicate that the OP is in fact withholding a lot of info, and has his head down in the DOM details too much.

He appears to be creating a ComboBox template.

Which indicates that there's more to this requirement than he's letting on.

So. @OP: What is the UI requirement that you are trying to solve?

westvovik
16 Apr 2010, 12:16 AM
The code example as it to make basically is necessary to me, and I will complete the rest

swarnendude
16 Apr 2010, 12:20 AM
The code example as it to make basically is necessary to me, and I will complete the rest

Can you tell me what exactly are you looking for? Your question is still not clear to me.

westvovik
16 Apr 2010, 12:27 AM
I wish to create combobox, that at list opening near to each unit there was a picture with possibility to press it, how to add in combobox this event?

swarnendude
16 Apr 2010, 12:36 AM
with possibility to press it

Do you want to run a different event on clicking that image other than basic combobox field select event?

Animal
16 Apr 2010, 12:36 AM
http://www.extjs.com/deploy/dev/docs/?class=Ext.form.ComboBox&member=view

http://www.extjs.com/deploy/dev/docs/?class=Ext.DataView&member=click

westvovik
16 Apr 2010, 12:38 AM
Do you want to run a different event on clicking that image other than basic combobox field select event?

Yes

westvovik
16 Apr 2010, 12:40 AM
please, change the code


App.hotels.ComboBox = Ext.extend(Ext.form.ComboBox, {
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
initComponent:function() {
this.but = new Ext.Element(document.createElement('div'), {id:'abc'});
Ext.apply(this, {
tpl: '<tpl for="."><div class="x-combo-list-item ux-icon-combo-item {' + this.iconClsField + '}">{' + this.displayField + '}</div><a id="abc"></a></tpl>' ,
});

// call parent initComponent
App.hotels.ComboBox.superclass.initComponent.call(this);
},
initEvents : function(){
App.hotels.ComboBox.superclass.initEvents.call(this);
},
onRender: function(){
App.hotels.ComboBox.superclass.onRender.apply(this, arguments);
}
});
Ext.reg("iconcombo", App.hotels.ComboBox);

Animal
16 Apr 2010, 12:54 AM
That would be doing your job for you, and you would learn what from it?

Add a click listener to the view. We'll help, but write the code yourself.

westvovik
16 Apr 2010, 4:02 AM
That would be doing your job for you, and you would learn what from it?

Add a click listener to the view. We'll help, but write the code yourself.

Ok


App.hotels.ComboBox = Ext.extend(Ext.form.ComboBox, {
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
initComponent:function() {
Ext.apply(this, {
tpl: '<tpl for="."><div class="x-combo-list-item ux-icon-combo-item {' + this.iconClsField + '}">{' + this.displayField + '}</div><a id="abc">click1</a></tpl>' ,
view: new Ext.DataView({
listeners:{
click: function (View, index, node, e ) {
alert('this is work');
}
}
})
});
App.hotels.ComboBox.superclass.initComponent.call(this);
}
});

Well, here on idea this code should work, what not so here

Animal
16 Apr 2010, 4:56 AM
"view" is a property supplied by the ComboBox (as implied by the fact that it is listed as a property in the API docs). IT creates it.

This will be needed: http://www.extjs.com/deploy/dev/docs/?class=Ext.form.ComboBox&member=lazyInit

westvovik
16 Apr 2010, 6:28 AM
I have solved the given task as follows


App.hotels.ComboBox = Ext.extend(Ext.form.ComboBox, {
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.SimpleStore({
fields: ['countryCode', 'countryName', 'countryFlag'],
data: [
['US', 'United States'],
['DE', 'Germany'],
['DE', 'Germany'],
['FR', 'France']
]
}),
valueField: 'countryCode',
displayField: 'countryName',
initComponent:function() {
Ext.apply(this, {
tpl: '<tpl for="."><table width="100%"><tr><td class="x-combo-list-item ux-icon-combo-item">{' + this.displayField + '}</td><td id="{'+ this.valueField +'}" style="width:8px" class="x-combo-list-item ux-icon-combo-item">x</td></tr></table></div></tpl>',
});
App.hotels.ComboBox.superclass.initComponent.call(this);
},
initList: function() {
App.hotels.ComboBox.superclass.initList.call(this);
this.view.on('click', function(view, index, node, e) {
console.log(view.all.elements[index].id);
});
}
});
Ext.reg("iconcombo", App.hotels.ComboBox);

But, there was a strange error, at list opening there are 4 units, by pressing 2 upper list normally selects value and is closed, but if I select 2 lower values, the list is not closed also values are not selected

Animal
16 Apr 2010, 6:49 AM
Well that's not solved strictly is it?

You have the listener firing whenever anything on the dropdown is clicked.

You now need to examine the target of the event, and see if it is the element you wish to be sensitive to clicks. You will have to give that element a certain class. You have unaccountably given both <td> elements exactly the same class names, so you won't be able to tell them apart in the click handler.

westvovik
16 Apr 2010, 7:38 AM
If I do different names of classes in cells


<tpl for="."><table width="100%"><tr><td class="x-combo-list-item">{' + this.displayField + '}</td><td id="{'+ this.valueField +'}" style="width:8px" class="x-combo-list-item-id">x</td></tr></table></tpl>I cannot already press a cell with X

And it is necessary for me as that to define what cell was pressed by the user, accordingly should be different node

p.s. Unfortunately I not so well know English

Animal
16 Apr 2010, 9:44 AM
Add a class name to the cell you want to be clickable.

Then, in your listener, check whether the events target has that class. That's the easiest way. You could though just check whether it matches the selector "td:nth-child(1)"

westvovik
16 Apr 2010, 10:00 AM
I not absolutely understand you, it is necessary for me that it was possible to press any of two cells, and a class x-combo-list-item, I can add as I have understood only to one cell

steffenk
16 Apr 2010, 3:34 PM
isn't it more simple to direct delegate the click listender? something like

this.view.el.on({
'click': {
delegate: 'x-combo-list-item-id',
fn:function(event, item) {}
}
});

westvovik
16 Apr 2010, 10:53 PM
isn't it more simple to direct delegate the click listender? something like

this.view.el.on({
'click': {
delegate: 'x-combo-list-item-id',
fn:function(event, item) {}
}
});

This code does not work, probably to me it is necessary as that to change tpl for this purpose?

I have correctly understood that the class for each unit should be the and that combobox I worked correctly should one key unit set a class x-combo-list-item?

steffenk
17 Apr 2010, 1:21 AM
may be because it's a td. Try to use something like <span class="myxtoclick">X</span> and use this class.

westvovik
17 Apr 2010, 1:27 AM
may be because it's a td. Try to use something like <span class="myxtoclick">X</span> and use this class.


initComponent:function() {
Ext.apply(this, {
tpl: '<tpl for="."><span class="x-combo-list-item">{' + this.displayField + '}</span><span class="edit">x</span></tpl>',
});
App.hotels.ComboBox.superclass.initComponent.call(this);
},
initEvents: function() {
App.hotels.ComboBox.superclass.initEvents.call(this);
console.log(this.view.el);
this.view.el.on({
'click': {
delegate: 'edit',
fn:function(event, item) {
console.log(event); console.log(item);

}
}
});
}

this is not work

steffenk
17 Apr 2010, 2:00 AM
may be at wrong place because it's not rendered there. move it to onRender or after Render or something where component is rendered. Debug! You'll see which element is there, which class etc.

westvovik
17 Apr 2010, 2:35 AM
may be at wrong place because it's not rendered there. move it to onRender or after Render or something where component is rendered. Debug! You'll see which element is there, which class etc.

like this


initComponent:function() {
Ext.apply(this, {
tpl: '<tpl for="."><span class="x-combo-list-item">{' + this.displayField + '}</span><span class="edit">x</span></tpl>',
});
App.hotels.ComboBox.superclass.initComponent.call(this);
},
initEvents: function() {
App.hotels.ComboBox.superclass.initEvents.call(this);
this.on('afterrender', function(combo) {
combo.view.el.on({
'click': {
delegate: 'edit',
fn:function(event, item) {
console.log(event); console.log(item);
}
}
});
});
}This is not work too

I debug a code, but by pressing the list combo.view.el have object dom: [span.x-combo-list-item, span.edit, span.x-combo-list-item, 5 more...]

Why then does not work?

steffenk
17 Apr 2010, 2:42 AM
looks like a wild guess ;) you are inside initEvents. Move the listener to the right event. Debug this.view.el.

westvovik
17 Apr 2010, 4:07 AM
looks like a wild guess ;) you are inside initEvents. Move the listener to the right event. Debug this.view.el.

Into what function to insert write please, I tried to insert a code in onRender, but it all the same does not work, I at all do not understand, if inside view.el there are objects why does not work event?

Animal
17 Apr 2010, 4:31 AM
I've no idea what the OP actually wants to DO.

I mean there's already a select event on ComboBoxes, so you can click on an item and get notified that it has been selected.

steffenk
17 Apr 2010, 4:36 AM
I'm also out of ideas. There are enough events provided by Combobox, never needed to add such.

westvovik
17 Apr 2010, 4:36 AM
Well help me to solve already this problem, very much you I ask, I am engaged 3 days in it.

It already simply does not give rest to me

steffenk
17 Apr 2010, 4:43 AM
you ever tried the existing?
http://www.extjs.com/deploy/dev/docs/?class=Ext.form.ComboBox&member=select

westvovik
17 Apr 2010, 4:54 AM
I use the documentation and very much even is frequent, I do not understand than I can be helped by event select

Really it is impossible as that to explain more well, this forum is created for the help in extjs, well if you know decisions lay out it, I am assured it will help many people

westvovik
17 Apr 2010, 7:03 AM
initComponent:function() {
Ext.apply(this, {
tpl: '<tpl for="."><table width="100%"><tr><td class="x-combo-list-item">{' + this.displayField + '}</td><td id="{'+ this.valueField +'}" style="width:8px;" class="edit-id">x</td></tr></table></tpl>',
});
App.hotels.ComboBox.superclass.initComponent.call(this);
},
onRender: function(ct, position) {
App.hotels.ComboBox.superclass.onRender.call(this, ct, position);
this.view.el.on({
'click': {
delegate: 'td.edit-id',
fn:function(event, item, obj) {
console.log(item);
console.log(obj);
}
},
});
},Here this code works, simply I have added a tag before the class name.
But how me now to receive id this unit?

i have in debug

item : <td id="edit***" class="edit-id" style="width: 8px;">
obj: Object { delegate="td.edit-id"}

obj has no more what properties, only delegate

Animal
17 Apr 2010, 8:08 AM
Ask the view which Record

http://www.extjs.com/deploy/dev/docs/?class=Ext.DataView&member=getRecord

It's all interconected.