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
}
});
Related
I have a backend, which returns a JSON, I load that into a store, it loads fine, then call a refresh on the view from the controller, and I always get the emptyText value of the view, template is not refeshing.
EDIT: It is working now! The below setup if functioning, the problem was how I used to lookup the view.
Controller:
showNotes: function(activityId) {
var me = this;
Ext.Ajax.request({
url: MyApp.Config.BASE_URL + '/someURL',
method: 'GET',
success: me.successGetNotes.bind(me),
failure: me.failureGetNotes
});
},
successGetNotes: function(result) {
var notesStore = this.getNotesStore(), //This gets me the store ok
publishersStore = this.getPublishersStore(),
data = Ext.JSON.decode(result.responseText);
notesStore.loadRawData(data.result.notes);
publishersStore.loadRawData(data.result.publishers);
this.getNotesPanel().refresh(); //this calls the refresh on the DataView ok
//TODO
},
Model:
Ext.define('MyApp.model.Note', {
extend: 'Ext.data.Model',
fields: [
'publisherId',
'text' ,
{
name: 'created',
type: 'date',
dateFormat: 'c'
}
]
});
Store:
Ext.define('MyApp.store.Notes', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Note',
alias: 'store.Notes',
storeId: 'Notes'
});
main view:
...
items: [
{
xtype: 'notes-panel',
//store: Ext.data.StoreManager.lookup('Notes'), NO!!!
store: 'Notes', //YES!
flex: 1
}
]
...
notes-panel:
Ext.define('MyApp.view.sections.notes.NotesPanel' ,{
extend: 'Ext.DataView',
alias: 'widget.notes-panel',
//deferInitialRefresh: false,
itemSelector: 'div.something',
tpl: new Ext.XTemplate(
// '<tpl for=".">',
// '<div class="something">',
// '<p>ID:{publisherId}</p>',
// '<p>{text}</p>',
// '<p>{created}</p>',
// '</div>'
// '</tpl>',
'<table width="100%" border="0">',
'<tpl for=".">',
'<div class = "something">',
'<tr><td width="85">ID:</td><td width="315">{publisherId}</td></tr>',
'<tr><td>Note:</td><td>{text}</td></tr>',
'</div>',
'</tpl>',
'<table>'
),
emptyText: 'No data available'
})
;
Example response:
{
"success": true,
"result": {
"publishers": [
{
"id": "009999",
"type": "xy",
"isReceipient": false,
"description": "xy"
},
{
"id": 45,
"type": "xy",
"isReceipient": true,
"description": "xy"
},
{
"id": 45,
"type": "xy",
"isReceipient": false,
"description": ""
}
],
"notes": [
{
"publisherId": "009999",
"text": "xy",
"created": "2014-02-23T18:24:06.074Z"
},
{
"publisherId": "45",
"text": "xy",
"created": "2014-02-23T18:24:06.074Z"
},
{
"publisherId": 45,
"text": "xy",
"created": "2014-02-23T18:24:06.074Z"
}
]
}
}
And another thing: I would also like to use publisherId in notes to print the publisher name and type, so I will need two store's data. I was thinking of loading the other store by lookup in the DataView, and getting the publisher that way. Is that feasible?
from Ext.DataView.itemSelector:
A simple CSS selector (e.g. div.some-class or span:first-child) that will be used to determine what nodes this DataView will be working with. The itemSelector is used to map DOM nodes to records. As such, there should only be one root level element that matches the selector for each record.
and like you can the in the example from DataView:
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
the class is under the tpl element, so I think in your example you need to create a div under the tpl node.
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
My json is as follow:
({
"status":"TRUE",
"message":"Words",
"data":[
{
"name":"paint",
"author":"snooky",
"word_id":"1",
"category":"Business",
"definitions":[
{
"rating":"Green",
"defintion":"to put color to in something",
"def_id":"1",
"example":null,
"author":"pit",
"is_favourite":"yesStar"
},
{
"rating":"Red",
"defintion":"this is a new definition of word paint.",
"def_id":"42",
"example":null,
"author":"bull",
"is_favourite":"noStar"
}
]
}
]
})
I am parsing this value and show it in tpl as shown below:
{
xtype: 'list',
store: 'words',
height: 140,
layout: 'fit',
scrollable: {
direction: 'vertical',
directionLock: true,
},
margin: '0 0 5px 0',
itemTpl: [
'<div>',
'<tpl for="data">',
'<ul class="parabox">',
'<li><h2><b>{name}</b></h2>',
'<tpl for="definitions">',
'<ul class="para-box-wrapper">',
'<li class="{rating}"><div >',
'<div class="paragraph-def" ><p id = "wordDefinition" >{defintion}</p></div>',
'<span class="authorBox"><i>Author: {author}</i></span>',
'<div id="favourite" class="{is_favourite}" ></div>',
'</div>',
'</li>',
'</ul>',
'</tpl>',
'</li>',
'</ul>',
'</tpl>',
'</div>',
].join(''),
listeners: {
itemtap : function(list, index, target, record, event) {
if (event.target.id=='wordDefinition') {
alert("Rating clicked!");
console.log(event.target.id);
console.dir("Definition--"+record);
//ratingStar();
}
if (event.target.id=='favourite') {
alert('Favourite clicked!');
console.log(event.target.id);
console.dir("Favourite--"+record);
//addToFavourite();
}
}
}
}
My Console is as follow:
![console][1]
As shown in above pic i want to access def_id and word_id when user clicks on the respective tpl as shown in below image when user clicks on definition i.e overweight football supporter i need it's word_id and when user clicks on star i need to get word_id.
Doing record.data.data[0].definitions[0].def_id i can get it but i want it to be dynamic as there may be 4-5 definition later.
![rate][2]
My store:
Ext.define('MyApp.store.wordsmenu',{
extend: 'Ext.data.Store',
config:
{
autoLoad:true,
model: 'MyApp.model.words',
id:'Contacts',
proxy:
{
type: 'ajax',
url: 'json',
reader:
{
rootProperty:''
}
}
}
});
My model are:
Ext.define('MyApp.model.words', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'status', mapping: 'status'},
{name: 'message', mapping: 'message'},
{name:'data', mapping: 'data'},
{name: 'definitions', mapping: 'definitions.defintion'},
{name: 'ratings', mapping: 'definitions.rating'},
]
}
});
I am able show json value in tpl. Now, i should keep track of click on specific
definition and star and send its id to server but unable to get id.
For reference of record you can check here.
Any Help!
It seems that roll_id is a field of your model, so you should be able to get it from your record:
var rollId = record.get('roll_id');
ratingStart(rollId);
Hi I am trying to display context menu on right click of a dataview item. I handled itemcontextmenu event in which I instantiated Ext.menu.Menu and called its showAt method, but
it is giving me error as TypeError: me.el.translatePoints is not a function in Component.js
I observed the el is undefined, what value should be assigned to it so that the translatePoints function works? or there can be other work around?
Please find my code below:
{
xtype: 'dataview',
store: 'SearchedGraphics',
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap" id="{name:stripTags}">',
'<div class="thumb"><table><tr><td><img class="img" src="{url}" title="{name:htmlEncode}"></td></tr></table></div>',
'<span class="x-editable">{shortName:htmlEncode}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
],
multiSelect: true,
height: 310,
trackOver: true,
overItemCls: 'x-item-over',
itemSelector: 'div.thumb-wrap',
emptyText: ORT.Utility.GridEmptyText,
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;
},
listeners: {
selectionchange: function(dv, nodes ){
if(false) {
var l = nodes.length,
s = l !== 1 ? 's' : '';
this.up('panel').setTitle('Simple DataView (' + l + ' item' + s + ' selected)');
}
},
itemcontextmenu: function(dataview, record, item, index, event, eOpts){
var menu = Ext.create('Ext.menu.Menu', {
width: 100,
el:'p',
margin: '0 0 10 0',
floating: false,
items: [{
text: 'regular item 1'
},{
text: 'regular item 2'
},{
text: 'regular item 3'
}]
}).showAt(event.getXY());
}
}
}
1) Not sure why you set floating to false. It's a menu, so it should float.
2) You shouldn't be setting the el config at all.
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.