Ext.define('GB.view.DigestList',{
extend: 'Ext.panel.Panel',
alias:'widget.digestlist',
items:[ {
xtype:'dataview',
store: 'GB.store.Digests',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="container">',
'{name}',
'<div class="davidfun"></div>',
'</div>',
'</tpl>'
),
listeners: {
viewready: function(){
var home_d = Ext.create('GB.view.MyOwnDigest');
home_d.render(Ext.query('.davidfun')[0]);
// home_d.render(Ext.getBody()); <- it'll work fine with this line
},
}
}],
bind: function(record, store) {
this.getComponent(0).bindStore(record);
}
});
Ext.define('GB.store.Digests', {
extend:'Ext.data.Store',
model: 'GB.model.Digest',
data:[
{'name':'name111'},
{'name':'name222'}
]
});
Does someone know why can't i get div class which is "davidfun" that in Xtemplate by Ext.query('.davidfun')[0],
it'll always show 'undefined', thanks for your response first:)
Code UPDATE:
Problem resolved!
You can try the "viewready" event of the dataview.
See my example http://jsfiddle.net/2huvt/
Related
I am trying to render a table in dataview. Everything is working fine but the tpl renderes twice:
First: the tpl content loaded along with the data
Second: the tpl alone is rendered without any data
I found out that this question was already asked for a different version here. But there was no relevant answer to solve this issue.ExtJS tpl renders twice
{
xtype: 'dataview',
scrollable: true,
itemSelector: 'tr',
data: [{
selCodeType: 'selCodeType',
codeTypeMnc: 'codeTypeMnc'
}, {
selCodeType: 'selCodeType',
codeTypeMnc: 'codeTypeMnc'
}],
tpl: ['<table><thead>',
'<th>Select Code Type</th>',
'<th>Code Type MNC</th>',
'</thead>',
'<tbody>',
'<tpl for=".">',
'<tr>',
'<td>selCodeType</td>',
'<td>codeTypeMnc</td>',
'</tr>',
'</tpl>',
'</tbody></table>']
}
Outcome of the above code
I have tried itemTpl as well. But no luck. It would be helpful if anyone point me what I am doing wrong here.
Thank you
You must use a store instead of data with dataviews:
{
xtype: 'dataview',
scrollable: true,
itemSelector: 'tr',
store: {
data:[{
selCodeType: 'selCodeType',
codeTypeMnc: 'codeTypeMnc'
}, {
selCodeType: 'selCodeType',
codeTypeMnc: 'codeTypeMnc'
}]},
tpl: ['<table><thead>', '<th>Select Code Type</th>', '<th>Code Type MNC</th>', '</thead>', '<tbody>', '<tpl for=".">', '<tr>', '<td>selCodeType</td>', '<td>codeTypeMnc</td>', '</tr>', '</tpl>', '</tbody></table>']
}
Working example: https://fiddle.sencha.com/#fiddle/18th
I have an Ext ComboBox where the user should be able to choose no value. ExtJS doen't support that out of the box.
What I've tried:
use a second trigger that clears the value
Works but is not very usable. I want a better solution.
add "fake" null item to store:
While this does kind of work I would have to modify the model for that to allow null value for id. And this looks more like a hack.
set custom tpl like
'<ul class="x-list-plain">',
'<li role="option" unselectable="on" class="x-boundlist">(no selection)</li>',
'<tpl for=".">',
'<li role="option" unselectable="on" class="x-boundlist-item">{name}</li>',
'</tpl>',
'</ul>'
But now it's getting really difficult, now idea how to get that working properly.
jsfiddle:
http://jsfiddle.net/q5e3J/1/
with custom tpl: http://jsfiddle.net/q5e3J/2/
Please refer this link How to add an empty item to ExtJS combobox?
Update: jsfiddle with that solution implemented: http://jsfiddle.net/q5e3J/3/
var combo = Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
displayField: 'name',
valueField: 'abbr',
value: 'AL',
store: Ext.create('Ext.data.Store', {
model: 'State',
data: states
}),
queryMode: 'local',
editable: false,
emptyText: 'No Selection',
listConfig: {
tpl: '<div class="my-boundlist-item-menu">No Selection</div>'
+ '<tpl for=".">'
+ '<div class="x-boundlist-item">{name}</div></tpl>',
listeners: {
el: {
delegate: '.my-boundlist-item-menu',
click: function() {
combo.clearValue();
}
}
}
}
});
You could use the "change" listener on the combo config and check for null values:
change: function() {
if (this.getValue() === null) {
// Set default Value here
}
};
I try to define a dataview from http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.view.View to http://jsfiddle.net/JtTDH/
Here is my code
Ext.define('Example', {
extend: 'Ext.view.View',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
),
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
initComponent: function() {
var store = Ext.create('Ext.data.Store', {
id:'imagesStore',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
],
data: [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
]
});
this.store = store;
this.callParent(arguments);
}
});
I think that's correct but that's not working. How to fix that thank.
Your code is fine, but you need to define a rendering target for it. For example, you could add renderTo: Ext.getBody() to your definition, and it will work correctly. See a working example here: https://fiddle.sencha.com/#fiddle/md
I am having trouble adding a listener to different elements generated from an XTemplate.
var data = {
users: [
{ id: 1, name: 'Ed Spencer' },
{ id: 2, name: 'Abe Elias'}
]
};
var store = new Ext.data.JsonStore({
autoLoad: true,
data : data,
root: 'users',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
var template = new Ext.XTemplate(
'<tpl for=".">',
'<div class="holder">',
'<div class="notclicked">foobar</div>',
'<div class="name">{name}</div>',
'<div class="id">{id}</div>',
'</div>',
'</tpl>'
);
var newPanel = new Ext.Panel({
title: "test",
items: new Ext.DataView({
store: store,
tpl: template,
itemSelector: 'div.holder',
emptyText: 'No foo to display'
})
});
newPanel.render('targetDiv');
What I would like do is make a 'click' listener for clicks on the "name" div and a different one for the "id" div. But so far I can only make a 'click' listener for the who "holder" div. As an extention, I'd like the div 'notclicked'... to not respond to clicks. I've been racking against this a while. Can anyone give me a push in the right direction?
I'm using 3.4. I've put a fiddle on jsfiddle: http://jsfiddle.net/tatagatha/7SfCf/6/
use 'delegate' with a tight selector
http://www.sencha.com/blog/event-delegation-in-sencha-touch
Well looks like 3.4 had no delegation of events yet.
So you would have to manually check which node was clicked:
here is your fiddle back with selction working.
http://jsfiddle.net/dbrin/R29U5/
This goes on dataview:
listeners: {
click: {
fn: this.onClick,
scope: this
}
},
onClick: function(event, item, options) {
console.log(arguments);
if (item.className === "id") {
console.log("Id clicked: " + item.innerHTML);
alert("ID clicked: " + item.innerHTML);
}
}
I have the following JS:
http://monobin.com/__m1c171c4e
and the following code:
Code:
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{Name}">',
'<div class="thumb"><img src="{ImageMedium}" title="{Name}"></div>',
'<span class="x-editable">{Name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var store = new Ext.data.ArrayStore({
fields: [{ name: 'name' }, { name: 'ImageMedium'}],
data: res.data.SimilarArtists
});
var panel = new Ext.Panel({
frame: true,
width: 535,
autoHeight: true,
collapsible: true,
layout: 'fit',
title: 'Simple DataView (0 items selected)',
items: new Ext.DataView({
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
overClass: 'x-view-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display',
prepareData: function (data) {
data.Name = Ext.util.Format.ellipsis(data.Name, 15);
return data;
},
plugins: [
new Ext.DataView.DragSelector(),
new Ext.DataView.LabelEditor({ dataIndex: 'name' })
],
listeners: {
selectionchange: {
fn: function (dv, nodes) {
}
}
}
})
});
So binding the DataView to the child array of res.data.SimilarArtists
But nothing seems to happen?
prepareData doesnt even get called?
What am i doing wrong?
w://
The data structure you've linked to is JSON, not array data. Try switching to a JsonStore instead. Note that a JsonStore is preconfigured with a JsonReader and an HttpProxy (remote data source) and is intended for loading the data from a url. If you need JSON loaded from local data, then you'll have to create a generic store with a JsonReader and MemoryProxy.