mitchellsimoens / ext.ux.touch.grid Goto Github PK

i doubletap record and remove all value..

i want this record edit but i can't..

so i edited this source..

handleTap : function(grid, index, rowEl, rec, e) {
var editor = this.getActiveEditor();

    if (editor) {

        if (!e.getTarget('input') && !e.getTarget('div.x-clear-icon')) {

            var field     = editor.field,
                component = field.getComponent(),
                value     = component.getValue();

if(value == ""){
console.log(editor.record.get(field.getName()));
                value = editor.record.get(field.getName());
            }
            field.destroy();

            if (field.isDirty()) {
                editor.record.set(field.getName(), value);
            } else {
                field.getRenderTo().setHtml(editor.htmlValue);
            }

            this.setActiveEditor(null);
        }
    }
},

I've spent quite a long time trying to diagnose a problem with the grid when there are more items than can be displayed in the list and the vertical scroll becomes active.

If I scroll to the bottom of the grid, it then snaps back up at least 1 row.

Have you any idea what might be causing this? I've even tried debugging into the framework code to see if there is something that might be causing it. I thought maybe the underlying list wasn't taking into account that it had a header so when scrolling it was assuming that it has more vertical space to scroll to. But I don't know what bit of code causes the scroll to snap/bounce back? I've tried using a vanilla list instead of the grid and it seems to work correctly, so I'm really stumped as to the problem and a possible fix.

I'm defining a grid with the "touchgridpanel" xtype, using the Sorter feature. For example:

Ext.define('MyGrid', {
    extend: 'Ext.Container',
    config: {
        items: {
            xtype: 'touchgridpanel',
            features : [{
                ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                launchFn : 'initialize'
            }],
...

Then I try to create two instances of it:

Ext.create('MyGrid', {});
Ext.create('MyGrid', {});

But I get an error when creating the second one: "[Ext.create] Invalid class name or alias 'undefined' specified, must be a non-empty string".

This seems to be because of Ext.ux.touch.grid.feature.Feature line 29: "delete cfg.ftype". I'm not sure you should be deleting config values like this, since they seem to be reused across multiple instances.

If I delete that line, it works.

List._buildTpl now sets the line-height style to the list's itemHeight config. But if you set this config to null, to indicate that you don't want the line-height specified, you end up with the CSS "line-height: undefinedpx". It should check to make sure this config isn't null before adding the style.

I looked through the code and saw that each field is only saved back to the record on the itemtap event. Without getting crazy I threw together this hack to save the active editor field before I call sync on the store.

Mitchell, If there is a better way in the framework to do this or if you have a design in mind for some changes, let me know and I'll code it.

     var index, rowEl, rec;
     current_view.fireEvent('itemtap',  current_view,  index,  rowEl,  rec,  {
           getTarget: function(name){
                 return false;
           }
      });

I've upgraded the framework to v2.3 and the grid view rows are now not rendering. This was working fine using ST v2.1. I've checked the CSS for the containers and it appears the container for the list is being set to a height of 0px. If I compare with the previous application using v2.1 the list is correctly set a height.
Can you have a look at it and provide a fix?

I have a gridPanel which has columns taking more than the available width so i get a horizontal scroll bar at the bottom.

but when i use that scroller, its only moving the data. The headers are remaining fixed.

If you change a grid's store after it's created (e.g. with setStore), the sort headers no longer update when the new store is sorted.

Noticed toggleColumn from Ext.ux.TouchGridPanel was missing. Here's one I wrote to fit my needs if anyone is looking for one.

I added the following to View.js

toggleColumnVisible: function(dataindex, visible) {
        var me = this;
        var el      = me.element,
            headerCells = el.query('.x-grid-header .x-grid-cell[dataindex="'+dataindex+'"]'),
            dataCells = el.query('.x-dataview-item .x-grid-cell[dataindex="'+dataindex+'"]'),
            cell;

        if(headerCells.length > 0) {
            cell = Ext.get(headerCells[0]);
            cell.setVisible(visible);
        }
        for(var i = 0, j = dataCells.length;i < j; i++) {
            cell = Ext.get(dataCells[i]);
            cell.setVisible(visible);
        }
    }

Thanks for all your hard work on this extension Mitchell!

Do i need to add the pagesize proprety for the store?
In the example paging.js the property page.size is not added.
I alos added the pagesize property but still the same issue,the grid is not loading correctly,it keeps loading all the data.
Paging toolbar is added but the buttons next previous are not functionning.

i doubletap record and remove all value..

i want this record edit but i can't..

so i edited this source..

handleTap : function(grid, index, rowEl, rec, e) {
var editor = this.getActiveEditor();

    if (editor) {

        if (!e.getTarget('input') && !e.getTarget('div.x-clear-icon')) {

            var field     = editor.field,
                component = field.getComponent(),
                value     = component.getValue();

if(value == ""){
console.log(editor.record.get(field.getName()));
                value = editor.record.get(field.getName());
            }
            field.destroy();

            if (field.isDirty()) {
                editor.record.set(field.getName(), value);
            } else {
                field.getRenderTo().setHtml(editor.htmlValue);
            }

            this.setActiveEditor(null);
        }
    }
},

When I define features directly on the instance config they are initialized twice:

I believe we could just delete this one initFeatures call:
https://github.com/mitchellsimoens/Ext.ux.touch.grid/blob/master/Ext.ux.touch.grid/View.js#L36

Cheers
Roland

Hello Mitchell,

I would like to augment the columns config in one of my features before the tpl is build (Ext.ux.touch.grid.List::_buildTpl).

Currently the features are initialized afterwards, any tip what I should do here, or how to extend?

Thanks,
Roland

I'm trying to use your example with horizontal scrolling, but I want to have scroll if screen size is small and percentage or flex if is a tablet or PC.

this is my code:

layout : {
type : 'hbox'
}
.
.
.

width: Ext.os.is.Phone ? 80 : '10%'

But when I use flex or percentage the grid doesn't show data.

When running the latest Git Fetch of Ext.ux.touch.grid that is based on the Sencha Touch 2.1 GPL libraries, the horizontal scroll demo (and my code) no longer scrolls horizontally but wraps headers and rows around.

using sencha touch 2.1, in the show/hide demo only the header shows/hides/toggles not the item column

Hi,

I'm using a grid whose store is based on a SQL proxy. When adding the paging feature, it looks like the store is not getting correct infos from the proxy, in particular getTotalCount which returns the number of records corresponding to pageSize and not the number of records in database.

Any ideas about this issue ?

Thanks in advance,

xtype:button is not rendering the actual button..nothing is displayed..:(

I just downloaded the whole master document and it's not showing anything rather than three dots which shows at starting time.
So from where i can get working code.

In your mvc example, I moved the grid in Main.js into its own class, MainGrid.js:

Ext.define('Grid.view.MainGrid', {
    extend: 'Ext.ux.touch.grid.View',
    xtype : 'mainGrid',

    config: {
        tabBarPosition: 'bottom',
        title   : 'Grid',
        columns : [
            {
                header    : 'Text',
                dataIndex : 'text',
                width     : '90%'
            },
            {
                header    : 'Amount',
                dataIndex : 'amount',
                width     : '10%'
            }
        ]
    }
});

and used it in Main.js like this:

            {
                xtype   : 'mainGrid',
                store   : 'Grid'
            }

This works. But then I tried adding a sorting feature to MainGrid.js:

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

This gives me an error in Feature.js line 38:

TypeError: 'undefined' is not a function (evaluating 'me._features.add(feature)')

It seems to be using _features, which is also used by the Sencha config system when you use "features" as a config name.

It looks like an error to me, but I'm not sure.

Why are you pulling the value from the component and not from the field?
Each field, e.g. Ext.field.Text has a getValue function which we could use here:
https://github.com/mitchellsimoens/Ext.ux.touch.grid/blob/master/Ext.ux.touch.grid/feature/Editable.js#L84

Thanks for your time
Roland

There seems to be a problem when building with the sencha Cmd v3.0.0.250. I'm guessing that its a theming issue. I've posted a detailed description of the issue on the Sencha forum:

http://www.sencha.com/forum/showthread.php?254175-CSS-applying-differently-after-Cmd-production-build&p=949694#post949694

Anyone else building this library for production successfully?

still i got this error pls help me...
Thanks in advance.

Uncaught TypeError: Object [object Object] has no method 'getItemHeight'

hideColumn and toggleColumn only hide the column header, but the column itself is still visible.

when I select a record in the list, I want to show the detail of the selected record in a popup panel. How can I do? Thanks.

In your MVC example (in Safari 5.1.7 for Mac), if I click the sort headers on one grid, then switch to the other one, clicking its sort headers sorts the first grid instead.

Even if the store is sorted when you create the grid, the sort icons in the header don't appear until you click the header.

For example, add this to the store in horizontal.js:

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

You won't see the sort icons. One way to fix this is to add:

    this.fireEvent('sort');

at the end of View.js's initialize() method, and add the method:

    updateStore: function(store) {
        this.callParent(arguments);
        if (this.initialized) {
            this.fireEvent('sort');
        }
    },

mvc/app/view/Grid.js extends Ext.ux.touch.grid.View instead of Ext.ux.touch.grid.List, so you get a warning when you load it. It also includes Sencha Touch 2.0.1, which is incompatible with the current Grid code.

Great component but found some issues recently in my app:

• The width is not taking up the full width of container even when set to 100% if not set to full screen.
• The scroll doesn't seem to take into account components docked at the bottom of the screen. Once you scroll down to the bottom of the grid it 'snaps' back up a few rows.

Also raised question on SO:
http://stackoverflow.com/questions/15189183/sencha-touch-grid

If you sort your grid's store manually (e.g. by calling store.sort(...), the grid's column headers don't update.

I was able to fix it by changing Sorter.js like this:

    init : function(grid) {
        [...]
        store.on('sort', this.onSort, this);
    },

    onSort: function() {
        var grid = this.getGrid();
        if (grid.rendered) {
            grid.fireEvent('sort');
        } else {
            grid.on('painted', function() {
                grid.fireEvent('sort');
            }, null, { single : true });
        }
    },

    onDestroy: function() {
        [...]
        grid.getStore().un('sort', this.onSort, this);
    },

Note that this requires the "destroy" fix from issue #37.

When the grid is empty, then the forward button is enabled. It should be disabled, because there is no data in the grid.
I would change lin 241 in Paging.js to this:

forwardButton.setDisabled(currentPage === pages || total === null);

Hi,
I'm trying to use your grid into my application. Everyting works fine when i run my application in my browser, but when i build it an copy the resulted apk file on my tablet it dosn't work.
The only thing that i see is loading screen...

Can u help me.
i olso use Android Virtual Devices simulator and i have the same problem...

The tablet that i use is an evolio 10'' with 2.2.2 android version. and i use ST 2.1.1 sdk

When i run "sencha app build native" it create my .apk file but it remains stuck on: "Packaging your application as a native app...". Is this why it doesn't work on my tablet?

The sorting direction should be persisted and inverted for the same column. To reproduce, tap one column and then another and you will see how the sorting direction gets inverted from one to another.

Bellow is a fix proposal: in Sorter class, function handleHeaderTap, replace next line:

        dir       = sorter ? sorter.getDirection() : 'ASC',

with:

        dir       = (sorter && (sorter.getProperty() === dataIndex)) ? sorter.getDirection() : 'DESC',

Also, when taping for the first time on a column, the user expects as the sorting to ascending. So, since the sorting get inverted when store's sort function is called (see bellow), the default direction should be 'DESC:

    store.sort(dataIndex, dir === 'DESC' ? 'ASC' : 'DESC');

Thanks.

change the file main.js from "extend: 'Ext.tab.Panel'" to "extend: 'Ext.Panel'", the data can't show in the list. How can i do? Thanks.

i doubletap record and remove all value..

i want this record edit but i can't..

so i edited this source..

i think it is your mistake..

plz! edit it

//Editable.js

handleTap : function(grid, index, rowEl, rec, e) {
var editor = this.getActiveEditor();

    if (editor) {

        if (!e.getTarget('input') && !e.getTarget('div.x-clear-icon')) {

            var field     = editor.field,
                component = field.getComponent(),
                value     = component.getValue();

if(value == ""){
    console.log(editor.record.get(field.getName()));
    value = editor.record.get(field.getName());
}

field.destroy();

if (field.isDirty()) {
    editor.record.set(field.getName(), value);
} else {
    field.getRenderTo().setHtml(editor.htmlValue);
}

             this.setActiveEditor(null);
        }
    }
},

I just updated my chrome to version 29.0.1547.57 m and the grid component disapeared.

I don't know if it can help but when I modify this rule :

.x-layout-box.x-vertical > .x-layout-box-item.x-flexed
{
min-height: 0 !important;
}

with min-height: 100% !important; , the grid reaper but the size is fixed and not good for other grids.

When I change attribute 'flex' by 'height', the grid reaper.

ftype : 'Ext.ux.touch.grid.feature.CheckBoxSelection',

should be:

ftype : 'Ext.ux.touch.grid.feature.CheckboxSelection',

For the reason that lower version of ST is not working properly in Chrome 43+, I update my ST to 2.4.2. After updating my app, I found that Ext.ux.touch.grid come with a bug: the first row is hidden by table header and start show data from row 2 . The First row can only show temporary by scrolling down the table.
Can you offer any fixed for this bug?

Hi, May I ask the question?

I want to use your excellent custom component "Ext.ux.touch.grid" for my commercial product. Ext.ux.touch.grid has no license, but I have concern about a few.

1. Does anyone have the copyright?
2. Can I may modify and redistribute the code?
3. Do you think the license is in the public domain?

If you are not mind, I hope that source code will be available by BSD or MIT license.

The onDestroy methods of the Feature classes aren't being called. Feature.initFeatures uses a 'beforedestroy' event to attach the listener, but I don't think that event is ever fired.

In addition, the onDestroy method of Sorter looks like it would break if it were ever called; it uses things like grid.el instead of grid.element.

You cannot use a dataIndex/fieldname with hyphens. Looks to be choking the template engine.

1. Load the "mvc" example.
2. Click the first "Grid" tab.
3. Click one of the headers, and the sort arrow will appear.
4. Run this in the console:

var grid = Ext.ComponentQuery.query('grid-grid')[0];
grid.hideColumn(0);
grid.showColumn(0);

1. The sort arrows are now gone. Even if you click the headers, they won't reappear.

I think this is because the column element is cached, but the header is re-drawn with new elements.

Sorry, one more :) Say I create two instances of the same subclass of Ext.ux.touch.grid.View, both with sortable columns. The second grid appears without sort indicators. And clicking the column headers from the second grid causes the sort indicators on the first grid to change. I think this is because it's calling getColumns(), which returns the same array instance for both grids, and modifying its elements.

Long example, but it's mostly based on your "sorted" example:

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

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

var store = Ext.create('Ext.data.Store', {
    model : 'TestModel',
    sorters : [
        {
            property : 'price',
            direction : 'DESC'
        }
    ],
    data : [
        { company : 'A', price : 63.26},
        { company : 'B', price : 35.57},
        { company : 'C', price : 45.45}
    ]
});

var store2 = Ext.create('Ext.data.Store', {
    model : 'TestModel',
    sorters : [
        {
            property : 'price',
            direction : 'DESC'
        }
    ],
    data : [
        { company : 'D', price : 71.72},
        { company : 'E', price : 29.01},
        { company : 'F', price : 83.81}
    ]
});

Ext.define('MyGrid', {
    extend: 'Ext.ux.touch.grid.View',
    xtype: 'mygrid',
    config: {
        features : [
            {
                ftype   : 'Ext.ux.touch.grid.feature.Sorter',
                launchFn : 'initialize'
            }
        ],
        columns : [
            {
                header : 'Company',
                dataIndex : 'company',
                width : '50%'
            },
            {
                header : 'Price',
                dataIndex : 'price',
                width : '50%'
            }
        ]
    }
});

Ext.create('Ext.Container', {
    fullscreen : true,
    items : [
        {
            xtype : 'mygrid',
            height : 200,
            store : store
        },
        {
            xtype : 'mygrid',
            height : 200,
            store : store2
        }
    ]
});

There was in issue where doubletap did create an editable field, but immediately was followed with the blur event which converted the edit field back into a normal cell. This issue only happens in the stock Android browser. I could not reproduce in Chrome (Android) or Safari (iOS).

I fixed the problem in Ext.ux.touch.grid/feature/Editable.js by not attaching the blur event untill after the focus has happened:

// OLD CODE //
editor.field.on({
            scope: this,
            focus: 'onFieldBlur'
        });
        
editor.field.on({
            scope: this,
            blur: 'onFieldBlur'
});
// \OLD CODE //


// NEW CODE//
editor.field.on({
            scope: this,
            focus: function () {
                editor.field.on({
                    scope: this,
                    blur: 'onFieldBlur'
                });
            }
});
// \NEW CODE //