Ext.ux.touch.grid

[Soenhay]

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]

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]

Just pushed a small change to Feature.js to attempt to fix the delete of the ftype. Let me know if that helps.

[QuinnPerkins]

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]

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]

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

patient Grid.jpg


Is this Achievable???


If any queries do let me know,

Thanks in advance...

[mitchellsimoens]

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]

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/E.../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]

The CSS should add a margin to the bottom.

[Eugene Ivakhiv]

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?