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
Related
In my ExtJS project, I have a grid bound to a store, but I want to do away with the grid's layout and use cards instead, similar to this angular sample.
Is there any container component by Sencha that takes a store and renders all records into a custom template? (based on sorting/filtering)
Deriving from the grid is a bit too much work, overriding the original templates breaks all kinds of things.
You can do this with dataview in extjs here is Demo
Ext.application({
name: 'Fiddle',
launch: function () {
var items = Ext.create('Ext.data.Store', {
autoLoad: true,
storeId: 'item-store',
fields: ['name'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: ''
}
}
});
Ext.create('Ext.panel.Panel', {
title: 'DataView',
height: 620,
bodyPadding: 10,
viewModel: [{
stores: {
itemStore: {
type: 'item-store'
}
},
data: {
name: '',
desc: ''
}
}],
items: [{
xtype: 'dataview',
tpl: [
'<tpl for=".">',
'<div class="dataview-item">',
'<p>{desc}</p>',
'</div>',
'</tpl>'
],
itemSelector: 'div.dataview-item',
store: items
}],
renderTo: Ext.getBody()
});
}
});
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 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);
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.