I am trying to render a table in dataview. Everything is working fine but the tpl renderes twice:
First: the tpl content loaded along with the data
Second: the tpl alone is rendered without any data
I found out that this question was already asked for a different version here. But there was no relevant answer to solve this issue.ExtJS tpl renders twice
{
xtype: 'dataview',
scrollable: true,
itemSelector: 'tr',
data: [{
selCodeType: 'selCodeType',
codeTypeMnc: 'codeTypeMnc'
}, {
selCodeType: 'selCodeType',
codeTypeMnc: 'codeTypeMnc'
}],
tpl: ['<table><thead>',
'<th>Select Code Type</th>',
'<th>Code Type MNC</th>',
'</thead>',
'<tbody>',
'<tpl for=".">',
'<tr>',
'<td>selCodeType</td>',
'<td>codeTypeMnc</td>',
'</tr>',
'</tpl>',
'</tbody></table>']
}
Outcome of the above code
I have tried itemTpl as well. But no luck. It would be helpful if anyone point me what I am doing wrong here.
Thank you
You must use a store instead of data with dataviews:
{
xtype: 'dataview',
scrollable: true,
itemSelector: 'tr',
store: {
data:[{
selCodeType: 'selCodeType',
codeTypeMnc: 'codeTypeMnc'
}, {
selCodeType: 'selCodeType',
codeTypeMnc: 'codeTypeMnc'
}]},
tpl: ['<table><thead>', '<th>Select Code Type</th>', '<th>Code Type MNC</th>', '</thead>', '<tbody>', '<tpl for=".">', '<tr>', '<td>selCodeType</td>', '<td>codeTypeMnc</td>', '</tr>', '</tpl>', '</tbody></table>']
}
Working example: https://fiddle.sencha.com/#fiddle/18th
Related
I have an Ext ComboBox where the user should be able to choose no value. ExtJS doen't support that out of the box.
What I've tried:
use a second trigger that clears the value
Works but is not very usable. I want a better solution.
add "fake" null item to store:
While this does kind of work I would have to modify the model for that to allow null value for id. And this looks more like a hack.
set custom tpl like
'<ul class="x-list-plain">',
'<li role="option" unselectable="on" class="x-boundlist">(no selection)</li>',
'<tpl for=".">',
'<li role="option" unselectable="on" class="x-boundlist-item">{name}</li>',
'</tpl>',
'</ul>'
But now it's getting really difficult, now idea how to get that working properly.
jsfiddle:
http://jsfiddle.net/q5e3J/1/
with custom tpl: http://jsfiddle.net/q5e3J/2/
Please refer this link How to add an empty item to ExtJS combobox?
Update: jsfiddle with that solution implemented: http://jsfiddle.net/q5e3J/3/
var combo = Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
displayField: 'name',
valueField: 'abbr',
value: 'AL',
store: Ext.create('Ext.data.Store', {
model: 'State',
data: states
}),
queryMode: 'local',
editable: false,
emptyText: 'No Selection',
listConfig: {
tpl: '<div class="my-boundlist-item-menu">No Selection</div>'
+ '<tpl for=".">'
+ '<div class="x-boundlist-item">{name}</div></tpl>',
listeners: {
el: {
delegate: '.my-boundlist-item-menu',
click: function() {
combo.clearValue();
}
}
}
}
});
You could use the "change" listener on the combo config and check for null values:
change: function() {
if (this.getValue() === null) {
// Set default Value here
}
};
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()
});
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 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
....
}
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.