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.
Related
I am trying to test against a combobox value from inside dataview's tpl:
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
items: [
{
xtype: 'combo',
name: 'my_combo',
},
{
xtype: 'dataview',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="this.test()">pass</tpl>',
'</tpl>'
,
{
test: function(){
//doesn't work
return this.getView().down('[name=my_combo]').getValue() == 'ok';
}
}),
}
]
});
This doesn't work because this is referencing to the template itself and I can't figure out how to access the view from the inside.
It is not possible to access a view in XTemplate. To achieve this you can use ViewModel, here is the code for it.
And working sencha fiddle https://fiddle.sencha.com/#fiddle/175s
Update: I updated the code to use the DataView, DataView is little tricky, i overwritten the prepareData method to pass in extra information to the template and also updating the DataView whenever the combo value is changed. Here is the fiddle with updated changes https://fiddle.sencha.com/#fiddle/175s
Ext.define('MyApp.MyPanel', {
extend: 'Ext.Panel',
xtype: 'myForm',
defaults: {
padding: 10
},
viewModel: {
stores: {
employeeStore: {
fields: ['name'],
data: [{
name: 'John'
}, {
name: 'Tempel'
}, {
name: 'George'
}, {
name: 'Milinda'
}]
},
}
},
items: [
{
xtype: 'combobox',
fieldLabel: 'Name',
name: 'nameField',
queryMode: 'local',
displayField: 'name',
valueField: 'name',
reference: 'emp',
bind: {
store: '{employeeStore}',
value: '{name}'
}
},{
xtype: 'dataview',
itemId: 'empList',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="dataview-multisort-item">',
'<h3>{name}</h3>',
'<tpl if="passed">Selected</tpl>',
'</div>',
'</tpl>'
),
itemSelector: 'div.dataview-multisort-item',
bind: {
store: '{employeeStore}'
},
prepareData: function(data, index, record) {
var name = this.up().getViewModel().get('name');
var passed = record.get('name') == name;
return Ext.apply({passed: passed}, data);
}
}
],
initComponent: function() {
this.callParent(arguments);
var me = this;
// refresh the dataview when name is changed.
this.getViewModel().bind('{name}', function() {
var dataview = me.down('#empList');
dataview.refresh();
});
}
});
I have an extjs dataview:
var dv = Ext.create('Ext.view.View', {
store: this.eventInstanceImagesStore,
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name:stripTags}">',
'<div class="thumb"><img src="http://stimages.blob.core.windows.net/medium/{value}" title="{name:htmlEncode}"></div>',
'<span class="x-editable">{shortName:htmlEncode}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
multiSelect: true,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display',
plugins: [
// Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'name' })
],
prepareData: function (data) {
Ext.apply(data, {
shortName: Ext.util.Format.ellipsis(data.name, 15),
sizeString: Ext.util.Format.fileSize(data.size),
dateString: Ext.util.Format.date(data.lastmod, "m/d/Y g:i a")
});
return data;
}
});
I also have a file upload form which, when the image has been successfully uploaded I am reloading the dataview:
dv.store.reload({
params: {
id: eid
}
});
However, when the reload happens it seems to re-add the images twice. So I end up with 2 dataviews... Has anyone seen this before?
Try doing dv.store.removeAll(); first before doing a
dv.store.reload({
params: {
id: eid
}
});
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 has a question for Sencha Touch2? why the dataView don't display?Thanks a lot
This is the model file,app/model/Worklist.js
Ext.define('Geo.model.Worklist', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'url', type: 'string'}
]
}
});
this is the store file,
app/store/Worklist.js
/**
* this is the store file,
* app/store/Worklist.js
*/
Ext.define('Geo.store.Worklist',{
extend: 'Ext.data.Store',
config: {
model: 'Geo.model.Worklist',
autoLoad: true,
data:[
{name:'book1',url:'images/html51.jpg'},
{name:'book2',url:'images/html52.jpg'},
{name:'book3',url:'images/html53.jpg'},
{name:'book4',url:'images/html54.jpg'},
{name:'book5',url:'images/html55.jpg'}
]
}
});
this is the view file,
app/view/dashboard/Show.js
/**
* this is the view file,
* app/view/dashboard/Show.js
*/
Ext.define('Geo.view.dashboard.Show', {
extend: 'Ext.DataView',
xtype: 'dashboard-show',
//fullscreen: true,
scrollable: 'vertical',
store: 'Worklist',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="font-size:12px;">',
'<img src="{url}" titel="{name}"><br />',
'{name}',
'</div>',
'</tpl>'
)
});
/**
* Main Controller file,Application.js
*/
config: {
refs: {
main: 'mainview',
editButton: '#editButton',
dashboards: 'dashboards',
showDashboard: 'dashboard-show',
editDashboard: 'dashboard-edit',
saveButton: '#saveButton'
}
}
var workStore = Ext.create('Geo.store.Worklist');
this.showDashboard = Ext.create('Geo.view.dashboard.Show');
this.showDashboard.setStore(workStore);
this.getMain().push(this.showDashboard);
I don't know why it can't display when i tap one of list item,anybody can help me?thanks a lot
I find the problem,i forget the config property in Geo.view.dashboard.Show
it should be like this
config:{
fullscreen: true,
scrollable: 'vertical',
store: 'Worklist',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="font-size:12px;">',
'<img src="{url}" titel="{name}"><br />',
'</div>',
'</tpl>'
)
}
thanks a lot
I'm tring to use ExtJS dataview (TPL)
but it does not working well. and I can not find any wrong..
anybody know what I do mistake?
Code :
var testPanel = new Ext.Panel({
border: true,
height: 400,
layout : 'fit',
items : [
{html : "Print me"}, // ! It print OK
new Ext.DataView({ // It does not show up!
store: this.store,
itemSelector: 'div.showme',
autoHeight: true,
tpl : new Ext.XTemplate(
'<div>HELLO</div>',
'<tpl for=".">',
'<div class="showme">',
'<div>{myData}</div>',
'</div>',
'</tpl>'
),
emptyText : 'No Data' // even not print this!
})],
store : new Ext.data.JsonStore({
url : '<?php echo url_for('test.php'); ?>', // It bring data ok.
fields : [
{name : 'myData'}
]
}),
redraw : function(para){
this.store.load({
params : {
para : para
}
})
}
});
Thank you!
there is no need to put the store on the panel, you should put the store directly on the dataview. In this line store: this.store, when you are creating the object this.store will be undefined.
new Ext.DataView({ // It does not show up!
store: new Ext.data.JsonStore({
url: '<?php echo url_for('
test.php '); ?>', // It bring data ok.
fields: [{
name: 'myData'
}]
}),
itemSelector: 'div.showme',
autoHeight: true,
tpl: new Ext.XTemplate(
'<div>HELLO</div>',
'<tpl for=".">',
'<div class="showme">',
'<div>{myData}</div>',
'</div>',
'</tpl>'),
emptyText: 'No Data' // even not print this!
});