1. #101
    Sencha User
    Join Date
    Feb 2012
    Posts
    67
    Vote Rating
    1
    Soenhay is on a distinguished road

      0  

    Default Hopefully a quick question

    Hopefully a quick question


    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.

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

    Code:
    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.

  2. #102
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Default Issue with features

    Issue with features


    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:

    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 {
    Code:
    • 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.

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





  3. #103
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just pushed a small change to Feature.js to attempt to fix the delete of the ftype. Let me know if that helps.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #104
    Sencha User QuinnPerkins's Avatar
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    QuinnPerkins is on a distinguished road

      0  

    Default Editable grid questions

    Editable grid questions


    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!

  5. #105
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #106
    Sencha User
    Join Date
    Feb 2012
    Location
    Mumbai, India
    Posts
    12
    Vote Rating
    0
    savitanebula is on a distinguished road

      0  

    Default


    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...

  7. #107
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #108
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
    Eugene Ivakhiv is on a distinguished road

      0  

    Default Grids and docking

    Grids and docking


    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?

  9. #109
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The CSS should add a margin to the bottom.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #110
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
    Eugene Ivakhiv is on a distinguished road

      0  

    Default


    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?