1. #271
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    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


    Give it a size using height/width configs or a layout. It will not auto-height just like a normal Ext.dataview.List won't.
    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.

  2. #272
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    varois is on a distinguished road

      0  

    Default


    Hello,

    I try to add a config height to it, and only a white container is visible, with the height a have set, but still no data visible. Would mind to give some example, how to use layout or height?

    Congrats for the UX. It's realy amazing. Well done.
    Last edited by varois; 19 Jun 2013 at 9:20 AM. Reason: wrong words

  3. #273
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    varois is on a distinguished road

      0  

    Default


    Hi,

    try to set height, to the grid using many different ways, but the only result i get is a WHITE container, where supposed to be the data.

    if i set height to the parent DIV of this White one, yes, works, but could not find any event, or way to do it.

    Please, any help?

  4. #274
    Sencha User
    Join Date
    Mar 2013
    Posts
    10
    Vote Rating
    0
    prabhum103 is on a distinguished road

      0  

    Default


    Thanks, for the Data grid in Sencha Touch. I am able to work with the grid. But How to define the width for entire grid? I want to have 9 columns in the grid and now they are coming one below another. How to make horizontal scrollable?
    Please help me.

  5. #275
    Sencha User
    Join Date
    Jun 2013
    Location
    Bangalore
    Posts
    1
    Vote Rating
    0
    Sasri is on a distinguished road

      0  

    Default


    Hi Mitchell,
    I have problem in loading data from my store on to grid panel.I am posting the code snippets below..pls do the needful..!!

    Views
    #1.


    Ext.define('BankSoft.view.Last', {
    extend: 'Ext.Container',
    alias: 'widget.last',




    requires: [
    'BankSoft.view.Grid',
    'Ext.form.FieldSet',
    'Ext.Img',
    'Ext.Label',
    'BankSoft.store.Grid'
    ],


    config: {
    itemId: 'personalNoList',
    showAnimation: 'pop',

    items: [
    {
    xtype: 'fieldset',
    height: '',
    style: 'background:#BBDEF5;',
    title: 'Last 10 Transactions',
    items: [
    {
    xtype: 'textfield',
    id: 'accountno',
    clearIcon: false,
    label: 'Account no',
    labelWidth: '40%',
    labelWrap: true,
    value: 802100000263
    },
    {
    xtype: 'textfield',
    id: 'accountbalance',
    clearIcon: false,
    label: 'Account balance',
    labelWidth: '40%',
    labelWrap: true,
    value: 0
    }
    ]
    },
    {
    xtype: 'grid-grid',
    store: 'gridStore'
    },
    {
    xtype: 'spacer',
    height: 1,
    style: 'background:black;'
    },
    {
    xtype: 'panel',
    centered: false,
    docked: 'top',
    height: 50,
    id: 'header2',
    style: 'background:#BBDEF5;',
    layout: {
    align: 'center',
    pack: 'center',
    type: 'hbox'
    },
    items: [
    {
    xtype: 'button',
    action: 'open-schemes-view',
    docked: 'left',
    height: 40,
    html: '<img src="http://localhost/projects/BankSoft/metadata/resource/images/back_blue1.png"/>',
    margin: '',
    style: 'margin-top:10px;',
    styleHtmlContent: true,
    ui: 'plain',
    width: 60,
    icon: 'true',
    iconAlign: 'right',
    text: 'Back'
    },
    {
    xtype: 'image',
    centered: true,
    height: 20,
    width: 120,
    src: 'http://localhost/projects/BankSoft/metadata/resource/images/banksoft_logo.png'
    },
    {
    xtype: 'button',
    docked: 'right',
    height: 40,
    html: '<img src="http://localhost/projects/BankSoft/metadata/resource/images/exit.png"/>',
    margin: '',
    style: 'margin-top:10px;margin-right:3px;',
    styleHtmlContent: true,
    ui: 'plain',
    width: 60,
    icon: 'true',
    iconAlign: 'center',
    text: 'Logout'
    }
    ]
    },
    {
    xtype: 'panel',
    docked: 'bottom',
    height: 30,
    id: 'footer1',
    style: 'background:#BBDEF5;',
    layout: {
    type: 'fit'
    },
    items: [
    {
    xtype: 'label',
    centered: true,
    html: '&copy; Processware Systems (P) Ltd',
    style: 'color:#000;font-size:16px:'
    }
    ]
    },


    ]
    },


    initialize: function() {
    this.callParent();




    }


    });



    #2.
    Ext.define('BankSoft.view.Grid', {
    extend: 'Ext.ux.touch.grid.List',
    xtype: 'grid-grid',


    requires: [
    'Ext.ux.touch.grid.feature.Feature',
    'Ext.ux.touch.grid.feature.Editable',
    'Ext.ux.touch.grid.feature.Sorter',
    'Ext.field.Number',
    'BankSoft.store.Grid'
    ],


    config: {
    title: 'Grid',
    store: true,
    columns: [
    {
    header: 'Transaction Date',
    dataIndex: 'transactiondate',
    width: '30%',
    editor: {
    xtype: 'textfield',
    labelWrap: true
    }
    },
    {
    header: 'Description',
    dataIndex: 'description',
    width: '40%',
    editor: {
    xtype: 'textfield',
    labelWrap: true
    }
    },
    {
    header: 'Credit',
    dataIndex: 'credit',
    width: '15%',
    editor: {
    xtype: 'textfield',
    labelWrap: true
    }
    },
    {
    header: 'Debit',
    dataIndex: 'debit',
    width: '15%',
    editor: {
    xtype: 'textfield',
    labelWrap: true
    }
    }
    ],
    features: [
    {
    ftype: 'Ext.ux.touch.grid.feature.Sorter',
    launchFn: 'initialize'
    },
    {
    ftype: 'Ext.ux.touch.grid.feature.Editable',
    launchFn: 'initialize'
    }
    ]
    },


    applyStore: function () {
    return new BankSoft.store.Grid();
    }
    });

    Store

    Ext.define('BankSoft.store.Grid', {
    extend: 'Ext.data.Store',
    xtype:'gridStore',


    requires: [
    'BankSoft.model.Grid'
    ],


    config: {
    autoLoad:true,
    model: 'BankSoft.model.Grid',
    data: [
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    { transactiondate: '9/7/2011', description: 'Cr.Account Closing SB 2765 ADJ', credit: '654.00', debit: '' },
    ],
    storeId: 'gridStore'
    }
    });

    Model

    Ext.define('BankSoft.model.Grid', {
    extend: 'Ext.data.Model',


    config: {
    fields: [
    'transactiondate',
    'description',
    'debit',
    'credit'
    ]
    }
    });

  6. #276
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default


    I have just upgraded my app to Sencha Touch 2.2.1, including getting the latest version of Touch Grid Panel. But I am having the same problem as several others who have posted here, in that my grid is not displaying my data. The header displays fine but the data does not list. I have checked the DOM and the data is there.


    Here is the code for my grid.
    Code:
    Ext.define('dcwm.view.StatementDetailGrid', {
        extend: 'Ext.ux.touch.grid.List',
        xtype: 'statementDetailGrid',
        requires: ['Ext.ux.touch.grid.feature.Feature'],
        
        config: {
            store: 'statementDetailStore',
            multiSelect: false,
            height: 600,
            columns    : [{
                header    : "Date",
                dataIndex : "postDate",
                style     : "text-align: left;",
                width     : '15%'
            },{
                header    : "Description",
                dataIndex : "description",
                width     : '70%'
            },{
                header    : "Amount",
                dataIndex : "amount",
                width     : '15%',
                cls       : 'redgreen-cell',
                style     : "text-align: right;",
                renderer  : function(value) {
                    var cls = (value > 0) ? 'green' : 'red';
                    return '<span class="' + cls + '">' + value.toFixed(2) + '</span>';
                }
            }]
        }
    });

    Here is the code for the panel that uses the grid.
    Code:
    Ext.define('dcwm.view.StatementView', {
        extend: 'Ext.Panel',
        xtype: 'statementView',
        
        config: {
            title: 'Statement',
            iconCls: 'table',
            id: 'statementView',
    
    
            items: [
                {
                    xtype: 'titlebar',
                    title: 'Statement',
                    docked: 'top',
                    height: '3.0em',
                    items: [
                        {
                            xtype:'fixedbutton',
                            ui: 'confirm-round',
                            text: 'Pay',
                            height: '2.5em',
                            align: 'right',
                            action: 'pay',
                            id: 'pay-button'
                        },{
                            xtype:'spacer',
                            width: 50,
                            align: 'right'
                        }
                    ]
                },{
                    xtype: 'statementDV'
                },{        
                    xtype: 'statementDetailGrid'
                }
            ]
        }
    });

    I don't think the problem is with my grid, because it is pretty simple. I have probably forgotten some step when I downloaded the latest version of Ext.ux.touch.grid. I manually copied the source code to my application's src.ux directory and included 'Ext.ux.touch.grid.List' in the 'requires' list in my app.js. I copied the CSS to my resources.css directory and included it in the app.json file.


    Can somebody give me some suggestions of what to try next? Thank you in advance.

  7. #277
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    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


    Inspect the DOM to see if you have a sizing issue.
    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. #278
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default


    I could see the height set properly in the DOM.

    I did finally get it working by setting a layout type of vbox in the panel that uses the grid. I thought I had tried that before, but I guess not. Anyway, the grid is now displaying, but it looks funny, so I will check into the CSS.

  9. #279
    Sencha User
    Join Date
    Nov 2011
    Posts
    16
    Vote Rating
    0
    varois is on a distinguished road

      0  

    Default


    Hello,
    Have anyone made an filter for the Ext.ux.touch.grid store? I've tried to add an dropdown to titlebar, to be able to filter the grid store. Let's imagine that you have a list of all country cities and you would like to filter them by state.

    On change event of the xtype: 'selectfield', i get the grid, by ref on controller, get store and call filter using the selected value from the selectfield, on columns estate:

    this.getMyGrid().getStore().filter("estate", this.getComDropDownEstate().getValue());

    it seems to be doing nothing. Do i have to call some grid.Reconfigure()?

    Thanks in advance for any help.

  10. #280
    Sencha User
    Join Date
    Mar 2013
    Posts
    4
    Vote Rating
    0
    doddas is on a distinguished road

      0  

    Default Basic question

    Basic question


    Hi,

    I have downloaded this from gitshub, how do I use in the application? Can I just copy into my sencha app?

    Sorry for asking this question, please help.