PDA

View Full Version : How to catch children's itemclick in Ext.view.View



Ex_Soft
28 Feb 2012, 2:47 PM
Ext.onReady(function() {
Ext.define("TestJsonModelParent", {
extend: "Ext.data.Model",
idProperty: "id",
fields: [
{ name: "id", type: "int" },
{ name: "name" }
],
hasMany: {
model: "TestJsonModelChild",
name: "children"
},

proxy: {
type: "memory",
reader: {
type: "json",
root: "rows"
}
}
});

Ext.define("TestJsonModelChild", {
extend: "Ext.data.Model",
idProperty: "id",
fields: [
{ name: "id", type: "int" },
{ name: "name" }
],

belongsTo: "TestJsonModelParent"
});

var
store = Ext.create("Ext.data.Store", {
model: "TestJsonModelParent"
}),
data={
"success" : true,
"total": 4,
"rows": [
{
"id": 1,
"name": "Record# 1",
"children": [
{ "id": 11, "name": "Record# 11" },
{ "id": 12, "name": "Record# 12" },
{ "id": 13, "name": "Record# 13" },
{ "id": 14, "name": "Record# 14" }
]
},
{
"id": 2,
"name": "Record# 2",
"children": [
{ "id": 21, "name": "Record# 21" },
{ "id": 22, "name": "Record# 22" },
{ "id": 23, "name": "Record# 23" },
{ "id": 24, "name": "Record# 24" }
]
}
]
},
tpl = new Ext.XTemplate(
"<tpl for=\".\">",
"<div class=\"itemSelector\">",
"<dl>",
"<dt><dfn>{id} {name}</dfn></dt>",
"<tpl for=\"children\">",
"<dd>{id} {name} (parent {parent.name})</dd>",
"</tpl>",
"</dl>",
"</div>",
"</tpl>"
);

store.loadRawData(data, false);

Ext.create("Ext.view.View", {
store: store,
tpl: tpl,
itemSelector: "div.itemSelector",
renderTo: Ext.getBody(),
listeners: {
itemclick: function(view, record, item, index, e, eOpts) {
if(window.console && console.log)
console.log("Ext.view.View.itemclick(%o)", arguments);
}
}
});
});

parent is passed in listener

mitchellsimoens
28 Feb 2012, 5:39 PM
Do you only want the children to be clickable? In this example, itemclick won't do it for you.

Ex_Soft
29 Feb 2012, 4:57 AM
Ext.create("Ext.view.View", {
store: store,
tpl: tpl,
itemSelector: "div.itemSelector",
renderTo: Ext.getBody(),
listeners: {
click: {
element: "el",
fn: function(e, t) {
e.stopEvent();

if(window.console && console.log)
console.log("%s click", t.id);
},
options: {
delegate: "dd"
}
}
}
});

keltik
14 Feb 2016, 5:10 AM
Ext.create("Ext.view.View", {
store: store,
tpl: tpl,
itemSelector: "div.itemSelector",
renderTo: Ext.getBody(),
listeners: {
click: {
element: "el",
fn: function(e, t) {
e.stopEvent();

if(window.console && console.log)
console.log("%s click", t.id);
},
options: {
delegate: "dd"
}
}
}
});


Dude you saved my day. Free beer for you.