Skip to content

Instantly share code, notes, and snippets.

@gabecoyne
Created September 29, 2011 17:07
Show Gist options
  • Save gabecoyne/1251293 to your computer and use it in GitHub Desktop.
Save gabecoyne/1251293 to your computer and use it in GitHub Desktop.
sencha DataView autopaging help
app.views.ProductsListMine = Ext.extend(Ext.Panel, {
layout: 'card',
scroll: 'vertical',
fullscreen: true,
dockedItems: [
{
xtype: "toolbar",
title: "My Products",
items: [
{
text: 'Settings',
ui: 'back',
handler: function(){
app.views.settingsIndex.setActiveItem(app.views.settingsList, {type: 'slide', direction:'right'})
}
},
{ xtype: 'spacer' }
]
},
{
xtype: "toolbar",
ui: 'light',
items: [
{
text: 'prev page',
ui: 'back',
handler: function(){
app.stores.products.previousPage();
}
},
{ xtype: 'spacer' },
{
text: 'next page',
ui: 'forward',
handler: function(){
app.stores.products.nextPage();
}
}
]
}
],
items: new Ext.DataView({
store: app.stores.products,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="product">',
'<div class="thumb" style="background-image:url({thumb})"></div>',
'<div class="copy">',
'<b>{title}</b><br />',
'<b>Location:</b> {location.city}, {location.state} {location.zip}<br />',
'<b>Posted:</b> {release_at}<br />',
'<div class="x-button x-button edit"><span class="x-button-label">edit</span></div>',
'<div class="x-button x-button-decline delete"><span class="x-button-label">delete</span></div>',
'</div>',
'</div>',
'</tpl>'
),
itemSelector:'div.product', // needed for itemtap
listeners: {
itemtap: function(dataview, index, el, e){
if (e.getTarget(".delete")) {
confirm("Are you sure?");
}
else if (e.getTarget(".edit")) {
alert("edit product");
}
else {
alert("show product");
}
}
}
}),
// items: [ products_item_mine, products_item_mine, products_item_mine, products_item_mine, products_item_mine],
initComponent: function() {
app.views.ProductsListMine.superclass.initComponent.apply(this, arguments);
}
});
app.models.Product = Ext.regModel('app.models.Product', {
fields: ['id', 'title', 'price', 'description', 'quantity', 'release_days', 'location', 'release_at', 'expires_at', 'images', 'thumb'],
proxy: {
url: api_url+'/products',
format: 'json',
type: 'rest',
reader: {
type: 'json',
root: 'data'
}
}
});
app.stores.products = new Ext.data.Store({
model: "app.models.Product",
listeners: {
load: function() {
console.log(arguments);
},
update: function() {
console.log(arguments);
},
beforesync: function() {
console.log(arguments);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment