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


    If the columns are off, you probably are trying to fit long text in. Try using overflow hidden or get your Panel wider.
    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. #192
    Sencha User
    Join Date
    Nov 2010
    Posts
    14
    Vote Rating
    0
    yitachi is on a distinguished road

      0  

    Thumbs up word-wrap:break-word; solved the problem

    word-wrap:break-word; solved the problem


    Code:
    colTpl += '<td width="'
    + width
    + '%" class="x-grid-cell x-grid-hd-cell x-grid-col-'
    + col.mapping
    + ' '
    + cls
    + '" mapping="'
    + col.mapping
    + '"><p style="overflow:hidden;width:'
    + width
    + 'px;word-wrap:break-word;text-align: center;">'
    + col.header + '</p></td>';
    Code:
    colTpl += '<td width="'
    + width
    + '%" class="x-grid-cell x-grid-col-'
    + col.mapping
    + ' '
    + cls
    + ' {isDirty:this.isCellDirty(parent)}" style="'
    + style
    + '" mapping="'
    + col.mapping
    + '" rowIndex="{rowIndex}"><p style="overflow:hidden;width:'
    + width
    + 'px;word-wrap:break-word;text-align: center;">{'
    + col.mapping + '}</p></td>';
    Long words cause this problem.
    We have added "word-wrap:break-word;" to colTpl variable in buildHeader and buildDataView functions.
    You could see assignments above.


    Quote Originally Posted by ssk_hari View Post
    HI irocker ... I am also facing the same issue where the Headers and columns are not aligned properly. Could you please adcvice how u fixed the issue ?

    Hari.
    Last edited by yitachi; 1 Aug 2011 at 11:26 PM. Reason: Format code blocks

  3. #193
    Ext JS Premium Member
    Join Date
    Oct 2010
    Posts
    103
    Vote Rating
    7
    abierbaum is on a distinguished road

      0  

    Default


    Quote Originally Posted by tomalex0 View Post
    Below code seems to fix the problem i was facing regarding renderer

    Replace the current prepareData function
    Code:
    prepareData  : function(data, index, record) {
    				var column,
    					i  = 0,
    					ln = colModel.length;
    				var prepare_data = {};
    				prepare_data.dirtyFields = {};
    				for (; i < ln; i++) {
    					
    					column = colModel[i];
    					if (typeof column.renderer === "function") {
    						prepare_data[column.mapping] = column.renderer.apply(me, [data[column.mapping],column, record, index]);
    					} else {
    						prepare_data[column.mapping] = data[column.mapping];
    					}
    				}
    				
    				prepare_data.isDirty = record.dirty;
    
    				prepare_data.rowIndex = index;
    				return prepare_data;
    			}
    Now renderer can take parameters like index,record ..
    and we can use like this
    Code:
    renderer : function(value,column,record,index) {
    					var color = (value > 0) ? "00FF00" : "FF0000";
    					return "<span style='color: #" + color + ";'>" + value +"--"+record.get('company')+"-this text</span>";
    				}
    I have not tested it fully but it worked in my implementation.

    If there is any issue please post here, so i will be aware
    I ended up doing something very similar. Otherwise any use of renderer methods that introduce HTML values would lead to problems with reloads.

    If I had time, I think a better solution may be to move the renderer call into the colTpl template instead and reserve the prepareData method for the more standard usage in DataViews of adding new data to the record. Any opinion if that would be a mistake?

  4. #194
    Sencha User
    Join Date
    Jul 2011
    Posts
    10
    Vote Rating
    0
    kkmpoon is on a distinguished road

      0  

    Default List Disclosure Icon Render Issue on Android

    List Disclosure Icon Render Issue on Android


    Hi all,
    I am new to this forum and found this nice TouchGridPanel. I was trying to use it in my app but ran into problem with my list. When I select a list item, the disclosure icon becomes a solid square. If I commented out .x-item-selected in the Ext.ux.TouchGridPanel.css, then it renders fine. I can recreate this problem in both Android 3.1 and 2.2.1.
    Here is a very simple demo code:
    main.js:
    Code:
    Ext.setup({    tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady : function() {
            Ext.regModel('Contact', {
                fields: ['firstName', 'lastName']
            });
    
    
            Ext.regStore('Contact', {
                    model: 'Contact',
                    data: [
                            {firstName: 'Tommy', lastName: 'Maintz'},
                        {firstName: 'Ed', lastName: 'Spencer'},
                        {firstName: 'Jamie', lastName: 'Avins'},
                        {firstName: 'Aaron', lastName: 'Conran'},
                        {firstName: 'Dave', lastName: 'Kaneda'},
                    ]
            });
    
    
            var list = new Ext.List({
                    fullscreen: true,
                    store: 'Contact',
                    fullscreen: true,
                    itemTpl: '{firstName} {lastName}',
                    onItemDisclosure: function(record) { }
            });
       }
    });
    index.html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Sencha Touch GridPanel</title>
                    <link rel="stylesheet" href="../touch11/resources/css/sencha-touch.css" type="text/css">
                    <link rel="stylesheet" href="Ext.ux.TouchGridPanel.css" type="text/css">
                    <script type="text/javascript" src="../touch11/sencha-touch-debug.js"></script>
                    <script type="text/javascript" src="Ext.ux.TouchGridPanel.js"></script>
                    <script type="text/javascript" src="main.js"></script>
        </head><body></body>
    </html>
    Any workaround would be appreciated! Thanks in advance.

  5. #195
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default How to turn off display refreshing (mask) when store.load()

    How to turn off display refreshing (mask) when store.load()


    Thanks, it is great extension and I was able to load and pull remote list data without any problem.
    Only one problem for me is display refreshing (mask) when store.load, which is very annoying.

    In Ext4, I can turn off the display refreshing on grid by: viewConfig: { loadMask: false }

    How do I turn it off on touch grid? Thank you.

    Jimmy

  6. #196
    Sencha User
    Join Date
    Nov 2010
    Posts
    14
    Vote Rating
    0
    yitachi is on a distinguished road

      0  

    Thumbs up


    Hi,

    You could fix it with adding a line "loadingText : false, " as in example below.

    Code:
    return new Ext.DataView(								{
    
    		store : me.store,
    
    		itemSelector : "tr.x-grid-row",
    		simpleSelect : me.multiSelect,
    		scroll : me.scroll,
    
    		loadingText : false,
    
    		tpl : new Ext.XTemplate(


    Quote Originally Posted by jimmylu98 View Post
    Thanks, it is great extension and I was able to load and pull remote list data without any problem.
    Only one problem for me is display refreshing (mask) when store.load, which is very annoying.

    In Ext4, I can turn off the display refreshing on grid by: viewConfig: { loadMask: false }

    How do I turn it off on touch grid? Thank you.

    Jimmy

  7. #197
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default


    Thank you. It works.

    Quote Originally Posted by yitachi View Post
    Hi,

    You could fix it with adding a line "loadingText : false, " as in example below.

    Code:
    return new Ext.DataView(                                {
    
            store : me.store,
    
            itemSelector : "tr.x-grid-row",
            simpleSelect : me.multiSelect,
            scroll : me.scroll,
    
            loadingText : false,
    
            tpl : new Ext.XTemplate(

  8. #198
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    St. Louis
    Posts
    212
    Vote Rating
    9
    jimmylu98 will become famous soon enough

      0  

    Default any way to hide header and disable sorting

    any way to hide header and disable sorting


    I like to hide header of the grid panel to save a bit space.
    Also like to disable sorting if header is displayed (sorting is not working if renderer for the column ).
    Any way to do this? Thanks.

  9. #199
    Sencha User
    Join Date
    Sep 2010
    Posts
    50
    Vote Rating
    0
    Severance is on a distinguished road

      0  

    Default


    hello,

    your work is awsome, but could you give me the way to make the grid scrolling horizontally ?

    I have tried the code below, but only the rows are scrolling, the header stay fixed, and the grid is cut in the rigth side...

    var grid = new Ext.ux.TouchGridPanel({
    fullscreen : true,
    store : store,
    multiSelect : false,
    scroll : 'both'


    thank you !

  10. #200
    Sencha User
    Join Date
    Sep 2010
    Posts
    50
    Vote Rating
    0
    Severance is on a distinguished road

      0  

    Default


    hello,

    not one has an idea or an example of an horizontal grid (with horizontal scroll). ?