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!
});
Related
I try to create a combo with an image (or something else) and when I choose an option, value in combo has some options.
I create a combo box look like:
But when I choose an option that looks like:
Here is my code http://jsfiddle.net/QZqeK/
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [{
"abbr":"AL",
"name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
},
{
"abbr":"AK",
"name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
},
{
"abbr":"AZ",
"name":"<img src='http://icons.iconarchive.com/icons/famfamfam/silk/16/folder-picture-icon.png'>"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
store: states,
tpl: '<tpl for="."><div class="x-boundlist-item" >{name} {abbr}</div></tpl>',
displayTpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{name} {abbr}',
'</tpl>'
),
queryMode: 'local',
displayField: 'abbr',
valueField: 'abbr',
renderTo: Ext.getBody()
});
How to fix that? Thanks!
You won't be able to solve this with templates. The display value of a ComboBox is used as the value of the text input field, which is why your HTML is displayed literally.
It might be kind of hackish, but you can listen for the select event and update some styles directly on the inputEl.
Note that this sample is an approximation. You may have to experiment to get the desired effect.
var urlBase = 'http://icons.iconarchive.com/icons/famfamfam/silk/16/';
// Don't use image tag, just URL of icon
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [
{abbr: 'AL', name: urlBase + 'folder-picture-icon.png'},
{abbr: 'AK', name: urlBase + 'folder-picture-icon.png'},
{abbr: 'AZ', name: urlBase + 'folder-picture-icon.png'}
]
});
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose',
store: states,
queryMode: 'local',
displayField: 'abbr',
valueField: 'abbr',
renderTo: Ext.getBody(),
tpl: [
'<tpl for=".">',
'<div class="x-boundlist-item">',
'<img src="{name}"/>{abbr}',
'</div>',
'</tpl>'
],
listeners: {
select: function (comboBox, records) {
var record = records[0];
comboBox.inputEl.setStyle({
'background-image': 'url(' + record.get('name') + ')',
'background-repeat': 'no-repeat',
'background-position': '3px center',
'padding-left': '25px'
});
}
}
});
If you are going to use this approach and combobox will be marked as invalid the red ribbon will be hiden because it is set as background image like your custom icon (combo will be only in a red frame).
To fix this you can listen to select and validitychange events and set proper style there.
Example how to get style for valid/invalid combo:
getComboBoxInputStype: function(imgPath, valid) {
return {
'background-image': valid ? 'url(' + imgPath + ')' : 'url(' + imgPath + '), url(../../Scripts/ext/images/grid/invalid_line.gif)',
'background-repeat': valid ? 'no-repeat' : 'no-repeat, repeat-x',
'background-size': valid ? '18px 18px' : '18px 18px, 4px 3px',
'background-position': valid ? '3px center' : '3px center, bottom',
'padding-left': '25px'
};
}
Remove {name} from displayTpl like below:
displayTpl:
Ext.create('Ext.XTemplate',
'<tpl for=".">',
'{abbr}',
'</tpl>'
),
I implemented as said at How to add an empty item to ExtJS combobox? I can see a blank row/item as desired but I am unable to select any of the item from combobox !
Any guess ?
My code is as follow
var rModel = Ext.regModel('State', {
fields: [
{type: 'string', name: 'fips_state_code'},
{type: 'string', name: 'state_name'}
]
});
// The data store holding the states
var store = Ext.create('Ext.data.Store', {
model: 'State',
data: [{fips_state_code: '0', state_name: ' '}]
});
store.add(obj.results);
{
xtype:'combo',
id:'filterstate',
width: 250,
fieldLabel: 'Filter By State',
store: store,
queryMode: 'local',
displayField: 'state_name',
valueField: 'fips_state_code',
editable: false,
forceSelection : true,
triggerAction : 'all',
typeAhead: true,
selectOnFocus:true,
allowBlank:true,
tpl : '<tpl for=\".\"><div class=\"x-combo-list-item\">{state_name} <\/div><\/tpl>'
}
The problem is the tpl attribute, in order to select an attribute you need to add the x-boundlist-item class to your tpl. Just like this
tpl : '<tpl for=".">'+
'<div class="x-boundlist-item">'+
'<div class="list-item">{state_name} </div>'+
'</div>'+
'</tpl>'
http://jsfiddle.net/alexrom7/CnwpD/
But if you only want to apply a custom css class to every item in the combobox list. I would recommend you to do it this way
listConfig: {
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="list-item">{state_name} <\/div>';
}
}
http://jsfiddle.net/alexrom7/6Jt5T/
Working directly with the tpl could give you some trouble.
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);
}
}
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/
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.