Page 20 of 24 FirstFirst ... 101819202122 ... LastLast
Results 191 to 200 of 239

Thread: Ext.ux.TouchGridPanel v2.0b1

  1. #191
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  2. #192
    Sencha User
    Join Date
    Nov 2010
    Posts
    18
    Vote Rating
    0
      0  

    Default

    Code:
    colTpl  = '[TD="class: x-grid-cell x-grid-hd-cell x-grid-col-' col.mapping ' ' cls, width: '
      width
      '%"]
    ' col.header '
    [/TD] ';
    Code:
    colTpl  = '[TD="class: x-grid-cell x-grid-col-' col.mapping ' ' cls {isDirty:this.isCellDirty(parent)}, width: '
      width
      '%"]
    {' col.mapping '}
    [/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
      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
      0  

    Default 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
    220
    Vote Rating
    10
      0  

    Default 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
    18
    Vote Rating
    0
      0  

    Default

    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
    220
    Vote Rating
    10
      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
    220
    Vote Rating
    10
      0  

    Default 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
      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
      0  

    Default

    hello,

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

Page 20 of 24 FirstFirst ... 101819202122 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •