PDA

View Full Version : Ext.ux.touch.grid



Pages : [1] 2

mitchellsimoens
11 Oct 2011, 1:03 PM
As usual, I have the first extension built and released :)

Ext.ux.TouchGridPanel was a huge success, thank you for everyone's input as it matured (still has room). Sencha Touch 2 should not be without a grid component either and as of the first developer preview there is no native grid component.

Ext.ux.touch.grid is the namespace and like the new namespacing Sencha Touch 2 and Ext JS 4 started, I followed with this.

The main class is Ext.ux.touch.grid.View which is just a customized DataView. It supports having a header and of course all the rows. You can have cell renderers (uses XTemplate's renderers instead of any processData method).

Ext.ux.touch.grid.View is pretty stripped down. In fact it doesn't even support sorting. I haven't left you out in the cold, I just wanted to have a lightweight grid component.

Like Ext JS 4's grid architecture, Ext.ux.touch.grid has the concept of features. Features are basically plugins. Unlike Ext JS 4, I allow you to specify what stage in the grid you want to instantiate a feature. There are two stages, in the constructor and in the initialize methods. Add features to constructorFn array and it will create the feature right before the callParent call. Save for initializeFn array.

Like I said, this is a start. Many things will change to further this grid and also keep inline with the latest Sencha Touch 2 version.

GitHub: https://github.com/mitchellsimoens/Ext.ux.touch.grid

Just an update, got horizontal scrolling to work!

AndreaCammarata
11 Oct 2011, 11:39 PM
Great as always Mitchell ;)
I will use it for sure in my upcoming projects.

I'm looking forward for the first stable version.

Thanks for sharing.

tomalex0
12 Oct 2011, 1:35 AM
Thanks for sharing :)

mitchellsimoens
12 Oct 2011, 4:36 AM
Great as always Mitchell ;)
I will use it for sure in my upcoming projects.

I'm looking forward for the first stable version.

Thanks for sharing.

Would really love that editable list plugin to work as a feature of this grid :)

mitchellsimoens
12 Oct 2011, 4:37 AM
Thanks for sharing :)

Thanks... good news, shouldn't be any problems with the renderers like the last one! Using the built-in XTemplate way of changing values :) Don't think I will be able to get horizontal scrolling working but am still looking into that. Also need to be able to show/hide columns and that will come as a feature!

AndreaCammarata
12 Oct 2011, 4:54 AM
Would really love that editable list plugin to work as a feature of this grid :)

Uhmm...that's not a bad idea.
I think I could work on it ;)

hallikpapa
16 Oct 2011, 10:30 AM
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




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'
}]
}
});




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'
}]
}]
}
});




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;"
}]
}
});



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');
}
});


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



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'.



item.element.addCls(this.getItemCls());


Great work on this ux!

mitchellsimoens
17 Oct 2011, 8:20 AM
So are things working? I have a TabPanel that has fullscreen to true and one item which is a Carousel. The Carousel has two items under it which is two different instances of the grid and everything is working like it should. Here is all my code:


Ext.Loader.setConfig({
enabled : true,
paths : {
'Ext.ux.touch.grid': './Ext.ux.touch.grid'
}
});

Ext.require([
'Ext.ux.touch.grid.View'
]);

Ext.define('TestModel', {
extend : 'Ext.data.Model',
fields : [
'company',
'price',
'change',
'pct',
'updated'
]
});

Ext.setup({
onReady : function() {
var store = Ext.create('Ext.data.Store', {
model : 'TestModel',
autoLoad : true,
proxy : {
type : 'ajax',
url : 'data.php',
reader : {
type : 'json',
root : 'data'
}
}
});
var store2 = Ext.create('Ext.data.Store', {
model : 'TestModel',
autoLoad : true,
proxy : {
type : 'ajax',
url : 'data.php',
reader : {
type : 'json',
root : 'data'
}
}
});

var car = Ext.create('Ext.carousel.Carousel', {
title : 'Carousel',
items : [
{
xtype : 'touchgridpanel',
store : store,
colModel : [
{
header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
sortable : false,
filter : { type : 'string' }
},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
},
{
header : 'Change',
dataIndex : 'change',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}
},
{
header : '% Change',
dataIndex : 'pct',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}
},
{
header : 'Last Updated',
dataIndex : 'updated',
hidden : true,
style : 'text-align: right; padding-right: 1em;',
width : '15%'
}
]
},
{
xtype : 'touchgridpanel',
store : store2,
colModel : [
{
header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
sortable : false,
filter : { type : 'string' }
},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
},
{
header : 'Change',
dataIndex : 'change',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}
},
{
header : '% Change',
dataIndex : 'pct',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}
},
{
header : 'Last Updated',
dataIndex : 'updated',
hidden : true,
style : 'text-align: right; padding-right: 1em;',
width : '15%'
}
]
}
]
});

var tab = Ext.create('Ext.TabPanel', {
fullscreen : true,
items : [car]
});
}
});

hallikpapa
17 Oct 2011, 8:53 AM
It's not working for me. It crashes with the error I posted in Carousel.js on the first grid it tries to create:

'Uncaught TypeError: Cannot call method 'addCls' of null'

Carousel.js-- Line 181

item.element.addCls(this.getItemCls());

So far the main difference I see is you are instantiating the instances of the stores & grids yourself, while I am using the new Touch MVC pattern similar to extjs4 with lazy loading. I am not sure what it is expecting `item.element` to be in the code above. I will continue to investigate but any insights are helpful.

It could really be coming from anywhere though, since this is a new ux release working off of ST PR1. But b/c of the popularity of your plugin, I figured it would be best to figure out which side the problem is on in case a bug report should be filed.

It also could be with the way I set it up. I stopped referencing the class I created extending your view, and just defined everything within the carousel as you did. I didn't get the item.element error, but a different one in the View.js constructor about it not being able to find constructorFn. That one should be easy for me to fix.

However, I will see if I can find an answer to the original problem since it's better to define an extended class of your TouchGrid with all my config stuff in there, but I am going to continue down the path you did of defining it within the carousel and see if I can get it completely working, then work backwards.

hallikpapa
17 Oct 2011, 3:12 PM
Stripped the extended TouchGrid class down to this. No more errors, but it's rendering an empty carousel. Getting closer. Like I just noticed I was extending Ext.Panel. Hah, oops.

I am still curious as to why I had to reference the store in my app.js for this grid, but didn't for my NestedList / TreeStore. That might be a bug in the UX or PR1?


Ext.define('Ace.view.LinkSummaryGrid', {
extend: 'Ext.Panel',
xtype : 'linkgrid',
requires: ['Ext.ux.touch.grid.View'],
config: {
store : 'LinkSummary',
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;"
}]
}
});

hallikpapa
18 Oct 2011, 9:34 AM
Small update. I modified the View.js & Feature.js a tiny bit (hack) as well as my extended TouchGrid class to get someting to render. I have attached two screenshots of what it's rendering on the first grid & when I slide the carousel what renders on the second grid. Notice the weird lines in my nested list.

Modified part of View.js. In Feature.js I just commented out line 25 where it deletes cfg.feature.


constructor: function(config) {
var me = this;
if (!config.colModel) {
config.colModel = me.getColModel();
}
Ext.apply(config, {
itemTpl : me._buildTpl(config.colModel, false)
});

if (!config.features) {
config.features = [];
}
if (typeof me.initFeatures === 'function') {
if (!config.features.constructorFn) {
config.features.constructorFn = me.getConstructorFn();
}
me.initFeatures(config.features.constructorFn);
}

me.callParent(arguments);
},

initialize: function() {
var me = this;

me.header = me.insert(0, {
xtype : 'container',
cls : 'x-grid-hd-row',
docked : 'top',
height : 40,
html : me._buildTpl(this.getColModel(), true)
});

if (typeof me.initFeatures === 'function') {
if (!me.features.initializeFn) {
me.features.initializeFn = me.getInitializeFn();
}
me.initFeatures(me.features.initializeFn);
}

me.callParent(arguments);
},



My new class, had to add these methods in order for it to work as is in an MVC pattern. Not sure why the grid cells show undefined either. The store is loaded properly from when I checked the store load listener.




Ext.define('Ace.view.LinkSummaryGrid', {
extend: 'Ext.ux.touch.grid.View',
xtype : 'linkgrid',
//requires: ['Ext.ux.touch.grid.View'],
config: {
store : 'LinkSummary',
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;"
}]
},
constructor : function() {
this.callParent(arguments);
this.getStore().load({params : {ufq : this.ufq}});
}
});


Please note when looking at these screenshots, the CSS file from github is being loaded and checking the elements in firebug show they are referencing that file correctly.

Pic 1
28722

Ignore the column headers & undefined stuff. That is fixed. Notice the extra lines in the left hand column bar. That happens when I flip to the 2nd grid in the carousel. The 1st grid wraps/sticks out. Again, the css file from github is being loaded, so not sure what's causing that yet.

mitchellsimoens
26 Nov 2011, 4:19 PM
Just pushed an update to GitHub. Changed the a few things like the Sorter and HeaderMenu feature. I want to do some more work on the filter part of the HeaderMenu.

One thing that you all will be very happy with is I spent about 15 minutes working on getting horizontal scrolling to work. The only thing with this is the width of the Grid is dependent on every grid use a number for the width. It cannot be a percentage or else it will not try to calculate it's own width. I added horizontal.html and horizontal.js to demonstrate how I got this to work.

mike lebowski
17 Dec 2011, 11:01 PM
Mitchell, thanks much for this component. I initially developed with it using the PR2 and was testing only on browser, and it was working fine.

Then I simultaneously switched to PR3 and Phonegap. Now when I run on iphone simulator, the column headers do not show up. Are you aware of any problems that due to changes from PR2 to PR3 and do you plan to release any updates to the Grid soon?

mitchellsimoens
18 Dec 2011, 3:54 AM
Mitchell, thanks much for this component. I initially developed with it using the PR2 and was testing only on browser, and it was working fine.

Then I simultaneously switched to PR3 and Phonegap. Now when I run on iphone simulator, the column headers do not show up. Are you aware of any problems that due to changes from PR2 to PR3 and do you plan to release any updates to the Grid soon?

Just pushed an update to get it to work with PR3.

mike lebowski
18 Dec 2011, 10:10 PM
Thanks Mitchell, that update fixes the problems i had seen in the IOS simulator.

Just curious, have you tried to do any phonegap apps with your code? As noted in another thread, when I follow your code pattern and use the Ext.Loader.setConfig with paths and Ext.require block, it works fine in IOS but Android fails with messages about not being able to find the Ext.ux.touch.grid files.

Just curious if you have succeeded in incorporating this component into a phonegap app.

mitchellsimoens
19 Dec 2011, 6:24 AM
Thanks Mitchell, that update fixes the problems i had seen in the IOS simulator.

Just curious, have you tried to do any phonegap apps with your code? As noted in another thread, when I follow your code pattern and use the Ext.Loader.setConfig with paths and Ext.require block, it works fine in IOS but Android fails with messages about not being able to find the Ext.ux.touch.grid files.

Just curious if you have succeeded in incorporating this component into a phonegap app.

No I have not. Personally, I don't like wrapping a web app in phonegap. If you need device apis then sure, go for it but if not then don't... I have not needed them.

mitchellsimoens
19 Dec 2011, 5:13 PM
FYI... I just added a Paging feature that will add a toolbar with a previous, forward and go to buttons. The go to button will show a floating panel with a list of the pages.

I also made the header into a toolbar so you can take advantage of the ui setting. Also some other optimizations.

All this tested on PR3.

mitchellsimoens
20 Dec 2011, 11:16 AM
While the sencha.com site was down, I added a cell editing feature with an example.

tino7_03
22 Dec 2011, 5:12 AM
I'have tryed Ext.ux.touch.grid and it works very well.
My store get data with a json-p calling to a asp.net aspx page.

For to have good performaces I have used in my aspx page the asp.net chacing system. In this mode from server side I can refresh my data from database only one time each hour. But in this case the local store doesn't fire load event and the "previous" button doesn't change its status. It's my opinion that for the client is not important if the data from server arrive from chacing data or not. this is transparent for it. Is it true? I have verified the data using or not using the cache and there are not differences...
Have you an idea about why this?
Thanks in advance.


EDIT: I've tryed to add a breakpoint in my aspx page and I have seen that if the server work is before stopped and after restarted the component works well again. The store load event seem doesn't fire if the server response is too fast...

EDIT:
I have added to my asp.net page a wait statement for 25 milliseconds when I load data from its cache ad now it's all perfect, but I don't understand why this method is good...

Donbydon
23 Dec 2011, 2:53 AM
Thanks for the useful Extension. I run example grid.View. It's ok, but if I add item with long name(~70 symols) right column is out of screen. Is it normal behavior? Maybe problem is in ST Dataview's Width calculation... Columns width are: 40%, 15%, 15%, 15%, 15%. See picture below.
30272

mitchellsimoens
23 Dec 2011, 7:04 AM
Pretty much everything is CSS. So you will need to apply CSS as needed to get desired affect.

Surykat
2 Jan 2012, 4:44 AM
Great component!

But i got a problem with applying features during re-open view with gridview component. The console throw me an error:


Uncaught Error: [Ext.create] Invalid class name or alias 'undefined' specified, must be a non-empty string


I debug that and it is after calling 'me.callParent(arguments)' method.

Any ideas how to workaround that??

mitchellsimoens
2 Jan 2012, 4:57 AM
You're getting that error after creating a second one or after removing it and then re-adding it?

Surykat
2 Jan 2012, 5:03 AM
After re-adding. I got viewport with components (grid view and others), at first time everithing works great. I switch my active viewport and try to re-create the same viewport and got error then.

mitchellsimoens
2 Jan 2012, 5:19 AM
If you destroy any component, you will need to recreate an instance.

Surykat
2 Jan 2012, 5:35 AM
Ok, I understand that, but I gave xtype to gridpanel component. Load every js file during index load, and put xtype: 'gridpanel' to my panel component. Does it require any special removing or recreating that any another component? I don't use Ext.create now. I have defined xtypes as my app views and now I want to re-open my specific view where I have gridpanel included.

mitchellsimoens
2 Jan 2012, 5:39 AM
All this grid is is a DataView that has some features (plugins) added to it but they should be created when the grid is created.

tino7_03
2 Jan 2012, 8:01 PM
I'd like to add a filter row under the header row. In this way for each column I'd have a field where put a search string.
I'm looking the code for this target, but before to start I ask if is there a preferred way for do this... Or if exist same limit to do this that I don't know.
Thanks in advance

tino7_03
4 Jan 2012, 8:58 AM
I'm trying to add a filter toolbar like in attached picture. But I have a problem with fields width because when I resize the window the fields in toolbar change them size without respect the columns width. I think this is because the toolbar have a defined spacer and it not change proportionally. Have you an idea for resize my toolbar fields in correct mode whene the grid change its dimension?
Thanks in advance.30448
this is my code:


_buildFields: function(columns) {

var c = 0,
cNum = columns.length

var me = this,
filterRow = me.getFilterRow();

for (; c < cNum; c++) {
filterRow.add({
xtype:'textfield',
width: columns[c].width })
}
}

shaneavery
23 Jan 2012, 7:28 PM
Thank you mitchellsimoens for this excellent extension. I have come across an anomaly which appears using Ext.ux.touch.grid with Chrome (Windows 7) and Android. After a row is selected in the grid, if you choose a column to sort on, additional rows become painted as if they were selected in the grid display. See attached picture:

30930

I am using Touch 2, PR3 at the moment. It manifests the same behavior with the out of the box example you provide as well (in my testing). Have you run into this before? Do you have any suggestions for a workaround? Thanks again.

mike lebowski
23 Jan 2012, 8:23 PM
I was just going to post the same observation. The sorting is great but I see the same multi-row selection side effect. It is very pronounced and very repeatable , at least in the IOS simulator for me.

I think the incorrect highlighting is happening only AFTER some selection has been made in the grid. For example, if I am looking at the grid, and have not yet selected any row, I can sort and resort any column and all is fine. Nothing gets incorrectly highlighted. But once I have made a selection and there is one highlighted row, from that point on if i sort the columns, I find the other rows start to highlight unpredictably as the prior poster pointed out.

I am using PR3, and phone gap fwiw.

mitchellsimoens
24 Jan 2012, 5:54 AM
The grid does not do anything special there, this is a (reported) bug in ST2.

shaneavery
24 Jan 2012, 8:23 AM
Thanks for the clarification, Mitchell.

hallikpapa
28 Jan 2012, 6:54 AM
I tried playing with this on PR4, but it's looking for a ComponentView that isn't there anymore. Not sure how often you update this for PR releases, but if there is any tips you KNOW don't work now, would love to hear them.

So far just changing 'Ext.dataview.ComponentView' to 'Ext.dataview.DataView' in the HeaderMenu.js and I changed the buildHeader method in the View.js to this




return this.insert(0, this.config.headerConfig);


I don't get any errors, but the grid isn't rendering. Still playing around.

Can't use a sencha product without a grid! :)

Thanks for making this.

tino7_03
28 Jan 2012, 9:32 AM
I have modify Ext.ux.touch.grid for PR4.
I attach my version here.
There are only two problems with pager feature:
1) I must have comment the line 101,103 and 104 of paging.js because there is a bug with Ext.data.Store.isLoading (http://www.sencha.com/forum/showthread.php?176752-store.isLoading-gone-in-PR4). The bug is fixed but if I use isLoading method the previous button never is enable. I don't understand why. There are no effects, but if the "isLoading" was present before, I thinks that it need to be in PR4 also.

2) In paging.js the line 106 has method "store.getTotalCount()" that returns always 0. It's a bug. (http://www.sencha.com/forum/showthread.php?176885-PR4-store.getTotalCount-always-return-0). I'm looking for a workaround, but at this moment the "Go to Page" button in paging toolbar doesn't work.

tino7_03
28 Jan 2012, 9:33 AM
31119

hallikpapa
29 Jan 2012, 9:47 AM
Playing with your version. I see a grid panel being rendered when I look at the html elements, but cannot visually see it yet. But then again, I am trying to push it into the KitchenSink demo so I am probably missing a step when loading this through MVC.



<div class="x-container x-dataview touchgridpanel" id="ext-TopPageGrid-2" style="width: 0px !important; ">


The columns are not being passed to the constructor, so I am going to try tweaking the View.js a bit to see if I can get it to read the class config stuff.



Ext.define('APP.view.TopPageGrid', {
extend: 'Ext.ux.touch.grid.View',
xtype : 'TopPageGrid',
requires: ['Ext.ux.touch.grid.feature.Sorter',
'Ext.ux.touch.grid.feature.Filter',
'Ext.ux.touch.grid.feature.HeaderMenu'
],
config: {
fullscreen : true,
store : 'LinkSummary',
colModel : [{
header : "UU",
mapping : "uu",
dataIndex : 'uu',
width : '40%'
},{
header : "Links",
mapping : "ueid",
dataIndex: 'ueid',
style : "text-align: center;",
width : '15%'
},{
header : "Rank",
mapping : "umrp",
dataIndex: 'umrp',
style : "text-align: center;",
width : '20%',
renderer : function(val) {
var color = (val > 0) ? "00FF00" : "FF0000";
return "<span style='color: #" + color + ";'>" + val + "</span>";
}
},{
header : "Position",
mapping : "pos",
dataIndex: 'pos',
hidden : true,
style : "text-align: right;",
width : '10%'
}]
},
constructor : function() {
this.callParent(arguments);
this.getStore().load({params : {ufq : this.title}});
}
});



<edit> Grrr. It's been a while since I have tried using this. Waiting for the ST2 actual release, but I noticed I was using colModel, and not columns. Looking good now. Ha!

tino7_03
29 Jan 2012, 10:07 PM
In my MVC project I use : "columns" and not "
colModel"...

hallikpapa
29 Jan 2012, 10:09 PM
Yeah, my edit at the bottom reflects that. I noticed the change and got it working again. Now I am on to why two different instantiated grids share the same store, even though I create the store in the TouchGridPanel constructor. Need to sleep on it. :)

tino7_03
29 Jan 2012, 10:23 PM
I have not seen your edit... I need to sleep too! (But here is early morning...) :)
I will test the store problem today if I have time.

hallikpapa
29 Jan 2012, 10:41 PM
I meant the edit I put at the bottom of my post (like an hour ago in this thread) where I posted the problem. Here is the other thread where I asked the question about instantiating two classes with different stores. From Googling around, it seems to work for other people, but I don't know if it's because I am doing an MVC app with PR4, or I am missing something else or what.

http://www.sencha.com/forum/showthread.php?175776-Using-2-unique-instances-of-a-store-amp-MVC

I was going to toy around with having listeners on the actual grid view. Maybe a beforerender listener that allows me to fire a method in the controller that creates the store there. Something like that.

Keep in mind, I am putting these two grids in a carousel, so that may have to do with it still sharing the store somehow. Just need to figure out what's causing it to share one instead of using the ones being created in the constructor.

mitchellsimoens
4 Feb 2012, 3:46 PM
Just an FYI everyone, I have updated the GitHub repo to have everything work with the beta1 release of Sencha Touch 2

mike lebowski
4 Feb 2012, 7:58 PM
Yeahhhh. I was just about to move from PR3 to beta , so this is great news.

mitchellsimoens
4 Feb 2012, 8:02 PM
Yeahhhh. I was just about to move from PR3 to beta , so this is great news.

Let me know how it goes! It works for my little tests.

mike lebowski
5 Feb 2012, 12:32 AM
well, i am not sure if it your code, but I am still receiving the "


Failed loading './dataview/ComponentView.js
message even after switching to your new grid. I saw that error earlier today when I first switched to beta, before you posted your update. I was hoping that your update might eliminate that error, as I don't think I have anything else that is a dataview in my app, beside your grids and a simple list .

I did a clean and build, but still see the failed loading error.

I see it is discussed a bit in http://www.sencha.com/forum/showthread.php?176369-pr4-ListItem&highlight=ComponentView.js but I don't quite understand how the suggestions in that thread can apply to my app.

mitchellsimoens
5 Feb 2012, 10:07 AM
Clear your cache. HeaderMenu was the only thing using ComponentView and I have removed that feature altogether.

mike lebowski
5 Feb 2012, 11:38 AM
Wow, Xcode is a really flakey dev env in some ways.

I did the Xcode option Clean Build Folder , but error message persisted, after several clean and builds.

Then, I noticed the error message was actually specifying a folder deep in Library/Applications Support/Simulator/5.0/Applications/< large number>/myapp/www/lib/..... ComponentView.js".

So I went to that directory, and found that there was .app file dated from 1/29 there? wtf?.
I deleted that, restarted xcode, rebuilt. Re-ran.
Good news the ComponentView.js error is gone.
Bad news, now I get a "Ext.Loader] Failed loading synchronously via XHR:'/lib/Ext.ux.touch.grid/feature/HeaderMenu.js', please verify that the file exists. XHR status code -1100.

So then I noticed I stil had this in my app.js


Ext.Loader.setConfig({
enabled: true,
paths : {
'Ext.ux.touch.grid': 'lib/Ext.ux.touch.grid'
}
});


Ext.require([
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',

'Ext.ux.touch.grid.feature.HeaderMenu',
'Ext.ux.touch.grid.feature.Sorter',
'Ext.navigation.View'
]);


So I removed that HeaderMenu from the require. And I did the full Clean Build Folder, restart everything, remove that deeply buried .app file etc. And yet the message persists, even tho did a full Macbook search for any file containing the string HeaderMenu and the only results left (after i deleted everything else are a bunch of Appearance.r and .h files , which i assume have nothing to do with app dev.

mike lebowski
5 Feb 2012, 11:33 PM
this is crazy stuff. I have removed every reference I can find to HeaderMenu . Mac searchlight does not find anything. I've gotten rid of all prior PR2 or PR3 stuff, everything.

Yet, my app continues to try and load HeaderMenu.js .

I even did all of these steps:

Command-Option-Shift-K to clean out the build folder. Even better, quit Xcode and clean out~/Library/Developer/Xcode/DerivedData manually. Remove all its contents because there's a bug where Xcode will run an old version of your project that's in there somewhere. (Xcode 4.2 will show you the Derived Data folder: choose Window > Organizer and switch to the Projects tab. Click the right-arrow to the right of the Derived Data folder name.)In the simulator, choose iOS Simulator > Reset Content and Settings.Finally, for completeness, you can delete the contents of /var/folders; some caching happens there too

Still the phantom HeaderMenu.js loading attempts ... it reminds me of a Narnia quote "magic from before the beginning of time" :(

mike lebowski
7 Feb 2012, 12:08 AM
found the dangling references to HeaderMenu feature. Removed them and back in business. thnx.

jimmylu98
7 Feb 2012, 9:11 AM
Migrated from 1.1 to 2.b. It works great.

Only one thing I like is sometimes I want to hide the header bar. Previous version I was able to use hideHeaders: true to hide header bar.

Thank you.

mitchellsimoens
7 Feb 2012, 9:18 AM
Migrated from 1.1 to 2.b. It works great.

Only one thing I like is sometimes I want to hide the header bar. Previous version I was able to use hideHeaders: true to hide header bar.

Thank you.

Something on the drawing board still :)

tino7_03
9 Feb 2012, 7:13 AM
In MVC app I'm using paging feature and I'm listening 'itemtaphold' event from a controller.


'gpm-view-customers [xtype=touchgridpanel]' : {
itemtaphold : this.viewCustomersGridItemHoldTap
},
viewCustomersGridItemHoldTap:function(e,index,target,record,eOpts){
e.setSelected(index);
}


If I call setSelected method when I try to use paging forward button I recive this error:


Uncaught TypeError: Object 2 has no method 'getId'

(anonymous function)Store.js:529 (http://localhost:8080/gpmobile/lib/touch/src/data/Store.js?_dc=1328799804007)
Ext.define.indexOfCollection.js:819 (http://localhost:8080/gpmobile/lib/touch/src/util/Collection.js?_dc=1328799804067)
Ext.define.indexOfStore.js:1063 (http://localhost:8080/gpmobile/lib/touch/src/data/Store.js?_dc=1328799804007)
Ext.define.refreshSelectionSelectable.js:461 (http://localhost:8080/gpmobile/lib/touch/src/mixin/Selectable.js?_dc=1328799804093)
Ext.define.doFireController.js:194 (http://localhost:8080/gpmobile/lib/touch/src/event/Controller.js?_dc=1328799804063)
Ext.define.fireController.js:121 (http://localhost:8080/gpmobile/lib/touch/src/event/Controller.js?_dc=1328799804063)
Ext.define.doDispatchEventDispatcher.js:338 (http://localhost:8080/gpmobile/lib/touch/src/event/Dispatcher.js?_dc=1328799804007)
Ext.define.dispatchEventDispatcher.js:319 (http://localhost:8080/gpmobile/lib/touch/src/event/Dispatcher.js?_dc=1328799804007)
Ext.define.doFireEventObservable.js:227 (http://localhost:8080/gpmobile/lib/touch/src/mixin/Observable.js?_dc=1328799804138)
Ext.define.fireEventObservable.js:186 (http://localhost:8080/gpmobile/lib/touch/src/mixin/Observable.js?_dc=1328799804138)
Ext.define.onProxyLoadStore.js:1840 (http://localhost:8080/gpmobile/lib/touch/src/data/Store.js?_dc=1328799804007)
Ext.define.processResponseServer.js:259 (http://localhost:8080/gpmobile/lib/touch/src/data/proxy/Server.js?_dc=1328799804044)
(anonymous function)JsonP.js:221 (http://localhost:8080/gpmobile/lib/touch/src/data/proxy/JsonP.js?_dc=1328799804006)
Ext.apply.callbacksenchatouch.js:9593 (http://localhost:8080/gpmobile/lib/touch/senchatouch.js)
Ext.define.handleResponseJsonP.js:261 (http://localhost:8080/gpmobile/lib/touch/src/data/JsonP.js?_dc=1328799804035)
(anonymous function)senchatouch.js:3104 (http://localhost:8080/gpmobile/lib/touch/senchatouch.js)
(anonymous function)service.aspx:1

(http://localhost:64393/CommWebPage/service.aspx?methodName=sqlExecute&args=[%22sql%22:%22SELECT%20[anagra].[an_conto],%20[anagra].[an_descr1]%20FROM%20anagra%20WHERE%20[anagra].[an_tipo]='C'%22]&_dc=1328799811698&page=2&start=25&limit=25&callback=Ext.data.JsonP.callback3)


the problem doesn't exist for my app because the calling is not necessary, the focus on the item is ok without setSelected, but perhaps it's a bug...

tino7_03
10 Feb 2012, 2:46 AM
Hi Mitchell,
as yow know, my ext.ux.gp.grid component inherits from your very useful component. Now I'd like add a button inside a column, but your component use XTemplate and the under dataview is not set as componentView (config option useComponents is not true)
I have tried to add a button in XTemplate bad with bad results. I know that it's not good to use component in XTemplate, but I cannot see other ways.
Have you an idea for solve this problem to give to me?
Thanks.

mitchellsimoens
10 Feb 2012, 3:51 AM
I didn't go the route of using the components within DataView because it is very DOM heavy and in my experience with my first grid component for ST1, people are going to expect to be able to do too much.

What you would have to do is wait for the list to refresh (event hint there) and render a button to a specific element. Just remember, you will be responsible for cleaning up the button also.

tino7_03
10 Feb 2012, 4:03 AM
thanks for your answer.
I will try with 'after list refreshed' option.

mike lebowski
13 Feb 2012, 11:33 PM
Hi Mitchell,

i deployed the grid example with beta 2. The index.html works ok. But the paging.html gets an error on data retrieval.

Wondering if you get the same?



Uncaught TypeError: Object Error: Unable to parse the JSON returned by the server: Error: You're trying to decode an invalid JSON String: <?php


$callback = false;


if (isset($_REQUEST['callback'])) {
$callback = $_REQUEST['callback'];
}


$start = $_REQUEST['start'];
$limit = $_REQUEST['limit'];
$data = array(
array( "firstName" => "Tommy", "lastName" => "Maintz" ),
... much more data ..
array( "firstName" => "Jay", "lastName" => "Robinson" ),
array( "firstName" => "Zed", "lastName" => "Zacharias" )
);
$dataset = array();


for ($i = 0; $i < $limit; $i++) {
$offset = $i + $start;
if (isset($data[$offset])) {
array_push($dataset, $data[$offset]);
}
}


if ($callback) {
echo $callback . '(';
}


echo json_encode(array("success" => true, "total" => count($data), "data" => $dataset));


if ($callback) {
echo ');';
}


?> has no method 'getMessage'

mitchellsimoens
14 Feb 2012, 4:43 AM
Have you checked the response? It is saying the JSON isn't valid.

shaneavery
14 Feb 2012, 9:22 PM
Mitchell,

The dataview bug appears to have crept back in, causing that multi-select painting issue to show up on your grid again (like it did in PR3).

31712

mitchellsimoens
15 Feb 2012, 4:40 AM
This is a bug within DataView so we will have to wait for it to get fixed in the framework. I do not do anything special for selecting.

hallikpapa
23 Feb 2012, 3:04 PM
I am trying to add a custom class to my column headers. I have a lot of columns (17) so I am shrinking the text. When I breakpoint, right before View.js does me.callParent(); in the constructor, it has my extra class attatched to the div's. But when rendered, it's missing, so the text is still large. Any ideas?



.touchgridpanel .x-grid-cell-hd .srp {
font-size: small;
}



Here is a snippet of the columns:



columns : [{
header : "UU",
dataIndex : 'uu',
cls : "srp",
width : 40
},{
header : "Type",
dataIndex: 'type',
cls : "srp",
width : 50
},{
header : "External",
dataIndex: 'ueid',
cls : "srp",
width : 90
},{

mike lebowski
26 Feb 2012, 1:23 PM
This is a bug within DataView so we will have to wait for it to get fixed in the framework. I do not do anything special for selecting.

Any idea if this has been fixed in the RC?

hallikpapa
26 Feb 2012, 2:08 PM
How would you handle custom rendering? I am trying to color code cells based on data returned, but one thing is passed into the renderer: the record.

Any suggestion on the best way to style a cell before rendering?



header : "External",
dataIndex: 'ueid',
style : "text-align: center;",
width : 100,
renderer : function(empty_var, rec) {
if (rec.m_id == rec.MozMax.ueid) {
console.log('This is where I want to color the cell green');
}
return rec.MozPage.ueid;
}

mike lebowski
26 Feb 2012, 5:00 PM
How would you handle custom rendering? I am trying to color code cells based on data returned, but one thing is passed into the renderer: the record.

Any suggestion on the best way to style a cell before rendering?



header : "External",
dataIndex: 'ueid',
style : "text-align: center;",
width : 100,
renderer : function(empty_var, rec) {
if (rec.m_id == rec.MozMax.ueid) {
console.log('This is where I want to color the cell green');
}
return rec.MozPage.ueid;
}


Maybe I am missing your point. I am not sure what you mean by "before rendering". I am using the render method to test the value, and conditionally determine a display value, and a css class , and then I finish render like this:
return '<span class="' + cls + '">' + displayValue + '</span>';

Not sure if that helps you.

mike lebowski
26 Feb 2012, 5:01 PM
question for Mitchell, is there a properties way to add styling (cls) to a column header?
Or that will have to be done thru css selectors? I am asking b/c I am thinking of one case where i might want different styling for certain column headers within the same grid.

shaneavery
26 Feb 2012, 5:11 PM
@Mike Lebowski,

You asked:



Any idea if this has been fixed in the RC?


The answer is "Yes". I am using RC and it is working correctly now.

hallikpapa
26 Feb 2012, 5:24 PM
Maybe I am missing your point. I am not sure what you mean by "before rendering". I am using the render method to test the value, and conditionally determine a display value, and a css class , and then I finish render like this:
return '<span class="' + cls + '">' + displayValue + '</span>';

Not sure if that helps you.

So simple I didn't see it. I was able to style the text, I will try and make the background a specific color too. Thanks!

What about if I wanted to change the style of a whole row background based on a value of a certain column? Is there a way with this grid plugin to select specific row and style it so it's highlighted? For instance, Say I am looping through records in the store, and if any value in the column "status" == "ok", I want to color the entire row green.

atl
28 Feb 2012, 11:30 AM
Great component!

But i got a problem with applying features during re-open view with gridview component. The console throw me an error:


Uncaught Error: [Ext.create] Invalid class name or alias 'undefined' specified, must be a non-empty string


I debug that and it is after calling 'me.callParent(arguments)' method.

Any ideas how to workaround that??

I am having this issue too - the first time it is created fine, when I destroy and recreate it throws that error.. It appears this is the offending line:



feature = Ext.create(feature, cfg);


I'm new to this framework, but from debugging it looks like cfg.grid doesn't have a cls when recreating so I changed that line to:


if (cfg.grid.hasOwnProperty('_cls')) {
feature = Ext.create(feature, cfg);
}

The first time it evaluates to true, but when recreating it skips that line. Not sure what the consequenses are, and I doubt its the root cause or the right approach but it works in a pinch. I am just trying to put together a mockup so it is no worries at the moment, but I would like to know why this is failing before creating an application with Sencha Touch.

alohainc
5 Mar 2012, 3:20 AM
Hey I am new to sencha, how can I add alternate row color to Ext.ux.touch.grid?

mitchellsimoens
5 Mar 2012, 5:23 AM
Use CSS pusedo selector.

alohainc
5 Mar 2012, 6:44 AM
Not getting exactly how to use CSS pusedo selector in "Ext.ux.touch.grid".

mitchellsimoens
5 Mar 2012, 6:50 AM
Look at the DOM structure. Each row is a <div> with .x-dataview.item CSS class. You can then use CSS to have those alternate colors.

mike lebowski
6 Mar 2012, 12:39 PM
Anybody else having problem with the DataGrid not being able to find the store?

http://www.sencha.com/forum/showthread.php?185276-RC2-problem-DataView-Grid-quot-apply-store-quot-cannot-find-store

no one has any such problem going from beta to rc or final? very strange as this is the only thing that broke for me in that move

mitchellsimoens
16 Mar 2012, 4:44 AM
Any reason why you have the grid wrapped in a container? Doesn't look like the container is adding anything.

alohainc
16 Mar 2012, 6:05 AM
I have used container to give it hieght and width to grid. That container is one view file, later I added it as an item in view port.

mitchellsimoens
16 Mar 2012, 6:12 AM
From my point of view you don't need to have the container around it. But try adding align : 'stretch' to your layout config.

alohainc
16 Mar 2012, 6:25 AM
Ok. I try it. But right I think my problem is to bind store to List/Grid. How to bind store in controller.

mitchellsimoens
16 Mar 2012, 6:26 AM
It's looking for a store with a storeId of 'Stores' in the StoreManager.

alohainc
16 Mar 2012, 6:32 AM
In the above code we can see that, I have store named Stores and I checked DOM structure too. There is no data coming to the grid.

mitchellsimoens
16 Mar 2012, 6:36 AM
So then you don't have a store created with that storeId

alohainc
16 Mar 2012, 6:56 AM
Do you mean that I must add storeid to Stores store. I tried that too, same result. The way I am using the model, store and data, is it correct?

mitchellsimoens
16 Mar 2012, 7:03 AM
All the grid is is a DataView and it handles the itemTpl. That's all the grid does. So if you specify a string as the store config, it will look for the store in the StoreManager. If one is not found, it won't display anything. If you create an instance of a store with a storeId it will be placed in the StoreManager. If you put the store in the stores array in the application it will create an instance.

alohainc
16 Mar 2012, 7:16 AM
I added storeid as follows,



Ext.define('Sushi.store.Stores', {
extend: 'Ext.data.Store',
requires: 'Sushi.model.Stores',
storeid: 'Stores',
config: {
autoLoad: true,

model: 'Sushi.model.Stores',

proxy: {
type: 'ajax',
url: 'data/storesData.json',

reader: {
type: 'json'
}
}
}
});




and added following to controller, and its giving me undefined. My grid is also blank.


var store = Ext.data.StoreManager.get('Stores');
alert(store.getAt(0));

mike lebowski
16 Mar 2012, 7:29 AM
I think you have the same problem I ran into at the change over from beta to RC. At that point my grids became unable to locate their stores. It was b/c I was defining them as you are , via a create statement in the container config, as opposed to an xtype declaration. See this thread:

http://www.sencha.com/forum/showthread.php?186667-Ext.ux.touch.grid.View-users-anyone-using-in-an-MVC-app&p=752841 (http://www.sencha.com/forum/showthread.php?186667-Ext.ux.touch.grid.View-users-anyone-using-in-an-MVC-app&p=752841#post752841)

mitchellsimoens
16 Mar 2012, 7:47 AM
It needs to ne in te config object block and needs to be 'storeId'

alohainc
17 Mar 2012, 1:55 AM
Added 'storeId' to config like below,


Ext.define('MyApp.store.Stores', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.Stores',

config: {
autoLoad: true,
storeId: 'Stores',
model: 'MyApp.model.Stores',

proxy: {
type: 'ajax',
url: 'data/storesData.json',

reader: {
type: 'json'
}
}
}
});




and changed Ext.create like below,

console.log('Store List grid');


Ext.define('MyApp.view.StoreListGrid', {
extend: 'Ext.Container',
xtype: 'StoreListGrid',
requires: ['Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'],

config: {
scrollable: 'verticle',
cls: 'storeListGrid',
layout: {
type: 'hbox'
},
items: [
{
xtype : 'touchgridpanel',
itemId: 'storeListGrid',
flex: 1,
store: 'Stores',
calcWidth: true,

features: [
{
ftype: 'Ext.ux.touch.grid.feature.Sorter',
launchFn: 'initialize'
}
],
columns: [
{
header: 'Store Name',
dataIndex: 'StoreName',
cls: 'storeListGridStyle',
width: '40%',
filter: { type: 'string' }
},
{
header: 'Store Location',
dataIndex: 'StoreLocation',
cls: 'storeListGridStyle',
width: '60%'
}
]
}
]
}
});



still not working, grid is blank. Please help.

mitchellsimoens
17 Mar 2012, 6:37 AM
Do a Ext.getStore('Stores') does that return the instance? If not, then you need to create an instance of it somewhere like adding the store to the stores array in Ext.application.

alohainc
18 Mar 2012, 10:31 PM
I do get instance of store, but not the data/items in it.

FBlack
19 Mar 2012, 12:02 AM
I do get instance of store, but not the data/items in it.

You can probe with layout: vbox in Container

alohainc
19 Mar 2012, 1:56 AM
I aready have may grid in hbox as follows,


Ext.define('MyApp.view.StoreListGrid', {
extend: 'Ext.Container',
xtype: 'StoreListGrid',
requires: ['Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'],

config: {
scrollable: 'verticle',
cls: 'storeListGrid',
layout: {
type: 'hbox'
},
items: [
{
xtype : 'touchgridpanel',
id: 'storeListGrid',
flex: 1,
store: 'Stores',

And I tried checking the data using alert messages and DOM structure, but Its blank.

FBlack
19 Mar 2012, 3:46 AM
I aready have may grid in hbox as follows,


Ext.define('Sushi.view.StoreListGrid', {
extend: 'Ext.Container',
xtype: 'StoreListGrid',
requires: ['Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'],

config: {
scrollable: 'verticle',
cls: 'storeListGrid',
layout: {
type: 'hbox'
},
items: [
{
xtype : 'touchgridpanel',
id: 'storeListGrid',
flex: 1,
store: 'Stores',

And I tried checking the data using alert messages and DOM structure, but Its blank.

try this:


Ext.define('Sushi.view.StoreListGrid', {
extend: 'Ext.Container',
xtype: 'StoreListGrid',
requires: ['Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'],

config: {
scrollable: 'verticle',
layout: 'vbox',
cls: 'storeListGrid',
items: [
{
xtype : 'touchgridpanel',
id: 'storeListGrid',
flex: 1,
store: 'Stores',

alohainc
19 Mar 2012, 6:30 AM
FBlack I have changed code according to you. I also tried binding grid in controller as following,


,

launch: function () {
console.log('onLaunch controller');

debugger;
var store = Ext.getStore('Stores');
tmp2 = store.getCount();
var grid = Ext.getCmp('storeListGrid');
grid.setStore(store);


}

Here my Ext.getStore('Stores') is giving me 0. I am stuck here for many days. store is instantiated but data is not coming. Help please.

FBlack
19 Mar 2012, 6:45 AM
where do you create the store?

alohainc
19 Mar 2012, 6:54 AM
I have added store in stores array in Ext.application as follows,


Ext.application({
name: 'MyApp',

views: [ MyViewport' ],
models: ['Stores'],
stores: ['Stores'],

FBlack
19 Mar 2012, 7:40 AM
ok, but where do you create the store?? where do you do Ext.define('store,{
extend: 'Ext.data.Store',
config:{
..............
}
});????
where do you do this??

spoussa
19 Mar 2012, 3:00 PM
I have a related issue. My store is created and doing fine. But the setStore(store) has no effect. If I set the same store in the ux.touch.grid.View config: { store: ... } things work.

I had setStore() working in PR4 or some older version.

Any glue where the break might be?

-sakari

alohainc
19 Mar 2012, 11:04 PM
Its in store folder in Stores file as below,




Ext.define('MyApp.store.Stores', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.Stores',

config: {
autoLoad: true,
storeId: 'Stores',
model: 'Sushi.model.Stores',

proxy: {
type: 'ajax',
url: 'data/storesData.json',

reader: {
type: 'json'
}
}
}
});

mitchellsimoens
20 Mar 2012, 4:47 AM
Its in store folder in Stores file as below,




Ext.define('Sushi.store.Stores', {
extend: 'Ext.data.Store',
requires: 'Sushi.model.Stores',

config: {
autoLoad: true,
storeId: 'Stores',
model: 'Sushi.model.Stores',

proxy: {
type: 'ajax',
url: 'data/storesData.json',

reader: {
type: 'json'
}
}
}
});



That's where you defined the store but an instance needs to be created for it to be put into the StoreManager using the storeId.

lincon6
22 Mar 2012, 11:43 PM
hi mitchellsimoens,

Is it possible to toggle column?
It's an awesome feature in old version.

Regards

mitchellsimoens
23 Mar 2012, 4:24 AM
hi mitchellsimoens,

Is it possible to toggle column?
It's an awesome feature in old version.

Regards

It's coming. I have it working locally but it is part of a new feature I'm working on that I think will be awesome

jhoweaa
26 Mar 2012, 12:53 PM
Mitchell,

I've been playing around with your touch grid component and I've run across a problem that I'm not sure how to address. I have a component which has a definition like this:



Ext.define('Foo.view.MyList', {
extend:'Ext.ux.touch.grid.View',
xtype: 'mylist',
requires: [
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
],
config: {
cls: 'mycls touchgridpanel',
features: [
{
ftype: 'Ext.ux.touch.grid.feature.Sorter',
launchFn: 'initialize'
}
],
columns: [ ... ]
}


I instantiate and display this view as a view which gets pushed on to a NavigationView. I create the view and do a push and the view displays correctly. I click the back button and try again and it fails. I used your suggestion in a different thread to recreate the view each time since it should have been auto destroyed. However, when I try to create a new instance the creation fails when it tries to initialize the features. Instead of having the 'ftype' of 'Ext.ux.touch.grid.feature.Sorter', the features property contains an object with a grid property and the launchFn, not an ftype and a launchFn. When it tries to initialize things the ftype is undefined and I get an 'Invalid class name or alias 'undefined' specified, must be a non-empty string'. I tried a little bit of debugging and noticed that the 'destroyFeatures' method does not seem to be called. If the view is destroyed, is this method supposed to be called?

Thanks.

Jim

Soenhay
29 Mar 2012, 1:48 PM
A few points:
-theView extends a panel and has some other stuff on it.
-If I don't dock it then the grid columns are centered vertically and their width does not take up the entire area.
-If I use width: '100%' instead of docked then the grid is centered vertically.
-The store is created and populated and attached to theGridView.
-getGridColumnsArray() returns an array of column definitions.
-I do have working grids elsewhere, here I am trying to make my use of it more dynamic.
-The column headers show up but no data shows up.

Questions:
-Can I even create a grid this way? Like I said, the headers show up so I think yes.
-Any idea why the rows are not showing up when there is data in the store?
-Out of curiosity... should I pass theStoreId or theStore into the create method? or does it matter? I have been passing theStoreId in other views without any problems.



var theGridViewId = theViewId + '_grid';
var theViewItems = theView.getItems().items;
Ext.Array.each(theView, function (item, index, theViewItemsItSelf) {
if (item.id) {
if (item.id == theGridViewId) {
theGridView = item;
}
}
});
if (!theGridView) {
try {
theGridView = Ext.create('ux.grid.View', {
//docked: 'top',
flex: 2,
id: theGridViewId,
store: theStoreId,
columns: theView.getGridColumnsArray(rptTypeKey)
});

//Add theGridview to theView since it did not previously exist
theView.add([theGridView]);
}
catch (ex) {
}
}


This is similar to what is returned from the function:



columns =
[
{
header: 'col1',
dataIndex: 'col1',
style: 'padding-left: 1em;',
style: 'text-align: center;',
width: '33%',
filter: { type: 'string' }
},
...
];



Edit/Update
The problem ended up being that everything was there but only the column headers (toolbar) was displayed.
To get the data to show up I had to pass in a height value.
Passing in height: '100%' does not work.
Passing in height: 100 or some other high enough number does work.... still need to figure out a better way to decide what height to pass in.....
Also, removing the layout of the panel causes the dock to be unnecessary....
Using dock only works for the column headers as the columns for each row would not have correct widths since they are percentage based.

Edit 3April2012:
Manually setting a height has its own problems. For example, If I set it high enough for every item to be displayed on the screen but the items have a height that is close to that height then you will not be able to scroll to them... not sure why but to make a long story short..... I just created the grid with a flex of 2 to fill up the remaining space and everything is working great now. I edited the code to reflect this.

badgerb1
30 Mar 2012, 9:43 AM
Hi Mitchell,

Found a problem with Features.

If you have a grid as part of an xtyped view, the second time you instantiate the view to try to reuse it, the features are not defined properly anymore and an error occurs in initFeatures in this code:



if (typeof feature === 'object') {
cfg = feature;
feature = feature.ftype;
delete cfg.ftype;
}

cfg.grid = me;


feature = Ext.create(feature, cfg);// ERROR ACTUALLY OCCURS HERE.







It seems that the feature that used to be defined like this...

{
ftype:'Ext.ux.touch.grid.feature.Sorter',
launchFn:'initialize'
}

is now defined like this {



grid: Ext.apply.create.Class
launchFn: "initialize"
}



THis causes the feature.ftype to be undefined when the Ext.create is called later.

This only happens if the grid is defined inside of another class. I.E.



Ext.define('Sansio.view.TestPanel', {
extend:'Ext.Container',
xtype:'testpanel',
requires:[
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Sorter'
],
config:{
cls:'dashboardContainer',
items:[
{xtype:'container',
layout:'fit',
cls:'dashboardPanel',
items:[
{
xtype:'touchgridpanel',
store:'testStore',
features:[
{
ftype:'Ext.ux.touch.grid.feature.Sorter',
launchFn:'initialize'
}
],
columns : [
{
header : 'Date/Time',
dataIndex : 'serviceDate',
width:'16%',
renderer:function(value, values) {
return Ext.Date.format(value, 'm/d/y H:i:s');
},
filter:{type:'date'}
},

{
header : 'Call',
dataIndex : 'callnumber',
width:'10%',
filter:{type:'string'}
},
{
header : 'Status',
dataIndex : 'status',
width:'10%',
filter:{type:'string'}
}
]
}
]
}
]
}
});


Then if I have a panel with the following definitions in it.

panel.insert(1,{xtype:'testpanel',
itemId:'test1'
});
panel.insert(2,{xtype:'testpanel',
itemId:'test2'
});
[/CODE]

The second one errors out.

Thanks
Bob

mitchellsimoens
30 Mar 2012, 9:47 AM
Just pushed a small change to Feature.js to attempt to fix the delete of the ftype. Let me know if that helps.

QuinnPerkins
13 Apr 2012, 3:34 AM
mitchellsimoens, thanks so much for your work on this project.

I was hoping someone could help with a few issues with the editable grid features. Playing with the files provided in the download.

1) I can't seem to empty a field. If I click the 'x' or delete it out, it just reverts to the previous values.
2) If I pass an empty cell value in my store, the cell does not seem to be editable (to be able to add a value).
3) Is it possible to use a select/pulldown in a cell? If so, could anyone help me with a code sample?

Thanks!

mitchellsimoens
13 Apr 2012, 11:28 AM
I just pushed two fixes to the Editable feature to fix the error for empty values and also for tapping on select fields. I also updated the editable.html example to use a selectfield, look at the active column.

savitanebula
15 Apr 2012, 10:25 PM
Hi mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens),

Thanks for sharing "EXT.ux.touch.grid"..

Its very useful, Hope that it gets included as an xtype in the next release of Sencha Touch..

I have certain doubts as in where to use what..

I have used the grid as seen in the below figure, I want on selection of the record on the Grid, the 'Delete' button to be enabled & delete the selected record from the DB.

Screenshot for the same:

34067


Is this Achievable???


If any queries do let me know,

Thanks in advance...

mitchellsimoens
16 Apr 2012, 3:39 AM
Ext.ux.touch.grid.View extends Ext.dataview.DataView so any events it has will work here. So you can use the selectionchange event to enable/disable the button.

Eugene Ivakhiv
17 Apr 2012, 5:52 AM
Hello,

I'm new to Sencha Touch and having hard time with layouts, especially with docking.
The problems are visible in one of the GridView demo pages:
https://github.com/mitchellsimoens/Ext.ux.touch.grid/blob/master/showhide.html
With top toolbar visible I cannot seem to scroll grid down to the very last item (Wal-Mart...), it looks like scrollable area is cut slightly in height by the height value of docked toolbar.
On the other hand, changing toolbar dock to bottom completely hides toolbar, however I can see it in DOM below the grid.

I've fiddled a little with .x-body style and removed min-height: 100%; and docking started to work fine.

Could someone clarify what is wrong with heights in docking scenario?

mitchellsimoens
17 Apr 2012, 5:54 AM
The CSS should add a margin to the bottom.

Eugene Ivakhiv
17 Apr 2012, 6:23 AM
Could you elaborate please about the margin?
I've tested pages with default styles only.

Is it supposed to be fixed with some CSS changes?

mitchellsimoens
17 Apr 2012, 6:33 AM
docking toolbars in a dataview, the scroller won't update it's size to allow for scrolling fully. Adding a bottom margin helps.


.touchgridpanel .x-dataview-container {
margin-bottom : 2.5em;
}

For example.

Eugene Ivakhiv
17 Apr 2012, 6:44 AM
The code you've provided is already in Ext.ux.grid.View.css
However it does not influence visibility of bottom docked toolbar which is still below the visible area.

mitchellsimoens
17 Apr 2012, 6:54 AM
The code you've provided is already in Ext.ux.grid.View.css
However it does not influence visibility of bottom docked toolbar which is still below the visible area.

Looking good for me.

Eugene Ivakhiv
17 Apr 2012, 7:06 AM
I think this is some kind of misunderstanding.

Mentioned margin has nothing to do with the bottom toolbar. Can you try it for yourself?
Just change toolbar docked attribute from 'top' to 'bottom' in showhide.js

mukeshgla
17 Apr 2012, 9:52 PM
Hi,

I have increased the number of columns from 5 to 10, but the grid view is distorted, can anyone please tell me how to render proper34173

elastoffice
18 Apr 2012, 1:14 AM
I have a direct store and I have set remoteSorting: true.
The problem is that the remote sorting doesn't work with the grid plugin.
Remote sorting is supported?

couetbis
20 Apr 2012, 1:16 AM
Hi,
I use grid, and thanks for this.
Is it possible to change label header on the fly ?

I want to rename the labels header depending on the values ??of a previous screen.

AnujaSonawane
20 Apr 2012, 5:44 AM
hello,
i am using a tabpanel and in that i have used the view.js

The code is given as below:

/**
* @author Manish Kumar
* This file contain UI design for entryReport
* entryReportPanel is xtype that will calls different tab panel
*/


Ext.require([
'Ext.ux.touch.grid.View'
]);

Ext.define('TestModel', {
extend : 'Ext.data.Model',
fields : [
'company',
'price',
'change',
'pct',
'updated'
]
});

var store = Ext.create('Ext.data.Store', {
model : 'TestModel',
autoLoad : true,
data:[{company:'abc',price:234,change:'no',pct:'yes',updated:'yes'}]

});





Ext.define('Main.view.entryReportPanel', {
extend: 'Ext.Panel',
xtype:'entryReportPanel',

config: {
layout: 'card',
},
/*
entryReportPanel = Ext.extend(Ext.Panel, {

layout: 'card',*/


listeners: {
afterrender: function(){
this.parent.doComponentLayout();
},
},

initialize: function() {



this.tabPanel = new Ext.TabPanel({
type: 'dark',
dock: 'top',
animation: 'cube',

items: [{
xtype: 'toolbar',
docked: 'top',
layout: {
pack: 'justify',
},
defaults: {
iconMask: true,
ui: 'plain'
},
items: [{
xtype : 'button',
iconCls: 'refresh',
iconAlign: 'right',
showAnimation: true,
scope: this,
handler: function() {
var tab = this.tabPanel.getActiveItem();
tab.onRefresh(tab);
}

}, {
xtype: 'segmentedbutton',
items: [{
text: 'Natraj Gas',
cls: 'mainAppTitle',
handler: function() {
client.showInfoWindow(); // It will work like a popup window

}
}],

}, {
xtype : 'button',
iconCls: 'settings',
iconAlign: 'left',
showAnimation: true,
handler: function() {
client.showSettingsWindow(); // It will work like a popup window
}
}]

},{
xtype : 'touchgridpanel',
title: '24 Hours',
width:'100%',
duration: 1,
store : store,
colModel : [
{
header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
sortable : false,
filter : { type : 'string' }
},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
},
{
header : 'Change',
dataIndex : 'change',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}
},
{
header : '% Change',
dataIndex : 'pct',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}
},
{
header : 'Last Updated',
dataIndex : 'updated',
hidden : true,
style : 'text-align: right; padding-right: 1em;',
width : '15%'
}
]

}, {
//xtype: 'gridEntryReportPanel',
title: '7 Days',
duration: 7,
}, {
//xtype: 'gridEntryReportPanel',
title: '30 Days',
duration: 30,

}]

});
this.add(this.tabPanel);
this.callParent(arguments);
//entryReportPanel.superclass.initComponent.call(this);
},
});




The control is not displayed as in only the toolbar is displayed partially in the top left corner
can someone please help.
I am not getting this control to work for me

Soenhay
20 Apr 2012, 6:13 AM
Hi,
I use grid, and thanks for this.
Is it possible to change label header on the fly ?

I want to rename the labels header depending on the values ??of a previous screen.


I do this by getting the new column information from a previous view then destroying and recreating the grid with the new column information........ If there is a better way I would also like to know.

Soenhay
20 Apr 2012, 6:16 AM
If you download the SmartGlance demo on your phone you will see that there is a feature where u can swipe multiple columns while keeping some columns frozen.

How would I implement something like this with your grid?

mitchellsimoens
20 Apr 2012, 6:20 AM
I do this by getting the new column information from a previous view then destroying and recreating the grid with the new column information........ If there is a better way I would also like to know.

I can brainstorm on a better way to be built in but you could execute this:


var header = grid.getHeader();

header.setHtml(grid._buildTpl(grid.getColumns(), true));

That should update the header but not sure if it will have any issues.

llraj
20 Apr 2012, 7:40 AM
Mitchell:

The grid looks great with horizontal scrolling. Is there a way to lock/freeze a column ? I have to lock the first column(of row labels) so that while scrolling horizontally user knows the row they are on. It is similar to the header row always being visible while scrolling vertically.

Thanks

mitchellsimoens
20 Apr 2012, 8:00 AM
Working on that on my off time (which isn't much). I had locking working but the scrolling of the nonlocked columns wasn't working in horizontal scrolling so I dumped it to take a fresh look at it.

Soenhay
20 Apr 2012, 9:51 AM
I can brainstorm on a better way to be built in but you could execute this:


var header = grid.getHeader();

header.setHtml(grid._buildTpl(grid.getColumns(), true));

That should update the header but not sure if it will have any issues.

This works for me with one difference... instead of using grid.getColumns() I put my new columns array. Thanks :)

27Apr2012
Edit: This doesn't seem to work if I add or remove columns.

AnujaSonawane
21 Apr 2012, 12:26 AM
I am new to sencha touch 2.0 and after using some custom xtype, i tried using Ext.ux.touch.grid.
I have a main tabpanel in which there is 2 panels, say entryReportPanel
Now in this entryReportPanel, i have called the xtype touchgridpanel.
But this does not display anything but a small part of the toolbar.
Even if i give a title or any width to the toolbar it does not show up anything.

Mitchell please help. Is there an issue with the layout.
Or is there any other way i ahve to use View.js
I have post the code below.

Ext.require([

'Ext.ux.touch.grid.View'

]);


Ext.define('TestModel', {

extend : 'Ext.data.Model',
fields : [
'company',
'price',
'change',
'pct',
'updated'
]


});

var store = Ext.create('Ext.data.Store', {

model : 'TestModel',
autoLoad : true,
data:[{company:'abc',price:234,change:'no',pct:'yes',updated:'yes'}]
});






Ext.define('Main.view.entryReportPanel', {

extend: 'Ext.Panel',
xtype:'entryReportPanel',



config: {


layout: 'card',

},







initialize: function() {



this.tabPanel = new Ext.TabPanel({

type: 'dark',
dock: 'top',
animation: 'cube',

items: [{


xtype: 'toolbar',
docked: 'top',
layout: {
pack: 'justify',


},


defaults: {


iconMask: true,
ui: 'plain'

},


items: [{


xtype : 'button',
iconCls: 'refresh',
iconAlign: 'right',
showAnimation: true,
scope: this,
handler: function() {
var tab = this.tabPanel.getActiveItem();
tab.onRefresh(tab);
}





}, {


xtype: 'segmentedbutton',
items: [{


text: 'Natraj Gas',
cls: 'mainAppTitle',
handler: function() {
client.showInfoWindow(); // It will work like a popup window

}


}],


}, {


xtype : 'button',
iconCls: 'settings',
iconAlign: 'left',
showAnimation: true,
handler: function() {
client.showSettingsWindow(); // It will work like a popup window
}


}]





},{


xtype : 'touchgridpanel',
title: '24 Hours',
width:'100%',
duration: 1,
store : store,
colModel : [

{


header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
sortable : false,
filter : { type : 'string' }


},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
},
{


header : 'Change',
dataIndex : 'change',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}


},
{


header : '% Change',
dataIndex : 'pct',
cls : 'centered-cell',
width : '15%',
renderer : function(value, values) {
var color = (value > 0) ? '009933' : 'FF0000';
return '<span style="color: #' + color + ';">' + value + '</span>';
}


},
{


header : 'Last Updated',
dataIndex : 'updated',
hidden : true,
style : 'text-align: right; padding-right: 1em;',
width : '15%'


}


]



}]



});


this.add(this.tabPanel);
this.callParent(arguments);



},

});




The control is not displayed as in only the toolbar is displayed partially in the top left corner
can someone please help.
Please give an example where in the xtype touchgridpanel is called from a tabpanel
I am not getting this control to work for me

AnujaSonawane
22 Apr 2012, 2:06 AM
Hi Michell, tried given by you on page 1 for the carousel
But i guess i am going wrong with the layouts.
I have taken the code as it is but it showing up like it is shown in the pic attached.

Can u please tell me what is wrong?
The response for this xtype seems to be really great, but as i am not getting it right, i am confused as to what is going wrong.34351

alexgrimaldi
23 Apr 2012, 1:55 AM
Hi Mitchell,

first of all thank you very much for this component.

I am having a odd problem. When I define a grid that extends Ext.ux.touch.grid.View, I have to define its height in the config section otherwise the grid will show only its headers an not the data. On the other hand, If I create a Ext.ux.touch.grid.View I do not need to. I am sure that I am missing something but I do not know what.

Can you (or anybody else) please help?

Thanks,
Alex

Soenhay
27 Apr 2012, 12:25 PM
I am having a odd problem. When I define a grid that extends Ext.ux.touch.grid.View, I have to define its height in the config section otherwise the grid will show only its headers an not the data. On the other hand, If I create a Ext.ux.touch.grid.View I do not need to. I am sure that I am missing something but I do not know what.



Try setting flex: 2 in the config section.

mitchellsimoens
27 Apr 2012, 12:53 PM
The control is not displayed as in only the toolbar is displayed partially in the top left corner
can someone please help.
Please give an example where in the xtype touchgridpanel is called from a tabpanel
I am not getting this control to work for me

It looks like your items are children of the toolbar which is docked. I don't think you are meaning to do that.

llraj
30 Apr 2012, 5:23 AM
Mitchell:

How can I have a tap handler for the grid that has access to the row-column data? i.e. column defined in grid config where tap occurred and the row/record from the store. The tap handler for DataView provides the row I just need the column.

Thanks

Lawrence

TonyBones
4 May 2012, 9:58 AM
UPDATE: Oh brother! I had xtype: 'grid' in my view and totally forgot. That's what was causing the issue! I changed it to 'touchgridpanel' and its working. But still curious to know why I had to install the files in the SDK folders instead of my custom scripts folder?


:-/So I'm a little confused as to how to even "install" this and begin using it.

I just download Sencha Touch 2 yesterday for the first time. And I pulled this addon from github. I just can't figure out how to get it installed and working.

I add this to my app.json file:

{
"path": "scripts/grid/feature/Feature.js"
},
{
"path": "scripts/grid/feature/Abstract.js"
},
{
"path": "scripts/grid/feature/Editable.js"
},
{
"path": "scripts/grid/feature/Paging.js"
},
{
"path": "scripts/grid/feature/Sorter.js"
},
{
"path": "scripts/grid/View.js"
}

...
//for css
{
"path": "resources/css/Ext.ux.grid.View.css"
}



And when I refresh my project in Chrome I get JS error:


sencha-touch.js:7665GET http://localhost/sammspad/sdk/src/ux/touch/grid/feature/Feature.js?_dc=1336153714900 404 (Not Found)


sencha-touch.js:8007Uncaught Error: [Ext.Loader] Failed loading 'http://localhost/sammspad/sdk/src/ux/touch/grid/feature/Feature.js', please verify that the file exists


sencha-touch.js:6357Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.grid


Why is it looking in the SDK location? The Network tab in Chrome dev tool shows the files being download successfully from my "scripts" directory. Why is it trying to download it twice?

Thanks for any help,
Tony

EDIT: Side note, I did move the files from my scripts dir into the sdk location and while the first 2 errors above do go away I'm still left with the third error about "widget.grid" and the app still bombs out, stuck at the loading screen.

EDIT: I inspected the this.map.aliasToName collection and there (obviously) is no "widget.grid" entry. But there is a widget.touchgridpanel: "Ext.ux.touch.grid.View" entry. Any idea what's going on here? I searched for "widget.grid" string in source code and can't find it.

mitchellsimoens
4 May 2012, 10:38 AM
Look at the demos, notice how they require other classes which is how the files are loaded. You should not put them in app.json. Also note you have to setup a path for Ext.ux

TonyBones
4 May 2012, 10:42 AM
Look at the demos, notice how they require other classes which is how the files are loaded. You should not put them in app.json. Also note you have to setup a path for Ext.ux

I have been looking at the demos, and since I'm new to Sencha Touch as of 1 day, I'm still trying to figure it all out.

I used 'sencha generate' command to start a new project and what it makes is very different then your examples. So i'm confused as to which approach to use and how they can be used together. Also I thought using the app.json file was the preferred way???

thanks!

mitchellsimoens
4 May 2012, 10:44 AM
My demos aren't MVC, they are a "get your feet wet" demo. Using the requires is the way to load classes during development, you shouldn't add them to app.json. You should only add external files to the app.json, anything built with ST2 should be required.

TonyBones
4 May 2012, 11:03 AM
So your saying your files aren't external files, and they should be copied into the sdk/src folders?

mitchellsimoens
4 May 2012, 11:07 AM
My files are made with Sencha Touch so they aren't external. You should not mess with the src folder, you should have the grid stuff in a new folder maybe in assets/ux/ or something. Then add a path to Ext.Loader so that Ext.ux points to assets/ux/ like the demos do.

TonyBones
4 May 2012, 11:14 AM
ok, that's what I though, as I didn't want them in there anyway. But for some reason if they are not in there I keep getting:


GET http://localhost/sammspad/sdk/src/ux/touch/grid/View.js?_dc=1336158635376 404 (Not Found)

At the top of my View:

Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux.touch.grid': './scripts/grid'
}
});

And the View.js file is in that directory with all other js files in the sub dir of "feature".

So not sure what the problem is, do you?

Solved: I still had requires in the app.js file. When I removed it there and put it directly in the view then the correct files loaded.

mitchellsimoens
4 May 2012, 11:17 AM
When are you requiring the view versus setting the path?

TonyBones
4 May 2012, 11:28 AM
Now I'm getting this again:

Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.touchgridpanel

All files are being downloaded to browser. And I debugged and that widget line is def not in the alias collection.

My view looks like this:


Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext.ux': './scripts/ux'
}
});


Ext.require([
'Ext.Img',
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
]);




Ext.define("SammsPad.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar'
],
config: {
tabBarPosition: 'bottom',


items: [
...
{ xtype: 'touchgridpanel' }
...
]
}
});

TonyBones
4 May 2012, 11:34 AM
Don't know what happened, but now its working. Maybe I didn't hard refresh. Thanks for your help mitchellsimoens!!!

mitchellsimoens
4 May 2012, 11:46 AM
Don't know what happened, but now its working. Maybe I didn't hard refresh. Thanks for your help mitchellsimoens!!!

Great!

Just uploaded a quick MVC example. Basically the default app that is created when you create an app with Sencha Command and added a 3rd tab at the bottom with a simple grid.

vitand
4 May 2012, 1:40 PM
Just downloaded Ext.ux.touch.grid from github, but when I tried to use it in my project I got the following error.


Uncaught TypeError: Cannot read property 'features' of undefined Ext.define.constructor View.js:21 (https://localhost/eUHMmobile/lib_js/Ext.ux.touch.grid/View.js?_dc=1336166790309)

Debugging View.js I found that config is undefined in constructor: function(config) {

Here is the code where I am defining the datagrid

Ext.define('mobile.view.test.Test', {
extend: 'Ext.ux.touch.grid.View',
requires: [
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
],
layout: 'fit',
config: {
store : 'mobile.test.TestStore',


features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
columns : [
{
header : 'Name',
dataIndex : 'name',
style : 'padding-left: 1em;',
width : '40%',
filter : { type : 'string' }
},
{
header : 'Class Path',
dataIndex : 'classPath',
style : 'text-align: center;',
width : '15%',
filter : { type : 'string' }
}
]
}
});

Has anybody experienced the same issue ?
Thanks

TonyBones
4 May 2012, 2:49 PM
I'm having a rendering problem now. All my data items / rows are there, but the x-body x-scroll-view container div has a height of 0px. So all I see is the header across the top. If I manually change the the height then i see my rows. I tried using layout: 'fit' in the parent panel, but when i do then everything disappears. I'm not using fullscreen because i have it as a nested object in a tab panel.

The touchgridpanel's css is included and working. Any other ideas?

TonyBones
4 May 2012, 3:02 PM
Boom! figured it out.

It doesn't like this, these are child items of a Tab Panel


{
title: 'Approvals',
iconCls: 'organize',

items: [
{


docked: 'top',
xtype: 'titlebar',
title: 'Approvals'

},
{


xtype: 'touchgridpanel',
title: 'grid',
store: 'ApprovalLineItemStore',

columns: [ ... ]


but it does like this as tab panel child


{
xtype: 'touchgridpanel',
title: 'Approvals',
iconCls: 'organize',

store: 'ApprovalLineItemStore',

items: [

{

docked: 'top',
xtype: 'titlebar',
title: 'Approvals'

}

],

columns: [ ... ]

tinyfactory
7 May 2012, 1:02 PM
I see this component extends DataView, but I can't get it to use the emptyText value. Is there a good way to display emptyText when the grid has no records?

Thanks for the great component. Extremely helpful!

Alex

potnuru
15 May 2012, 10:09 AM
Recently downloaded Ext.ux.touch.grid from github, but when I tried to use it in my project it works without any error in the console.

But the sorting functinality doesn't work on this grid.

Here is the view code where I am defining the datagrid



Ext.define('LSTablet.view.quoter.AllQuotesSummary', {
extend: 'Ext.Container',
xtype: 'allQuotesSummary',
id: 'allQuotesSummary',
layout: 'vbox',
fullscreen: true,

layoutConfig: {
align: 'center'
},
requires: [
'Utils.Renderer',
'Ext.XTemplate',
'Ext.util.Format',
'Ext.field.Email',
'Ext.field.Select',
'Ext.field.Spinner',
'Ext.field.DatePicker',
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter',
'LSTablet.view.quoter.DealQuoteSummary',
],
config: {


items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'toolbarui',
items: [{
xtype: 'button',
text: 'Main Menu',
ui: 'buttonuiblack',
id: 'quoteBackButton',
name: 'quoteBackButton'
},
{
xtype: 'spacer'
},
{
xtype: 'title',
title: 'All Quotes'
},
{
xtype: 'spacer'
}]
},

{
xtype: 'toolbar',
docked: 'top',
ui: 'gridToolbar',
cls: 'tableToolbar',
items: [{
xtype: 'title',
title: 'All Quotes'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
name: 'searchButton',
id: 'searchButton',
iconCls: 'search',
iconMask: true,
cls: 'tableToolbarButton',
ui: 'buttonuiblack'
},
{
xtype: 'button',
name: 'addButton',
id: 'addButton',
iconCls: 'add',
iconMask: true,
cls: 'tableToolbarButton',
ui: 'buttonuiblack'
}
]
},
{
xtype: 'touchgridpanel',
id: 'allquotegrouppanel',
height: 800,


features: [{
ftype: 'Ext.ux.touch.grid.feature.Sorter',
launchFn: 'initialize'
}],

columns: [
{
header: 'Date',
dataIndex: 'updatedDate',
width: '15%',
renderer: Utils.Renderer.date,
style : 'text-align: center;',
sortable : true,

},
{
header: 'Customers',
dataIndex: 'customerName',
width: '35%',
style : 'text-align: center;',

},
{
header: 'Quote Group Name',
dataIndex: 'quoteGroupName',
width: '25%',
style : 'text-align: center;',
},
{
header: 'Financed Amount $',
dataIndex: 'totalFinancedAmount',
width: '25%',
style : 'text-align: center;',
renderer: Utils.Renderer.dollar
}
],
}],
}
});



Has anybody experienced the same issue ?
Thanks

mitchellsimoens
15 May 2012, 11:30 AM
Do you have a store that the grid is using?

potnuru
15 May 2012, 12:01 PM
Do you have a store that the grid is using?


Here you go Mitchell .. I have store and model attached for you

Ext.define('LSTablet.store.quoter.AllQuotesSummary', {
extend: 'Ext.data.Store',
requires: [ 'LSTablet.model.quoter.AllQuotesSummary'],

requires: [
'Utils.Url',
],
config:{
model : 'LSTablet.model.quoter.AllQuotesSummary',
storeId : 'AllQuotesSummaryStoreId',
// remoteFilter: true,
// remoteSort: false,
autoLoad: false,
proxy: {
type: 'ajax',
actionMethods: {
read: 'GET'
},
url: Utils.Url.rootPath + Utils.Url.getAllMyQuoteGroupsURL,
startParam: true,
extraParams: {},
requestPayload:{},
enablePagingParams: false,
noCache: false,
headers: {
'Content-Type': 'application/json;'
},
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
});



Ext.define("LSTablet.model.quoter.AllQuotesSummary", {
extend: 'Ext.data.Model',
config: {
fields: [{
name: "quoteGroupId",
type: "int"
},
{
name: "quoteGroupName",
type: "string"
},
{
name: "quoteGroupStatus",
type: "string"
},
{
name: "customerName",
type: "string"
},
{
name: "totalFinancedAmount",
type: "int"
},
{
name: "updatedDate",
type: "int"
}]
},


});

mitchellsimoens
15 May 2012, 2:05 PM
I don't see where in your grid that you are specifying the store

potnuru
15 May 2012, 2:22 PM
I don't see where in your grid that you are specifying the store

Mitchell I kind of do it in the controller. Here is the controller snippet



loadQuoteGroups: function(){
console.log('loadQuoteGroups for allQuotesSummary');
Ext.getStore('AllQuotesSummaryStoreId').load({
callback: this.onAllQuoteGroupsLoaded,
scope: this,
});

},

onAllQuoteGroupsLoaded: function(){
var quoteIdStore = Ext.getStore('AllQuotesSummaryStoreId');
this.getGridPanel().setStore(quoteIdStore);
},

vaish
17 May 2012, 3:23 AM
Hi Mitchell,

Its a great plugin. Its working fine. :-)

I need some help on how to delete an entire row before rendering the grid.
I dont want to delete that record in the store, just want to hide that without displaying.

Thanks,
Vaish

mitchellsimoens
17 May 2012, 4:50 AM
Hi Mitchell,

Its a great plugin. Its working fine. :-)

I need some help on how to delete an entire row before rendering the grid.
I dont want to delete that record in the store, just want to hide that without displaying.

Thanks,
Vaish

Filter the store.

mukeshgla
17 May 2012, 9:10 PM
Hi Mitchell,

I am using this Grid in a panel, I want to place this Grid in center of the Panel. For doing so I wrote below code:
Ext.define('MyCustomPanel', {
extend : 'Ext.Panel',
xtype : 'mycustompanel',
requires: [ 'MitchellGrid'],
config : {
layout : {
type : 'hbox',
align : 'center'

},
items : [ {xtype: 'mitchellgrid', flex :1}
]
}
});

Here "MitchellGrid" is the grid example given by you. I just modified it as per my needs. in normal case it renders properly but when I mention align : 'center' in layout the columns header move to center but the rows do not render.
Can you please let me know If I want to place this Grid in a panel at custom location( like here I want it in center) what should i do ?

Thanks & Regards
Mukesh Pandey

vaish
18 May 2012, 4:06 AM
Filter the store.


My scenario is I have two panels in VBox layout. I have gridpanel on top panel and charts in bottom panel both of them using same store. when i use sorters in grid, my chart is rePainted, gives a good effect. :)

I am using all records in the store to draw charts but want to hide/ filter two records in the grid.
since its using same store I think if i use filter i may loose that effect or chart will crash. :-?

Pls provide a sugesstion on this

mitchellsimoens
18 May 2012, 4:41 AM
@mukeshgla they render, you just haven't given the grid a height.

vaish
23 May 2012, 9:41 PM
Hi ,
Is there any listeners for grid. I thought all listeners for dataview should respond for this also. I tried but no luck.

Is there any events for grid like beforeRender.

I have defined a grid view extending Mitchell.grid.
created xtype of it and defined inside panel.
According to search the grid data changes.
My store has sorter defined

I have used sorter feature.
Using this I am sorting the grid. when I make a new search, its sorting with the previous sort.


How to define a default sorters.

mitchellsimoens
24 May 2012, 2:40 AM
Ext.ux.touch.grid.View extends Ext.dataview.DataView so all the events that DataView fires, the grid will also like itemtap. Sencha Touch 2 does not have a beforerender event.

Shuntie
5 Jun 2012, 5:11 PM
I'm (as so many) fairly new to Sencha Touch, and I love the plugin (and examples). But, I have two questions:

I would like to have the Prev, Go to page... etc at the top, and the column names below, just before the data. Is that possible, and if so, what do I need to change?

Second question: Is it possible to make the 'Go to page'-list have a (for example) check1.png to indicate the current page, and auto-scroll the list to the current page (to make it quicker to navigate from the current page)?

Syntona
12 Jun 2012, 5:11 AM
hi,

using Pseudo-elements of css on .x-dataview.item make alternate COLUMN distinguishable.

Looking inside DOM found that x-grid-cell also inherits the characterstic.


36148


Look at the DOM structure. Each row is a <div> with .x-dataview.item CSS class. You can then use CSS to have those alternate colors.

mitchellsimoens
12 Jun 2012, 5:13 AM
So override the CSS, you have control there.

Syntona
12 Jun 2012, 5:36 AM
I want alternate ROWs differentiation ..

i put


.touchgridpanel .x-dataview-item :nth-child(odd){
background-color: #ffffff ;
}


but this gets apply to x-grid-cell also and make grid look like alternate column. (as in pic)

my requirement is alternate rows..

mitchellsimoens
12 Jun 2012, 6:23 AM
Instead of x-dataview-item use it's parent.

Syntona
12 Jun 2012, 6:28 AM
it makes sense
but no effect on end result..

.touchgridpanel .x-dataview-container :nth-child(odd){
background-color: #ffffff ;
}

mitchellsimoens
12 Jun 2012, 6:36 AM
You were right the first time (think you had a space),


.touchgridpanel .x-dataview-item:nth-child(odd) {
background-color: #fff;
}

I also pushed an update to my github repo. If you open the index.html example you will see alt row. If you open the editable.html example you will see alt column

Syntona
12 Jun 2012, 6:51 AM
oops, silly mistake from my side..
thanks for correcting and taking time out.

mitchellsimoens
12 Jun 2012, 6:58 AM
oops, silly mistake from my side..
thanks for correcting and taking time out.

no problem. I try to modify the examples to add ways to do things for people

Annio
15 Jun 2012, 1:45 PM
Thanks you very much mitchellsimoens ! :D

csextjs
16 Jun 2012, 3:04 PM
Hello,

A great stuff and job well done.
Is there a search function?
using remote store and I want to able to search or filter rows before pushing to grid.

Thanks again.

Annio
18 Jun 2012, 4:10 AM
csextjs : you can filter the store

csextjs
18 Jun 2012, 7:43 AM
Thanks Annio.
I should've studied further before posting.

crgrah
21 Jun 2012, 8:10 AM
Im sure im missing something simple here.

this is my code, but no sort shows up when tapping the headers



var store = Ext.StoreMgr.get('ReferrerJsonStore');
store.on('load', function(){
var panel = Ext.create('Ext.Panel', {
title : 'Top Referrers',
baseCls: 'p-admin-gridview-panel',
top:20,
right:20,
bottom:20,
left:20,


layout : {
type : 'fit'
},


items : Ext.create('Ext.ux.touch.grid.View', {
flex : 1,
store : store,
calcWidth : true,
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
columns : [{
header : 'Full Name',
dataIndex : 'FullName',
style : 'padding-left: 1em;',
width : '20%',
sortable : true,
filter : { type : 'string' }
},
{
header : 'Phone#',
dataIndex : 'ContactNumber',
style : 'padding-left: 1em;',
width : '15%',
sortable : false,
filter : { type : 'string' }
},
.
.
.


thanks in advance

mitchellsimoens
21 Jun 2012, 8:23 AM
Did you include the CSS?

crgrah
21 Jun 2012, 9:26 AM
<!-- Ext.ux.touch.grid -->
<script type="text/javascript" charset="utf-8" src="grid/Ext.ux.touch.grid/feature/Abstract.js"></script>
<script type="text/javascript" charset="utf-8" src="grid/Ext.ux.touch.grid/feature/Feature.js"></script>
<script type="text/javascript" charset="utf-8" src="grid/Ext.ux.touch.grid/feature/HeaderMenu.js"></script>
<script type="text/javascript" charset="utf-8" src="grid/Ext.ux.touch.grid/feature/Sorter.js"></script>
<script type="text/javascript" charset="utf-8" src="grid/Ext.ux.touch.grid/View.js"></script>
<link type="text/css" rel="stylesheet" href="grid/resources/css/Ext.ux.grid.View.css" />

kjwenger
24 Jun 2012, 9:41 AM
as always, great job Mitchell and Sencha team!

quick Q tho: is column re-ordering possible already and if it is, could anybody give me a prod in the right direction?

much obliged!

k

kjwenger
24 Jun 2012, 9:57 AM
View.getColumn returns the last column if a dataIndex is given that is not currently used for a column. not a biggie.

kjwenger
24 Jun 2012, 10:00 AM
as always, great job Mitchell and Sencha team!

quick Q tho: is column re-ordering possible already and if it is, could anybody give me a prod in the right direction?

much obliged!

k

Mitchell already gave the answer in his code B):

{
xtype: 'button',
text: 'Swap A230/A260',
handler: function(button) {
var grid = button.up('touchgridpanel');


var a230 = grid.getColumns()[2];
var swap = Ext.apply(new Object(), a230);
var a260 = grid.getColumns()[3];
Ext.apply(a230, a260);
Ext.apply(a260, swap);
grid.setItemTpl(null);
grid.refresh();
}

This little example swaps/re-orders two columns.

lincon6
24 Jun 2012, 6:16 PM
Hi mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens),
will you consider adding summary feature?

:)
regards

potnuru
9 Jul 2012, 8:42 AM
HI mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens) ,

Using Ext.ux.touch.grid can we implement the Expand/Collapse Row like below?

Any pointers will really help us.



36972

mitchellsimoens
9 Jul 2012, 9:01 AM
You can but it's not supported out of the box

potnuru
9 Jul 2012, 11:06 AM
You can but it's not supported out of the box

Any pointers how I can implement this :-?

MaciejZabielski
10 Jul 2012, 5:01 AM
Hi!

I have been working with your grid in ST1 and it worked really good. Now I'm trying to migrate to ST2. I have updated to new grid component, my grid was dynamically generated, so:
1) Based on received XML I create a data model.
2) Link the model to Store (XML/AJAX)
3) Link the store to grid, inside grid use a function to create column model (.setColumns(this.getColModel())

When I look under debugger, I can see that myGrid.getColModel() returns two columns as expected. They have proper dataIndex mapping and header. When I get Store from grid,, it also has expected number of records with the same fields configured in dataIndex.

The problem is that only headers are displayed, and grid itself is not.
1) I don't think this is layout problem, grid has height (one can see a scroll bar)
2) Grid is not rendered in HTML (no x-grid-cell elements etc) - only headers :(

what else can I check? I'm loosing my mind here after half a day of going through the code. What am I doing wrong...? :((

Screen shot from debugger:
37015

mitchellsimoens
10 Jul 2012, 5:12 AM
I just added an example to load the columns from the response you may want to look at and always update your grid source files.

MaciejZabielski
10 Jul 2012, 6:06 AM
Ok, anyway, I can't see any problems and my col model is returned from a function.
I have checked what is going on inside _buildTpl and the only strange thing is the first "undefined" run (EDIT: it is made before "setColumns"), followed by two that looks ok (after applying setColumns)



"<div class="x-grid-cell" dataindex="undefined">{[this.undefined_renderer(values.undefined, values)]}</div>"
"<div class="x-grid-cell x-grid-cell-hd" dataindex="undefined">&nbsp;</div>"


"<div class="x-grid-cell" dataindex="DOCUMENT_ID" style="width: 50%;">{[this.DOCUMENT_ID_renderer(values.DOCUMENT_ID, values)]}</div>"
"<div class="x-grid-cell" dataindex="DOCUMENT_TYPE_ID" style="width: 50%;">{[this.DOCUMENT_TYPE_ID_renderer(values.DOCUMENT_TYPE_ID, values)]}</div>"


"<div class="x-grid-cell x-grid-cell-hd" dataindex="DOCUMENT_ID" style="width: 50%;">ID</div>"
"<div class="x-grid-cell x-grid-cell-hd" dataindex="DOCUMENT_TYPE_ID" style="width: 50%;">Type</div>"


So it looks good, but why nothing is rendered?
The nasty thing about it, is that I'm not sure if this is a problem with the grid, or some otehr ST1/ST2 compatibility problems.


EDIT / ANSWER: Now I finally have found very basic problem.... I have missed the callParent call...


initialize: function(){
this.setColumns(this.getColumns());
this.callParent();
},

csextjs
14 Jul 2012, 8:18 AM
37182I've spent many hours on the forum trying to find answer to my problem.
I can not show data on the grid, just shows headers in proper format.

I've used the MVC example given by mitchellsimoens.
When the grid is rendered initially, it does not fire load.
It fires only when I click on Header column, then gets requested JSON
from server.
however, if I use inline store with some sample data then it works.

here are the codes.



Ext.define('macc.model.Customer', {
extend : 'Ext.data.Model',

config : {
fields : [
{name: 'id', type: 'int'},
{name: 'custname', type: 'string'},
{name: 'phone', type: 'string'}
]

,proxy: {
type: 'ajax',
url: 'customer/list'
,reader:{
type: 'json',
rootProperty: 'data',
successProperty : 'success',
totalProperty : 'totalCount'
}
}
}
});

Ext.define('macc.store.Customer', {
extend : 'Ext.data.Store',

requires : [
'macc.model.Customer'
],

config : {
model : 'macc.model.Customer'
,storeId: 'customerStore'
,pageSize: 3
,autoLoad: false
,remoteSort: true
,remoteFilter: true

,sorters: [{
property: 'phone',
direction: 'ASC'
}]

}
});

Ext.define('macc.view.CustomerGrid', {
extend : 'Ext.ux.touch.grid.View',
xtype : 'CustomerGrid',

requires : [
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Paging',
//'Ext.ux.touch.grid.feature.Editable',
'Ext.ux.touch.grid.feature.Sorter',
//'Ext.field.Number',
'macc.store.Customer'
],

layout: 'fit',
config : {
store : true,
columns : [
{ dataIndex: 'id', hidden: true},
{
header : 'Customer',
dataIndex : 'custname',
width : '50%'
},
{
header : 'Phone',
dataIndex : 'phone',
width : '50%'
}
],
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Paging',
launchFn : 'initialize'
}
]
}

,applyStore : function() {
return new macc.store.Customer();
}
});

Ext.define('macc.view.Customerlist',{
extend: 'Ext.Panel',
xtype: 'customerlist',
requires: [
'macc.view.CustomerGrid'
],

config: {
iconCls: 'user',
title: 'Customers',
layout: 'vbox',
items:[
{
docked: 'top',
xtype: 'titlebar',
title: 'Customer List',
items:[
{
xtype: 'textfield'
,label: 'Search'
,action: 'search'
},
{
xtype: 'button'
,text: 'New Customer'
,align: 'right'
,action: 'pay'
}
]
},
{
xtype: 'CustomerGrid'
,id: 'customergrid'
,height: 500
}
]
}
});



I am getting the requested json from server correctly.
Checking through debugger, the store has data.
Everything looks good, the sorting is working, firing needed request to server.
If I set autoLoad: true in store, I get Loading... message and does not go forward.
Can someone please help?:((

Abhi_aec
15 Jul 2012, 10:29 PM
Hi,

I m using Ext.ux.touvh.grid in ST2 and my requirement is to provide select option with each row in a grid, and whatever row will select, the data of selected rows need to send back to server while click on submit button which will be placed at the end of the Grid.

Kindly help to resolve it...

csextjs
16 Jul 2012, 3:57 PM
Can someone please help on post #184?
My problem is very similar to post #181. I've done what MaciejZabielski did.
I've spent 2 days going through debugger, api docs, and forum but couldn't get it to work. I've learned a lot along the way on ST2.
I'm desperate on this issue.:((

csextjs
16 Jul 2012, 8:49 PM
Michell's MVC example he had this:



applyStore : function() {
return new Grid.store.Grid();
}


I replaced with:


initialize: function(){
this.setStore(new Grid.store.Grid())
this.setColumns(this.getColumns());
this.callParent();
this.getStore().load();
}


and it worked.

Michell, perhaps this is an error on you part?
Is this the proper way to do it?

badgerb1
17 Jul 2012, 5:01 AM
On #184

You have your store set to autoload:false. and then never load it. So you can either do what you showed in 187 or you can load the store in the apply method.

Pretty sure this will work.


applyStore : function() { var store = new Grid.store.Grid(); store.load(); return store; }

mitchellsimoens
17 Jul 2012, 5:15 AM
instead of store.load, new Grid.store.Grid({autoLoad : true});

badgerb1
17 Jul 2012, 6:32 AM
Oh good one, I like it.

Thanks
Bob

csextjs
17 Jul 2012, 7:57 AM
Thank you guys for you help.
I've tried both codes below.
However I still get Loading message and stops there.



applyStore : function() {
var store = new macc.store.Customer({autoLoad: true});
return store
}

applyStore : function() {
var store = new macc.store.Customer();
store.load();
return store
}

Abhi_aec
17 Jul 2012, 8:13 PM
Can someone please help on post #185?
:D

redned
19 Jul 2012, 9:45 AM
I posted this post in the thread for the Sencha Touch 1 version. But it is more relevant here.
I am trying to place a grid inside a panel. This panel is used in a card layout which switches depending on user actions. This panel will be used to display customer information. The page is not showing correctly and a grid layout is not present. It looks more like a list. Also the items from the store are not displaying. Can anyone point me in the right direction, please?



Ext.define('GFD.view.CustDetails', {
extend: 'Ext.ux.touch.grid.View',
paths : {
'Ext.ux.touch.grid': './Ext.ux.touch.grid'
},
requires:[
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter',
],
xtype: 'custdetails',
id:'custdetailsPanel',
config: {
items: [
{
xtype: 'spacer',
height: '50px'
},
{
xtype: 'touchgridpanel',
title: 'Cust Details',
id: 'custGrid',
store: 'CustomerStore',
columns:[
{
header: 'Customer Number',
dataIndex: 'cust_no',
style: 'padding-left: 1em;',
width: '40%',
},
{
header: 'Order Date',
dataIndex: 'order_date',
style: 'padding-left: 1em;',
width: '40%',
},
{
header: 'Telephone.',
dataIndex: 'tel_no',
style: 'padding-left: 1em;',
width: '40%',
},
{
header: 'Contact',
dataIndex: 'contact_name',
style: 'padding-left: 1em;',
width: '40%',
},
],
}
],
}
});

mitchellsimoens
19 Jul 2012, 9:49 AM
Include the CSS?

redned
19 Jul 2012, 10:06 AM
Include the CSS?

Thank you! Very stupid on my part! Still no sign of the data even though it is visible in the DOM when using the inspector. I suspect it is something to do with my store.

mitchellsimoens
19 Jul 2012, 10:35 AM
If you can see the rows with data in the DOM but not visually, that will likely be a layout/sizing issue.

redned
19 Jul 2012, 10:41 AM
Great, thanks. Another issue I just noticed is it is only displaying two of the headings. Any ideas on that?

EDIT: Never mind solved it.

newpen
19 Jul 2012, 6:52 PM
Oh good one, I like it.

Blog tips (http://www.blogtipsworld.com/) - Car news (http://www.esupercarnews.com/)

visus
26 Jul 2012, 7:09 AM
Hi, I'm trying to use the Ext.ux.touch.grid to create something like a tree-grid. When you tap on an item, I'd like to show (incl. animation) another component (a list, another dataview, a container, whatever; it doesn't really matter as long as it has a specific height) below the tapped item. When I tap on the item again, the extra component should hide.

My question is: What would you do? How would you implement that?

csextjs
28 Jul 2012, 8:11 PM
I have this in Ext.ux.grid.touch.view with editable.



{ header : 'Packs',
dataIndex : 'packs',
width : '10%',
style : "text-align: center;",
editor : {
xtype : 'numberfield'
}
},


How can I listen for the CHANGE or BLUR event in the controller?
I've tried many suggestions from the forum, but could not make it work.
If I attach listeners right below the xtype: 'numberfield', it works but I need to be
able to reference it in the controller for further processing.

thank you.

lincon6
30 Jul 2012, 12:39 AM
I have this in Ext.ux.grid.touch.view with editable.



{ header : 'Packs',
dataIndex : 'packs',
width : '10%',
style : "text-align: center;",
editor : {
xtype : 'numberfield'
}
},


How can I listen for the CHANGE or BLUR event in the controller?
I've tried many suggestions from the forum, but could not make it work.
If I attach listeners right below the xtype: 'numberfield', it works but I need to be
able to reference it in the controller for further processing.

thank you.

You can have a look at the source of eitable feature. I think you can try
listen to 'editstart','editend' or 'editcancel' event that fire inside this feature.

badgerb1
30 Jul 2012, 10:00 AM
You can do something like this I think.



{ header : 'Packs',
dataIndex : 'packs',
width : '10%',
style : "text-align: center;",
editor : {
itemId:'test',
xtype : 'numberfield'
}},
Then set your controller to control:
"touchgridpanel #test":{
blur:onBlur
}

Haven't been able to test it but I think it will work.

Thanks
Bob

csextjs
31 Jul 2012, 9:13 AM
Lincon6: Thanks. I actually found that out and using them and works well.

Bob: I will give it a try and see if that works as well.

Thank you.

tecnosencha
1 Aug 2012, 6:03 AM
Hi i'am tring to use Ext.ux.touch.grid in Architet and after serching and reading other thread i am stuck in this problem:


Ext.define('FM.view.override.GridDataView', {
extend : 'Ext.ux.touch.grid.View',
xtype : 'griddataview',
requires : [
//'Ext.ux.touch.grid.View',
'FM.view.GridDataView',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Editable',
'Ext.ux.touch.grid.feature.Sorter',
'Ext.field.Number',
'FM.store.MyStore'
]






}, function() {
Ext.override(FM.view.GridDataView, {

config : {
title : 'Grid',
columns : [
{
header : 'Text',
dataIndex : 'text',
width : '90%',
editor : {
xtype : 'textfield'
}
},
{
header : 'Amount',
dataIndex : 'amount',
width : '10%',
editor : {
xtype : 'numberfield'
}
}
],
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Editable',
launchFn : 'initialize'
}
]
},



applyStore : function() {
alert('lol');
//new Grid.store.Grid({autoLoad : true});
return new FM.store.MyStore({autoLoad:true});
}



});
});




i built a Data View and then i have override the component with code above, my problem is when i launch application the grid doesn't show. In Chrome development tools i dont'have javascript error and all files load fine.Do i have to call constructor of superclass? and how?
(sorry for my bad english)
Ty

badgerb1
1 Aug 2012, 8:00 AM
Hi tecnosencha (http://www.sencha.com/forum/member.php?461556-tecnosencha)

I've found most of the time that the grid doesn't show up, it's because I've forgotten a height on the grid.

Try adding a height and width to the grid and see if it shows up. I haven't used it in architect before though so it may still not work.

Also see if the grid is being rendered into the dom by looking at the elements tab in the dev tools in chrome and search for grid.

Thanks
Bob

tecnosencha
1 Aug 2012, 11:28 PM
Hi badgerb1!
Ty for reply :)
this is the dom of my test app and grid seems to be rendered but is empty

BoomerBrian
4 Aug 2012, 10:44 AM
Just downloaded Ext.ux.touch.grid from github, but when I tried to use it in my project I got the following error.

Uncaught TypeError: Cannot read property 'features' of undefined Ext.define.constructor View.js:21 (https://localhost/eUHMmobile/lib_js/Ext.ux.touch.grid/View.js?_dc=1336166790309)
Debugging View.js I found that config is undefined in constructor: function(config) {

Here is the code where I am defining the datagrid

Ext.define('mobile.view.test.Test', {
extend: 'Ext.ux.touch.grid.View',
requires: [
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
],
layout: 'fit',
config: {
store : 'mobile.test.TestStore',


features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
columns : [
{
header : 'Name',
dataIndex : 'name',
style : 'padding-left: 1em;',
width : '40%',
filter : { type : 'string' }
},
{
header : 'Class Path',
dataIndex : 'classPath',
style : 'text-align: center;',
width : '15%',
filter : { type : 'string' }
}
]
}
});

Has anybody experienced the same issue ?
Thanks

Mitchell - I am having this exact issue. config is undefined. Any ideas?

This is happening when I try and create the view Ext.create('mobile.view.test.Test');

EDIT: I solved the problem. I wrapped it in a Container and it started working.

redned
13 Aug 2012, 6:43 AM
Hi. I am using the grid in my app and would like to use the checkbox functionality. However, I am using itemtaps on the grids to redirect user to different views. This means the only checkbox I can tick is the one in the top left corner and I cannot select individual rows without the view changing.

At the moment I am trying to remove and add events to the grid using a listener. However, the stopEvent() and the removeEventListener methods are not working on the grid.

Has anyone encountered this before and found a solution?

EDIT

Got around this using

if(e.target.className =='grid-checkbox')
{
//do stuff
}else
{
//goto view
}

bebenmo
14 Aug 2012, 6:21 AM
Hello,
I am using that good grid (thank you Mitchell Simoens) but I have three issues with it :

- How to put the last element added on the top of the grid and not at the queue that we need to scroll to see the last element added ?

- When the user double click on a cell (which I have define non-editable) it becomes blank and it erase the content from the view. Then if you click on an other part of the screen, it looks as normal.

- How to display a picture in a cell and then that column will be sortable (first the lines which have the picture and then those which don't have the picture)

Thank you in advance

BrettNagy
20 Aug 2012, 5:52 PM
Hi,

great plug-in. I'm trying to get it to work with the SDK command line tools, specifically "sencha app build package"

I have this at the top of my app.js:


Ext.Loader.setConfig({
enabled : true,
paths : {
'Ext.ux.touch.grid' : '../Ext.ux.touch.grid'
}
});

and I have this in app.json:


{
"path": "Ext.ux.touch.grid/View.js"
},
{
"path": "Ext.ux.touch.grid/feature/Feature.js"
},

The error I get is:


Error: [Ext.Loader] Failed loading 'file:///C:/Users/WebApp/sdk/src/ux/touch/grid/feature/Feature.js',

Any pointers on how to get this component working in a packaged build?

Thanks,
Brett

Snorkler
23 Aug 2012, 6:06 PM
Is there a way I can stack the values of 3 columns in one display column using the grid? I'm having no trouble getting the standard tabular display to work, but wondered if there is any creative way to achieve this layout. Any hints would be appreciated.

Example:

Col1 Heading Col4 Heading Col5 Heading

Col1Value Col4Value Col5Value Row1
Col2Value
Col3Value
---------------------------------------------------------------
Col1Value Col4Value Col5Value Row2
Col2Value
Col3Value

suzuki1100nz
3 Sep 2012, 4:08 PM
First - Thanks very much Mitchell for the Touch grid.
Desperately needed and heres to seeing it introduced to the base framework soon.

Has anyone use this to create a touch version of the infinite grid?

Any pointers with implementing this in Touch Mitchell?

mitchellsimoens
4 Sep 2012, 4:09 AM
Right now, the grid extends Ext.dataview.DataView. 2.1.0 b3 will finally see the infinite List but of course the grid won't get the infinite feature as it extends from DataView instead of List. It's an easy change to change the extends property and some CSS but would then pick up the infinite feature (along with grouping). As a discussion, would you all like it to extend List instead of DataView?

suzuki1100nz
4 Sep 2012, 2:01 PM
Thanks Mitchell
+1 for extending list instead of Dataview.
Has coding of the inifinite list started? and any chance I can get access to the beta code?
I would like to ensure my implementation will work with the future release.

mitchellsimoens
5 Sep 2012, 10:07 AM
FYI... just push some changes. Ext.ux.touch.grid.List now extends Ext.dataview.List, Ext.ux.touch.grid.View is now deprecated and will create an instance of Ext.ux.touch.grid.List if you try and use it (backwards compat). You now can group, have an index bar, disclosure icons and any other goodies in Ext.dataview.List.

You will also see a new example: infinite.html This example loads 1,000 records (from the forums) and uses the new infinite feature that List uses that will be in 2.1.0 b3 that should be coming any day. Support subscriptions can download nightlies at the support portal.

suzuki1100nz
5 Sep 2012, 3:53 PM
Hi,

Thanks for that I've grabbed it already.
You mentioned a new infinite feature that list uses - I've grabbed the latest nightly build for 2.1.0-b3 and cant see anything in there at this point relating to infinite list.
I did spot an incomplete Ext.dataview.component.Infinite and the private Ext.carousel.Infinite

I see your infinite.js example loads up 1000 items in one hit, will the infinite list implementation behave like the ExtJS buffered data store and implement paging to the server?

I could for now use the paging list plugin and load up the first 100 and then use auto paging but it wont drop from the list the pages I've scrolled past (I dont want to bloat the dom).

suzuki1100nz
5 Sep 2012, 4:53 PM
Hi again,

Sorry just had a good look at the paging list plugin with the list in 2.1.0b3 and that will do nicely.
Thanks for making the changes to the grid so quickly.

suzuki1100nz
5 Sep 2012, 9:12 PM
Got it working though the row heights are incorrect.
Looks like it being set in code on x-list-item as there is an element style of 47px ! important being set.

Cant override in css any ideas?

tecnosencha
6 Sep 2012, 2:52 AM
Hi all!
@Mitchell
It's possibile to use Ext.ux.touch.grid library in Sencha Architect ?
I read other posts about override and library import (require) and i have done some tries.
I tried to overriding Ext.DataView including (require) but didn't work.
I tried to overriding Ext.DataView and extend Ext.ux.touch.grid.View and no result.
I'am sure i'am doing something wrong, if you have any suggestion, i'd appreciate it!

Ty

mitchellsimoens
6 Sep 2012, 4:58 AM
Got it working though the row heights are incorrect.
Looks like it being set in code on x-list-item as there is an element style of 47px ! important being set.

Cant override in css any ideas?

Make sure you get the latest CSS I provided as I had to remove the padding. The simple examples are working just fine.

suzuki1100nz
6 Sep 2012, 3:43 PM
Hi,

Unfortunately it isnt just css.
In 2.1.0-b3 the dev team have added to the List class config - itemMap this has a config object that sets the minimumHeight to 47px.
Works well with your examples as thats the item height your expecting.

Doesnt work so well when you want a row height that is less like mine which is 35px.

Not sure why 47px was chosen as 44px is apples standard which the violate often :D

I got around this by adding to the constructor in the list.js


//Override item map minimum height - set by sencha to 47px
me.getItemMap()._minimumHeight = 25;
me.getItemMap().config.minimumHeight = 25;

bhomass
13 Sep 2012, 10:14 AM
EDIT: I solved the problem. I wrapped it in a Container and it started working.

having the same issue using Ext.ux.touch.grid.List. Please elaborate what is this Container technique that solved the problem.

Thanks

Edit: I got it. inside the Ext.Container with items:[].
I am still having huge problems getting this to function fully.

first, after wrapping 'touchgridpanel' inside Ext.Container, I had to change all the .touchgridpanel to .x-touchgridpanel for css to still apply. next, I can not get the static data in the store to save. The only thing I am doing is change Ext.create() to Ext.define to observe the recommended project structure.

so I have

Ext.define('FirstApp.view.IntakeGrid', {
extend: 'Ext.Container',
xtype: 'intakegrid',
id: 'intakegridid',

requires: [
'Ext.ux.touch.grid.List',
'Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
],

config: {
fullscreen: true,

items: [
{
xtype: 'touchgridpanel',
config:{
fullscreen : true,
store : 'intakestore',

features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
},
columns : [
{
header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
filter : { type : 'string' }
},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
},
{
header : 'Change',
dataIndex : 'change',
cls : 'centered-cell redgreen-cell',
width : '15%',
renderer : function (value) {
var cls = (value > 0) ? 'green' : 'red';

return '<span class="' + cls + '">' + value + '</span>';
}
},
{
header : '% Change',
dataIndex : 'pct',
cls : 'centered-cell redgreen-cell',
width : '15%',
renderer : function (value) {
var cls = (value > 0) ? 'green' : 'red';

return '<span class="' + cls + '">' + value + '</span>';
}
},
{
header : 'Last Updated',
dataIndex : 'updated',
hidden : true,
style : 'text-align: right; padding-right: 1em;',
sortable : false,
width : '15%'
}
]
}
]
}



});

Ext.define('TestModel', {
extend : 'Ext.data.Model',

config : {
fields : [
'company',
'price',
'change',
'pct',
'updated'
]
}
});

Ext.define('FirstApp.store.IntakeStore', {
extend: 'Ext.data.Store',
xtype: 'intakestore',
config: {
model : 'TestModel',
storeId: 'intakestore',
data : [
{ company : '3m Co', price : 71.72, change : 0.02, pct : 0.03, updated : '9/1/2010' },
{ company : 'Alcoa Inc', price : 29.01, change : 0.42, pct : 1.47, updated : '9/1/2010' },
{ company : 'Altria Group Inc', price : 83.81, change : 0.28, pct : 0.34, updated : '9/1/2010' },
{ company : 'American Express Company', price : 52.55, change : 0.01, pct : 0.02, updated : '9/1/2010' },
{ company : 'American International Group, Inc.', price : 64.13, change : 0.31, pct : 0.49, updated : '9/1/2010' },
{ company : 'AT&T Inc.', price : 31.61, change : -0.48, pct : -1.54, updated : '9/1/2010' },
{ company : 'Boeing Co.', price : 75.43, change : 0.53, pct : 0.71, updated : '9/1/2010' },
{ company : 'Caterpillar Inc.', price : 67.27, change : 0.92, pct : 1.39, updated : '9/1/2010' },
{ company : 'Citigroup, Inc.', price : 49.37, change : 0.02, pct : 0.04, updated : '9/1/2010' },
{ company : 'E.I. du Pont de Nemours and Company', price : 40.48, change : 0.51, pct : 1.28, updated : '9/1/2010' },
{ company : 'Exxon Mobil Corp', price : 68.1, change : -0.43, pct : -0.64, updated : '9/1/2010' },
{ company : 'General Electric Company', price : 34.14, change : -0.08, pct : -0.23, updated : '9/1/2010' },
{ company : 'General Motors Corporation', price : 30.27, change : 1.09, pct : 3.74, updated : '9/1/2010' },
{ company : 'Hewlett-Packard Co.', price : 36.53, change : -0.03, pct : -0.08, updated : '9/1/2010' },
{ company : 'Honeywell Intl Inc', price : 38.77, change : 0.05, pct : 0.13, updated : '9/1/2010' },
{ company : 'Intel Corporation', price : 19.88, change : 0.31, pct : 1.58, updated : '9/1/2010' },
{ company : 'International Business Machines', price : 81.41, change : 0.44, pct : 0.54, updated : '9/1/2010' },
{ company : 'Johnson & Johnson', price : 64.72, change : 0.06, pct : 0.09, updated : '9/1/2010' },
{ company : 'JP Morgan & Chase & Co', price : 45.73, change : 0.07, pct : 0.15, updated : '9/1/2010' },
{ company : 'McDonald\'s Corporation', price : 36.76, change : 0.86, pct : 2.40, updated : '9/1/2010' },
{ company : 'Merck & Co., Inc.', price : 40.96, change : 0.41, pct : 1.01, updated : '9/1/2010' },
{ company : 'Microsoft Corporation', price : 25.84, change : 0.14, pct : 0.54, updated : '9/1/2010' },
{ company : 'Pfizer Inc', price : 27.96, change : 0.4, pct : 1.45, updated : '9/1/2010' },
{ company : 'The Coca-Cola Company', price : 45.07, change : 0.26, pct : 0.58, updated : '9/1/2010' },
{ company : 'The Home Depot, Inc.', price : 34.64, change : 0.35, pct : 1.02, updated : '9/1/2010' },
{ company : 'The Procter & Gamble Company', price : 61.91, change : 0.01, pct : 0.02, updated : '9/1/2010' },
{ company : 'United Technologies Corporation', price : 63.26, change : 0.55, pct : 0.88, updated : '9/1/2010' },
{ company : 'Verizon Communications', price : 35.57, change : 0.39, pct : 1.11, updated : '9/1/2010' },
{ company : 'Wal-Mart Stores, Inc.', price : 45.45, change : 0.73, pct : 1.63, updated : '9/1/2010' }
]
}
});

the columns show up ok, but no data is loaded.

any ideas?

I looked for menu item which would wrap my code inside <code> but don't find it.

bhomass
13 Sep 2012, 4:40 PM
I can not make this grid work using Ext.define() event using the Ext.Container wrapper.

first it was just the change of style class from touchgridpanel to x-touchgridpanel, then the grid no longer loads data from the store.

It would be a great service if someone can post code showing how to use this extension using Ext.define().

e.taranov
12 Oct 2012, 1:26 AM
I have tabpanel inside another tabpanel.
When i put touchgridpanel inside it works perfect.
When i wrap it in container to put selectfield at top of grid - i have a problem with touchgridpanel.
It have heading columns but have no rows!
I think there is something wrong with CSS since i still see rows in DOM elements.

Mitchell, how can i fix that?

Here is an example of code to get an issue:



Ext.Loader.setConfig({
enabled : true,
paths : {
'Ext.ux.touch.grid': './Ext.ux.touch.grid'
}
});


Ext.require([
'Ext.tab.Panel',
'Ext.field.Select',
'Ext.ux.touch.grid.List',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Sorter'
]);


Ext.setup({
onReady: function() {


Ext.define('TestModel', {
extend : 'Ext.data.Model',


config : {
fields : [
'company',
'price',
'change',
'pct',
'updated'
]
}
});


var store = Ext.create('Ext.data.Store', {
model : 'TestModel',
data : [
{ company : '3m Co', price : 71.72, change : 0.02, pct : 0.03, updated : '9/1/2010' },
//...
{ company : 'Wal-Mart Stores, Inc.', price : 45.45, change : 0.73, pct : 1.63, updated : '9/1/2010' }
]
});




Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',


defaults: {
styleHtmlContent: true
},


items: [
{
title: 'Reports',
iconCls: 'home',




xtype: 'tabpanel',
items: [
{
title: 'Report A',
// uncomment to get an issue
// xtype: 'container',
// items: [
// {
// xtype: 'selectfield',
// store: store,
// displayField: 'company',
// valueField: 'company'
//
//
// },
// {
xtype: 'touchgridpanel',
store : store,


features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
columns : [
{
header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
filter : { type : 'string' }
},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
},
{
header : 'Change',
dataIndex : 'change',
cls : 'centered-cell redgreen-cell',
width : '15%',
renderer : function (value) {
var cls = (value > 0) ? 'green' : 'red';


return '<span class="' + cls + '">' + value + '</span>';
}
},
{
header : '% Change',
dataIndex : 'pct',
cls : 'centered-cell redgreen-cell',
width : '15%',
renderer : function (value) {
var cls = (value > 0) ? 'green' : 'red';


return '<span class="' + cls + '">' + value + '</span>';
}
},
{
header : 'Last Updated',
dataIndex : 'updated',
hidden : true,
style : 'text-align: right; padding-right: 1em;',
sortable : false,
width : '15%'
}
]
// }] // uncomment to get an issue


},
{
title: 'Report B',
html: 'Text 2'
},
{
title: 'Report C',
html: 'Text 3'
}],
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});


}
});

mitchellsimoens
12 Oct 2012, 5:04 AM
You need to give the container a layout to manager the grid's height

mwalzak
12 Nov 2012, 2:21 PM
I tried running the showhide example, but instead of the column disappearing, just the header for the column is hidden.

Is there a fix/workaround for this?

Thanks

Ades
13 Nov 2012, 1:16 AM
hi guys,

i am using Sencha architect and i need something like a grid. So I try to do something with a grid.

therefor I also use Ext.ux.touch.grid, but I do not know how can I use it.

I try it with "Ext.define('MyApp.view.override.MyDataView', {
override: 'MyApp.view.MyDataView' .....", but there's something I'm doing wrong :-(
Can someone help me please :-(

Whatty
13 Nov 2012, 10:12 AM
I have a grid which is already shown on the page and refresh the store, which results in no rows being returned, however the grid does not get updated.

Is this a known problem and what would the work around be?

Thanks in advance.

Whatty

Sabakizin
22 Nov 2012, 7:00 AM
I tried running the showhide example, but instead of the column disappearing, just the header for the column is hidden.

Is there a fix/workaround for this?

Thanks

Hey, I'm having same problem here. Does anyone have solution?

18 Jan 2013, 9:20 AM
Hi Mitchell, I'm having the hardest time getting sort to work correctly. Would there be any issues that haven't been documented yet with using it inside a card layout in 2.1?

lincon6
20 Jan 2013, 1:48 AM
Hi Mitchell.I Just upgrade my app to 2.1.But horizontal and paging example don't work right.Please take a look at the attached pictureThanks.

lincon6
20 Jan 2013, 6:37 AM
Hi Mitchell.I Just upgrade my app to 2.1.But horizontal and paging example don't work right.Please take a look at the attached pictureThanks.
Paging fix:


goToPicker : {
left: 0,
top: 0,
cls: Ext.baseCSSPrefix + 'select-overlay',
modal : true,
width : 200,
height : 200,
layout : 'fit',
hideOnMaskTap : true
}

handleGoToButton : function(btn) {
var me = this,
picker = me.getGoToPicker(),
pages = me.getPages(),
i = 1,
data = [],
index,
record,
list = picker.down('list');


var store = list.getStore();


store.removeAll();


for (; i <= pages; i++) {
data.push({ page : i });
}


store.add(data);
index = store.find("page", this.getGrid().getStore().currentPage, null, null, null, true);
record = store.getAt((index == -1) ? 0 : index);


if (!picker.getParent()) {
Ext.Viewport.add(picker);
}


picker.showBy(btn);
list.select(record, null, true);
},

qooleot
20 Jan 2013, 7:38 PM
For sencha touch 2.1, I ran into two issues with the touchgridpanel in a card layout. Probably newbie mistakes as I just downloaded it ~ 10 minutes ago - but a heads up for anyone else with these issues:

1) I had to make sure my cls contained 'touchgridpanel' vs just say 'card card4' or it didn't force that class on the outermost div tag (and nothing looked right). I'd think the ux could force that cls onto the resulting html to avoid that...

2) It didn't render any data if I did Ext.create('Ext.ux.touch.grid.List', {..}) vs {xtype: 'touchgridpanel', ...}

tiberian
26 Jan 2013, 3:06 PM
I tried running the showhide example, but instead of the column disappearing, just the header for the column is hidden.

Is there a fix/workaround for this?

Thanks

Hey - had the same issue by myself.
This is a bug in Sencha Touch 2.1 - until 2.1.1 isn't generally available you can use the fix described under:
http://www.sencha.com/forum/showthread.php?248221-Change-Template-in-List-(v2.1)&p=909763&viewfull=1#post909763

Use the patch of alexfluger as the one of TommyMaintz disabled the header output.

This solution worked for me
hth

marco1991
28 Jan 2013, 7:00 AM
it is possible to make editable a grid cell?

mitchellsimoens
28 Jan 2013, 7:13 AM
it is possible to make editable a grid cell?

Look at the examples.

marco1991
28 Jan 2013, 7:38 AM
here i can see the result, but the code?

http://www.mitchellsimoens.com/Sencha-Projects/demos/

mitchellsimoens
28 Jan 2013, 7:47 AM
Those are old ST1 projects

marco1991
28 Jan 2013, 7:48 AM
doesn't exist in ST2?

mitchellsimoens
28 Jan 2013, 7:55 AM
Sure the grid does but that link you linked to is for ST1

elastoffice
4 Feb 2013, 6:23 AM
Hi lincon6. In which file goes this fix? Or how can I use it in my project? Thanks

lincon6
4 Feb 2013, 8:01 AM
Hi lincon6. In which file goes this fix? Or how can I use it in my project? Thanks
Paging.js


Ext.define('Ext.ux.touch.grid.feature.Paging', {
extend : 'Ext.ux.touch.grid.feature.Abstract',
requires : [
'Ext.ux.touch.grid.feature.Abstract',
'Ext.Toolbar',
'Ext.Button',
'Ext.Panel'
],


config : {
events : {
store : {
load : 'handleGridPaint'
}
},


extraCls : 'paging',


goToButton : {
disabled : true,
text : 'Go to page...'
},
backButton : {
disabled : true,
text : 'Previous Page',
ui : 'back'
},
forwardButton : {
disabled : true,
text : 'Next Page',
ui : 'forward'
},


pager : {
docked : 'bottom'
},


pageListTpl : 'Page {page}',
goToPicker : {
left: 0,
top: 0,
cls: Ext.baseCSSPrefix + 'select-overlay',
modal : true,
width : 200,
height : 200,
layout : 'fit',
hideOnMaskTap : true
},
pages : 0
},


backText : 'back',


init : function(grid) {
var store = grid.getStore();


if (!store.isLoading()) {
grid.on('painted', 'handleGridPaint', this, { buffer : 50 });
}
},


applyGoToPicker : function(config, oldConfig) {
if (!config.hasOwnProperty('items')) {
config.items = [
{
xtype : 'list',
itemTpl : this.getPageListTpl(),
store : new Ext.data.Store({
fields : [
'page'
]
}),
listeners : {
scope : this,
itemtap : 'handlePageSelect'
}
}
];
}


return Ext.factory(config, Ext.Panel, oldConfig);
},


applyPager : function(newPager, oldPager) {
return Ext.factory(newPager, Ext.Toolbar, oldPager);
},


updatePager : function(newPager, oldPager) {
var me = this,
grid = me.getGrid();


if (oldPager) {
grid.remove(oldPager);
}


if (newPager) {
grid.insert(0, newPager);
}
},


applyBackButton : function(config, oldButton) {
Ext.apply(config, {
action : 'back',
disabled : true,
scope : this,
handler : 'handleBackButton'
});


return Ext.factory(config, Ext.Button, oldButton);
},


applyGoToButton : function(config, oldButton) {
Ext.apply(config, {
action : 'goTo',
disabled : true,
scope : this,
handler : 'handleGoToButton'
});


return Ext.factory(config, Ext.Button, oldButton);
},


applyForwardButton : function(config, oldButton) {
Ext.apply(config, {
action : 'forward',
disabled : true,
scope : this,
handler : 'handleForwardButton'
});


return Ext.factory(config, Ext.Button, oldButton);
},


updateBackButton : function(newButton, oldButton) {
var me = this,
pager = me.getPager(),
idx = 0;


if (oldButton) {
idx = pager.getInnerItems().indexOf(oldButton);


pager.remove(oldButton);
}


if (newButton) {
pager.insert(idx, newButton);
me.checkSpacers();
}
},


updateGoToButton : function(newButton, oldButton) {
var me = this,
pager = me.getPager(),
idx = 2;


if (oldButton) {
idx = pager.getInnerItems().indexOf(oldButton);


pager.remove(oldButton);
}


if (newButton) {
pager.insert(idx, newButton);
me.checkSpacers();
}
},


updateForwardButton : function(newButton, oldButton) {
var me = this,
pager = me.getPager(),
idx = 4;


if (oldButton) {
idx = pager.getInnerItems().indexOf(oldButton);


pager.remove(oldButton);
}


if (newButton) {
pager.insert(idx, newButton);
me.checkSpacers();
}
},


checkSpacers : function() {
var me = this,
pager = this.getPager(),
items = pager.getInnerItems(),
forwardBtn = me.getForwardButton(),
goToBtn = me.getGoToButton(),
idx, spacer;


if (forwardBtn) {
idx = items.indexOf(forwardBtn);


if (idx > 0) {
spacer = items[idx - 1];


if (!spacer.isXType('spacer')) {
pager.insert(idx, {
xtype : 'spacer'
});
}
}
}


if (goToBtn) {
idx = items.indexOf(goToBtn);


if (idx > 0) {
spacer = items[idx - 1];


if (!spacer.isXType('spacer')) {
pager.insert(idx, {
xtype : 'spacer'
});
}
}
}
},


handleGridPaint : function(grid) {
if (!(grid instanceof Ext.ux.touch.grid.List)) {
grid = this.getGrid();
}


var me = this,
store = grid.getStore();


if (store.isLoading()) {
store.on('load', 'handleGridPaint', me, { single : true });
return;
}
store.on('clear', 'handleGridPaint', me, { single : true });


var total = store.getTotalCount(),
currentPage = store.currentPage,
pages = Math.ceil(total / store.getPageSize()),
backButton = me.getBackButton(),
forwardButton = me.getForwardButton(),
goToButton = me.getGoToButton();


me.setPages(pages);


backButton.setDisabled(currentPage === 1 || store.getCount() === 0);
forwardButton.setDisabled(currentPage === pages || store.getCount() === 0);
goToButton.setDisabled(pages === 0 || store.getCount() === 0);
},


handleBackButton : function() {
var grid = this.getGrid(),
store = grid.getStore();


store.previousPage();
},


handleForwardButton : function() {
var grid = this.getGrid(),
store = grid.getStore();


store.nextPage();
},


handleGoToButton : function(btn) {
var me = this,
picker = me.getGoToPicker(),
pages = me.getPages(),
i = 1,
data = [],
index,
record,
list = picker.down('list');


var store = list.getStore();


store.removeAll();


for (; i <= pages; i++) {
data.push({ page : i });
}


store.add(data);
index = store.find("page", this.getGrid().getStore().currentPage, null, null, null, true);
record = store.getAt((index == -1) ? 0 : index);


if (!picker.getParent()) {
Ext.Viewport.add(picker);
}


picker.showBy(btn);
list.select(record, null, true);
},


handlePageSelect : function(list, index) {
var panel = list.up('panel'),
store = this.getGrid().getStore(),
page = index + 1;


store.loadPage(page);


panel.hide();
}
});

elastoffice
4 Feb 2013, 11:53 PM
Thanks. It worked perfectly.

elastoffice
5 Feb 2013, 4:39 AM
Hi lincon6. Have you managed to fix the horizontal example problem also?

lincon6
5 Feb 2013, 7:51 AM
Hi lincon6. Have you managed to fix the horizontal example problem also?
Not yet.
There is a bug in horizontal scroll in 2.1.
The layout in 2.1 is quit different from 2.0.1.
I tried to write a work-around to redraw the container.
But this still has some problem.
I sent a bug request, but I have no idea when this bug
will be fixed.
At last I have to revert my app to 2.0.1.
Maybe horizontal scroll is not a good choice.

marco1991
28 Feb 2013, 2:08 AM
hi,

i'm using this grid.. is pretty good but how can I put a spinner (xtype: spinnerfield) in a cell?

thanks!

ps: sry for the cross post :((

metekural
17 Apr 2013, 10:00 AM
Hi Mitchell,

Ext.ux.touch.grid is currently not compatible with Sencha Touch 2.2 it seems. Are you planning to update the plugin to be compatible with ST 2.2 in the new few weeks?

Thank you,
Mete

Scorpie
23 Apr 2013, 1:52 AM
Hi Mitchell,

Ext.ux.touch.grid is currently not compatible with Sencha Touch 2.2 it seems. Are you planning to update the plugin to be compatible with ST 2.2 in the new few weeks?

Thank you,
Mete

+1 :)

AnujaSonawane
24 Apr 2013, 3:15 AM
hey,

I have tried the editable grid example. I had a doubt.
If we have two columns in a record as editable, i have a scenario where after the edit of first field, if the user presses "tab" key, then the user should be automatically focused to the next editable field. My question is how do we achieve this ?

The app is a desktop app

amitthakkar
25 Apr 2013, 5:48 AM
+2 :)
We really need this Mitchell. Thanks for the awesome control