I wander if there is any ExtJS way that I can load store with data and after it is loaded I can create in master panel other my components (custom panel) to show that data in my specific way?
I want display data from store in panel with my custom components
You have two options:
If you only need to display the data then DataView is tailored for this task.
If your really need a component (ie, something that encapsulates user interaction and not just display), then you need to create this component and as your store loads create a component per record and add it to your master panel.
To copy the docs example of dataview (option 1):
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});
Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
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' }
]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody()
});
Related
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 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 need to set up grid enline-editing combo box to show custom HTML. To be more concrete, please, look at this sample. Click any cell in Light column, open combobox. I want to place near every option ("Shade", "Mostly shady", ...) square box with unique color.
I was having the same problem. Finally found the answer when I was trying the solution above (which doesn't work either but is really close).
Turns out that the class for the list items is x-boundlist-item not x-combo-list-item.
If you mark your div with that class it will work. Extremely frustrating that this isn't outlined in the Sencha docs under the tpl config item for combo boxes, especially when all of the examples I can find just show a simple div for the items. I'm guessing it used to work by wrapping whatever was in the tpl config with the li and the class but it doesn't anymore. That said this is more versatile since you can make headers and lines that aren't selectable in your dropdowns by leaving off the class for those items.
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
Ext.application({
name: 'SRC',
launch: function() {
Ext.create('Ext.container.Viewport', {
xtype:{
type:'vbox',
align: 'center',
pack: 'center'
}, items:[
{xtype:'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
tpl:'<tpl for="."><div class="x-boundlist-item">{name}</div></tpl>'
}
]})
}})
Thanks
For making it work globally (for all comboboxes), use the following override:
Ext.override(Ext.form.field.ComboBox, {
initComponent: function() {
// the code above remains same (you can copy it from ext-all-debug.js), add the following at the end of initComponent
me.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-boundlist-item">',
'{' + me.displayField + ':htmlEncode}',
'</div>',
'</tpl>'
);
}
});
What you need to do is just modify the tpl config option of the ComboBox, and use your own custom config. You can then create a new ComboBox and use that as the editor for the column definition.
Here's a sample of a custom ComboBox template:
var resultTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-combo-list-item">',
'<span class="number">{#}</span>',
'<h3 class="{itemColor"}>',
'{itemName}',
'</h3>',
'</div>',
'</tpl>'
);
You can then use that XTemlate when you instantiate your editor;
var combo = {
xtype: 'combo',
tpl: resultTpl
....
}
can we bind static json store with radiogroup in ext?
Radiogroups and Stores are not directly related in ExtJS. It's easy to populate form values from a store, but using a store to actually create the fields requires a slight work around. Specifically, you would have to do something like this (assuming Ext 3.3.1), and that your JsonStore is already set up...
var store = <your predefined store, with records>;
var itemsInGroup = [];
store.each( function(record) {
itemsInGroup.push( {
boxLabel: record.someLabel,
name: record.someName,
inputValue: record.someValue
});
});
var myGroup = {
xtype: 'radiogroup',
fieldLabel: 'My Dynamic Radiogroup',
items: itemsInGroup
};
You can use dataView for this operation. Depending on store value you can add radio buttons.
Suppose your store has 5 items than 5 radio buttons will be displayed.
var tpl = new Ext.XTemplate('<tpl for=".">', '<div class="thumb-wrap" style="width:210px; float: left;">', '<label >', '<tpl>', '<input type=radioField value={fieldId} >', '</tpl>', '{dataViewFieldName}', '</label>', '</div>', '</tpl>', {
});
var me = this;
this.items = new Ext.DataView({
store: this.store,
tpl: tpl,
overClass: 'x-view-over',
itemSelector: 'div.thumb-wrap',
autoScroll: true
});
this.callParent();
},
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.