Ext.ux.touch.grid

[lincon6]

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]

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]

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]

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]

Hi 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]

Hi badgerb1!
Ty for reply
this is the dom of my test app and grid seems to be rendered but is empty

[BoomerBrian]

Just downloaded Ext.ux.touch.grid from github, but when I tried to use it in my project I got the following error.

• [COLOR=red !important]Uncaught TypeError: Cannot read property 'features' of undefined [/COLOR]Ext.define.constructor View.js:21

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]

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]

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]

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