Ext.ux.touch.grid

[TonyBones]

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]

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]

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]

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]

So your saying your files aren't external files, and they should be copied into the sdk/src folders?

[mitchellsimoens]

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]

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]

When are you requiring the view versus setting the path?

[TonyBones]

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]

Don't know what happened, but now its working. Maybe I didn't hard refresh. Thanks for your help mitchellsimoens!!!