Integrating UberGrid with Sencha Touch Architect

[osolano]

Mats,

Do you mean to just paste it at the bottom of the ubergrid-all.js file?

[mats]

Yup

[osolano]

mats,

thanks for that! I was able to get my sample store up and running.
My next issue is hooking it up to our particular data store. It is pulling data from a jsonp data format, and I was wondering if this is supported? As soon as I switched the store from my sample to our particular store, nothing shows up.

Below is my code on the two models. I've tried configuring the columns property of ubergrid like so, but nothing is outputting.

I have a couple questions:
1. Is a Jsonp store supported?
2. What is the best way to handle a store that has over 40000 records of data with about 50 fields? I'm thinking of using the listpaging plugin, but not sure it is supported.
3. Is sorting supported?

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',

    config: {
        layout: {
            type: 'fit'
        },
        items: [
            {
                xtype: 'ubergrid',
                columns: [
                    {
                        header: 'cell.name',
                        dataIndex: 'cell.name',
                        width: 100
                    },
                    {
                        header: 'field',
                        dataIndex: 'cell.name',
                        width: 200
                    }
                ],
                buffered: 'true'
            }
        ]
    }

});

Ext.define('MyApp.model.Row', {
    extend: 'Ext.data.Model',

    uses: [
        'MyApp.model.Cell'
    ],

    config: {
        fields: [
            {
                name: 'id'
            }
        ],
        hasOne: {
            associatedName: 'cell',
            associationKey: 'cell',
            model: 'MyApp.model.Cell'
        }
    }
});

Ext.define('MyApp.model.Cell', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {
                name: 'name'
            },
            {
                name: 'id'
            }
        ]
    }
});

[mats]

It doesn't matter where the data comes from, the only contract for using UberGrid is that you plugin a Store. How the data gets into the store is irrelevant.

1. Sure, see docs: https://docs.sencha.com/touch/2.2.1/#!/a ... roxy.JsonP
2. Bringing that much data to the client won't work, memory constraints etc. In a future release we hope to support a load as you scroll feature, until we do you'll need to roll your own (inspiration can be drawn from the Sencha Touch examples).
3. Yes. https://www.bryntum.com/docs/ubergrid/#! ... g-sortable

[osolano]

mats,

I think I know where my second issue is coming from, but I may need your help to fix it.

I'm using a jsonp store that has a model with an association to another model. For example, say the data returns data like so:

{
page: 1,
total: "44111",
rows: [
{
id: "ABCDE",
cell: {
id: "ABCDE",
name: "Name 1",
Morningstar_Category:"A"
},
{
id: "DEFG",
cell: {
id: "DEFG",
name: "Name 2",
Morningstar_Category:"B"
},
]

I have created a model called Row with an association to another model called Cell, where Row has the field "id" and Cell has the fields "id","name" and "Morningstar_Category".

Normally to show the data from one of the records I'd say {cell.name} or {cell.type}. When I do this in ubergrid, it doesn't return the data. I then looked at the records a little bit deeper and found that not all the data is being read from the store when configured in Ubergrid.

Looking at the record object between the different implementation, I notice that the data for the associated model is not working.

My hunch is either the overrite we setup doesn't work with associated models or ubergrid doesn't work with associated models. I'm thinking the former, but could be wrong.

To help with this I took another screen recording. It seemed to help you find the bug the first time!

[mats]

This sounds like a bug with your Model setup. Can you access your data by calling the regular 'get' method on a model instance? Our component doesn't care about how the data is structured. It should all just work. Your model should use the 'mapping' feature of the Ext.data.Field class...