Great news! Touch desperately needs a grid, and its great you developed one. Here are some problems I have had in case it helps you. I understand its not ready for primetime, but was testing how it would work with MVC
I have a skeleton test app where I was putting in different features testing 2.0 and most things were working. I tried adding a TouchGrid to a carousel, and as soon as I did, the entire app stopped loading. No warnings, no errors, just didn't draw anything in the app. This includes the viewport, etc. There was nothing but a couple empty divs where the main app would be drawn. As soon as I removed the TouchGrid reference, it was back to normal. The tabpanel showed up fine as well as the carousel.
Below is my grid, carousel, tabpanel, app.js, and controller. I hope this is useful to you. I am really confused at it not throwing any errors, yet nothing loading either.
As a side note, I checked firebug, and the view, store, and models are all being loaded dynamically (as well as all your ux code) and there are no 404 errors not being able to find a script
Code:
Ext.define('Ace.view.Backlinks', {
extend: 'Ext.TabPanel',
requires: ['Ace.view.LinkSummaryCarousel'],
config: {
tabBar: {
dock: 'top',
layout: {
pack: 'center'
}
},
ui: 'light',
cardSwitchAnimation: {
type: 'slide'
},
items: [{
xtype : 'linkcarousel'
}]
}
});
Code:
Ext.define('Ace.view.LinkSummaryCarousel', {
extend: 'Ext.Panel',
xtype : 'linkcarousel',
requires: ['Ace.view.LinkSummaryGrid'],
config: {
title: 'Top Pages',
cls: 'cards',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [{
xtype: 'carousel',
items: [{
xtype : 'linkgrid',
ufq : 'someval'
},{
xtype : 'linkgrid',
ufq : 'anotherval'
}]
}]
}
});
Code:
Ext.define('Ace.view.LinkSummaryGrid', {
extend: 'Ext.Panel',
xtype : 'linkgrid',
requires: ['Ext.ux.touch.grid.View'],
config: {
store : 'LinkSummary',
features : {
constructorFn : [],
initializeFn : [
'Ext.ux.touch.grid.feature.Sorter',
'Ext.ux.touch.grid.feature.Filter',
{
ftype : 'Ext.ux.touch.grid.feature.HeaderMenu',
submitFn : function() {
var me = this,
menu = me.menu,
grid = me.grid,
store = grid.getStore(),
field = menu.down('selectfield[label=Sort]');
store.sort(menu.dataIndex, field.getValue())
},
menu : {
items : [
{
xtype : 'selectfield',
label : 'Sort',
options : [
{ text : 'Ascending', value : 'ASC' },
{ text : 'Descending', value : 'DESC' }
]
}
]
}
}
]
},
colModel : [{
header : "UU",
mapping : "uu",
flex : 1
},{
header : "Links",
mapping : "ueid",
style : "text-align: center;"
},{
header : "Rank",
mapping : "umrp",
//cls : "centered-cell",
style : "text-align: center;",
renderer : function(val) {
var color = (val > 0) ? "00FF00" : "FF0000";
return "<span style='color: #" + color + ";'>" + val + "</span>";
}
},{
header : "Position",
mapping : "pos",
hidden : true,
style : "text-align: right;"
}]
}
});
Code:
Ext.define('Ace.controller.Backlinks', {
extend: 'Ext.app.Controller',
config: {
},
views : [
'Backlinks',
'LinkSummaryCarousel',
'LinkSummaryGrid'
],
models: [
//'LinkSummary'
],
stores: [
'LinkSummary'
],
refs: [
{
ref : 'backlinkgrid',
selector: 'linkgrid',
autoCreate: true,
xtype : 'linkgrid'
}
],
init: function() {
console.log('backlinks controller init');
this.getLinksummaryStore().on({
scope: this,
load : this.onLinkStoreLoad,
beforeload: this.onPreLinkLoad
});
},
onPreLinkLoad : function(store, node, records, success, eOpts) {
console.log('link store loading');
},
onLinkStoreLoad: function(store, node, records, success, eOpts) {
console.log('link store loaded');
}
});
Code:
Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});
Ext.require([
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Filter',
'Ext.ux.touch.grid.feature.HeaderMenu',
'Ext.ux.touch.grid.feature.Sorter'
]);
Ext.application({
name: 'Ace',
appFolder: '/js/app',
useLoadMask : true,
controllers: ['Main', 'Backlinks'],
stores: ['LinkSummary'], //This was added after the fact. Made the
//app start loading again. However I hit
//a new bug at the end of this post.
launch: function() {
Ext.create('Ace.view.Main');
}
});
<edit> Adding another note, I commented out the "requires" line & the items array in the carousel, and every reference to the grid in the controller, and it was still loading blank. Then I commented out the LinkSummary store, and all of a sudden the skeleton app started loading again. Will do more investigating, but I am stumped as to why no error is thrown and the store causes a blank page. (If it is really the cause?)
This is my store for good measure
Code:
Ext.define('Ace.store.LinkSummary', {
extend : 'Ext.data.Store',
alias : 'widget.linksummarystore',
model : 'Ace.model.LinkSummary',
sorters: [{
property: 'pos',
direction: 'ASC'
}],
autoLoad: false,
proxy : {
type: 'ajax',
url: '/moz/toppage/',
reader: {
root: 'data',
type: 'json'
//totalProperty: "total",
}
}
});
<edit> Another update. I referenced the store for this grid in my app.js, and the page is loading again. Weird since it's the only store referenced there, but whatever. It's working.
So far the only issue I have come across is when trying to add a grid into a carousel. On this line in Carousel.js "Cannot call method 'addCls' of null'.
Code:
item.element.addCls(this.getItemCls());
Great work on this ux!
Ext.ux.touch.grid
Reply With Quote
Originally Posted by andreacammarata
