Ext.ux.TouchGridPanel v2.0b1

**mitchellsimoens** · 1 Aug 2011 9:28 AM

If the columns are off, you probably are trying to fit long text in. Try using overflow hidden or get your Panel wider.

**yitachi** · 1 Aug 2011 11:24 PM

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.

Originally Posted by ssk_hari

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.

**abierbaum** · 2 Aug 2011 8:24 AM

Originally Posted by tomalex0

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?

**kkmpoon** · 8 Aug 2011 3:59 PM

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.

**jimmylu98** · 19 Aug 2011 8:01 AM

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

**yitachi** · 20 Aug 2011 2:16 AM

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(

Originally Posted by jimmylu98

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

**jimmylu98** · 20 Aug 2011 8:02 AM

Thank you. It works.

Originally Posted by yitachi

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(

**jimmylu98** · 23 Aug 2011 10:40 AM

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.

**Severance** · 31 Aug 2011 1:25 AM

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 !

**Severance** · 5 Sep 2011 7:08 AM

hello,

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

Ext.ux.TouchGridPanel v2.0b1

Thread Tools

Search Thread

Display

word-wrap:break-word; solved the problem

word-wrap:break-word; solved the problem

List Disclosure Icon Render Issue on Android

List Disclosure Icon Render Issue on Android

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

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

any way to hide header and disable sorting

any way to hide header and disable sorting