With Sencha Touch, I created a component to display a table for my mobile application.
Here's my component code:
Ext.define('MyApp.components.table.Table', {
extend: 'Ext.Container',
xtype: 'table',
config: {
cls: 'myTableCSS',
scrollable: 'vertical',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<table>',
'<tr>',
'<tpl for="headers">',
'<th>{html}</th>',
'</tpl>',
'</tr>',
'<tpl for="rows">',
'<tr class="{[this.config.id]}" >',
'<tpl for="columns">',
'<td>{html}</td>',
'</tpl>',
'</tr>',
'</tpl>',
'</table>',
'</tpl>'
}
});
Here's my view implementation:
xtype: 'table',
id: 'myRedTable',
data: [
{
headers: [
{ html: 'firstname' },
{ html: 'lastname' },
{ html: 'age' }
],
rows: [
{
columns: [
{ html: 'John' },
{ html: 'Smith' },
{ html: '38' },
]
}
]
}
],
In my component, when I use {[this.config.id]} I would like to get the id of my view implementation (i.e. myRedTable) but it doesn't work.
Is there any solution to achieve this?
It seems you wrote the syntax for inline arbitrary code correctly, but there's a problem with scope. this refers to the instance of Ext.XTemplate itself, not the table view.
You should try another way to get the reference of your table instance instead, for example, in your table's definition file:
initialize: function(){
var me = this;
me.setTpl('Ext.XTemplate',
// blah blah ...
// now you can use "me" to refer to your table instance
)
}
Related
How to add extra element in data view while using tpl.
I am using tpl with itemselector. Now I have add some extra div in that which is not coming from the store. How to add that ?
Here is my data view
onPanelLoad : function( panel , width , height , eOpts){
var mypanel = panel.query('#somepanel')[0],
imageStore = Ext.create('Ext.data.Store', {
id:'imagesStore',
model: Ext.define('Image', {
extend: 'Ext.data.Model',
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'
}]
});
var imageTpl = new Ext.XTemplate(
/* My Try
'<tpl for=".">',
'<div class="item box-wrap">',
'<div class="content-box app-category" style="width:160px; height:160px;">',
'<div class="content-item">',
'<img src="{src}" />',
'</div>',
'</div>',
'</div>',
*/
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
if(mypanel)
mypanel.add([{
layout:'vbox',
items:[{
xtype : 'dataview',
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
}]
}]);
This is what I am trying to add.
'<tpl for=".">',
'<div class="item box-wrap">',
'<div class="content-box app-category" style="width:160px; height:160px;">',
'<div class="content-item">',
'<img src="{src}" />',
'</div>',
'</div>',
'</div>',
When I am trying I am getting Uncaught TypeError: Cannot read property 'internalId' of undefined
Any work around for this?
Please take a look at the fiddle, which does not have the problem.
I added both types of itemTpl.
Please check if you are readding items, that way you might get duplicated IDs.
I added the dataview via items inside the view and tried it on the load event of the store. Both work.
Please be aware I added some styling to app.css, which should not be your problem
MORE INFO
You can load additional data to a store creating a record using the model with data.
I updated the fiddle.
In Internet Explorer(tested with IE11), the clicking on a dataview item will cause that item to automatically scroll to the top. To re-create the issue, paste the following code into ExtJS documentation fiddle, run the fiddle, scroll all the way to bottom, and then click on one of the images. This will cause the dataview to scroll up automatically.
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(
'<div class="abc">',
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>',
'</div>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.abc',
emptyText: 'No images available',
renderTo: Ext.getBody()
});
Is there any way I can stop this automatic scrolling ? This only happens in IE(the scroll position remains unaffected in FF and Chrome).
I have an extjs Panel component that contain a dataview item. I use this to display the images from a store. It works as expected during the first load. But later when I reload the imgStore with new image url's (which occurs when user searches and loads a different city) the view does not refresh. Can someone point me in the best way to refresh the panel/dataview item when the associated datastore is refreshed?
The actual code has more than one item in the panel and many other buttons and toolbars. Please see the relevant part of the code below:
init: function() {
// image store
this.imgStore = new Ext.data.JsonStore({
idProperty: 'imgId',
fields: [{
name: 'imgId',
type: 'integer',
mapping: 'imgId'
}, {
name: 'url',
mapping: 'url'
}],
data: [],
});
// load images
Ext.each(myImgStore.data.items, function(itm, i, all) {
this.imgStore.loadData(itm.data, true);
});
// add to a dataview in a panel
this.myPanel = new Ext.Panel({
autoScroll: true,
items: [{
xtype: 'dataview',
store: this.imgStore,
autoScroll: true,
id: 'imgList',
tpl: new Ext.XTemplate(
'<ul class="imgGrid">',
'<tpl for=".">',
'<li>',
'<div class=\"imgThumbnail\" imgId="{imgId}">',
'<img src="{url}"/>',
'</div>',
'</li>',
'</tpl>',
'</ul>',
'<div class="x-clear"></div>'
),
listeners: {
afterrender: function() {
// do something
}
}
}]
});
// add this to the center region of parentpanel
Ext.getCmp('parentPanel').add([this.myPanel]);
this.myPanel.doLayout();
}
Everytime the store is reloaded, I want the dataview to be refreshed. I'm using extjs 3.4 version.
Thanks!
You need to refresh your dataview. I suggest putting it into a variable.
var dataView = new Ext.DataView({
store: this.imgStore,
autoScroll: true,
id: 'imgList',
tpl: new Ext.XTemplate(
.
.
.
),
listeners: {
afterrender: function() {
// do something
}
}
});
Then add a listener in your store:
this.imgStore = new Ext.data.JsonStore({
idProperty: 'imgId',
fields: [{
name: 'imgId',
type: 'integer',
mapping: 'imgId'
}, {
name: 'url',
mapping: 'url'
}],
data: []
});
// Define your dataView here
this.imgStore.on('load', function() {
dataView.refresh();
});
Note: Code is not tested.
I have a few questions regarding paging a Ext Store.
The Store will pull an amount of historical data on page load.
If the number of records is greater than 10 then I need to implement paging on a custom component/view. The view will be generated with Ext.view.View and a XTemplate.
I would like to know if i can use the paging toolbar on a custom component and if i can query a Store where all the data is held locally. Therefore, not passing parameters to the server and pulling new data back but querying the data Store itself and displaying the results to the user.
It is possible using the Ext.ux.data.PagingMemoryProxy proxy. It is located in examples\ux\data\PagingMemoryProxy.js
The follow example show you how to paging images in a custom view create with generated with Ext.view.View and a XTemplate:
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',
proxy: {
type: 'pagingmemory'
},
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' }
],
pageSize: 2
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
var store = Ext.data.StoreManager.lookup('imagesStore');
Ext.create('Ext.panel.Panel', {
title: 'Pictures',
autoScroll: true,
height: 300,
items: {
xtype: 'dataview',
store: store,
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available'
},
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
You can see it working in jsfiddle.net: http://jsfiddle.net/lontivero/QHDZU/
I hope this is useful.
Good luck!
I have a Panel where I would like to have some other elements in it and a list. When I have the list in the parent panel on it's own, the list functions properly. However, when I add another item to the parent panel, the list now won't scroll downward (it's no longer constrained to the size of the screen).
This is how I'd like my layout to be:
Viewport
|--------------------|
| Revenue Panel |
|--------------------|
| EventList |
| |
|--------------------|
Though the list appears to be getting rendered offscreen for all of the data in it's store.
This is what I have for my view:
DashboardIndex.js
shopifymobile.views.DashboardIndex = Ext.extend(Ext.Panel, {
dockedItems: [
{
xtype: 'toolbar',
title: 'SHOP NAME',
dock: 'top',
defaults: {
iconMask: true,
ui: 'plain'
},
items: [
{xtype: 'spacer'},
{
iconCls: 'refresh',
listeners: {
'tap' : function(){
shopifymobile.stores.onlineEventStore.load();
}
}
}
]
}
],
layout: 'fit',
fullscreen: true,
});
Revenue.js
shopifymobile.views.RevenuePanel = Ext.extend(Ext.Panel, {
styleHtmlContent: true,
flex: 1,
items: [
{
tpl: [
'<div class="revenuepanel">',
'<div id="revenuedata">',
'<h3 class="label">TODAY\'S REVENUE</h3>',
'<p>{revenue}</p>',
'</div>',
'<div id="orderdata">',
'<div id="orders">',
'<p><span class="label">ORDERS</span>{count}</p>',
'</div>',
'<div id="items">',
'<p><span class="label">ITEMS</span>{items}</p>',
'</div>',
'</div>',
'</div>'
],
}
],
updateWithRecord: function(record){
Ext.each(this.items.items, function(item){
item.update(record.data);
});
},
//*************HACK FIXME***********************
fetchStoreData: function(){
var store = shopifymobile.stores.onlineProductStore;
this.updateWithRecord(store.getAt(0));
store.removeListener('load', this.fetchStoreData);
},
initComponent: function(){
shopifymobile.stores.onlineProductStore.addListener('load', this.fetchStoreData, this);
shopifymobile.stores.onlineProductStore.load();
shopifymobile.views.RevenuePanel.superclass.initComponent.apply(this, arguments);
}
});
EventList.js
shopifymobile.views.EventList = Ext.extend(Ext.Panel, {
layout: 'fit',
items: [
{
id: 'eventList',
xtype: 'list',
store: shopifymobile.stores.onlineEventStore,
itemTpl: [
'<div class="eventitem">',
'<div id="eventdata">',
'<ul>',
'<li>New {verb}</li>',
'<li>{message}</li>',
'<ul>',
'</div>',
'<div id="eventtime">',
'<p>{created_at}</p>',
'</div>',
'</div>'
]
},
],
initComponent: function(){
shopifymobile.views.OrderList.superclass.initComponent.apply(this, arguments);
}
});
When I initialize my Viewport I add a new RevenuePanel and Eventlist to a dashboardIndex object:
shopifymobile.views.dashboardIndex.add(new shopifymobile.views.RevenuePanel());
shopifymobile.views.dashboardIndex.add(new shopifymobile.views.EventList());
The only way I can get the list to somewhat work is if I set it to fullscreen, but since i have a toolbar on the bottom of my screen the last item is being overlapped by it.
The way I've done this is to embed the list inside of a panel, and that panel containing should use layout:fit. I've also had to specify width :100% in the containing panel but that may vary based on your specific case. Here's what I did - note that I'm also using DataVIew and not Panel as the list base, but it should work either way.
var panel = new Ext.Panel({
flex: 1,
frame:true,
autoHeight: true,
collapsible: true,
width: '100%',
layout: 'fit',
items: [
new Ext.DataView({.....} ) ] } );