Ext.ux.TouchGridPanel v2.0b1

[Jack_S]

Hello Mitchell,

Just one question, do I need to include the ext-all from ExtJS for the listeners to work?

The following resulted in NO events being fired from the grid?

var contactGrid = new Ext.ux.TouchGridPanel({
			 id : 'contactGrid'
			,fullscreen  : true
			,store       : contactStore
			
			,dockedItems : [{
				 xtype : 'toolbar'
				,dock  : 'top'
				,items : [{
					 text    : 'Back'
					,ui      : 'back'
					,handler:function(){
                                      mainPanel.setActiveItem(0,{type:'slide'});
                                 }
				}]
			}]
			,selModel    : {
				singleSelect : true
			}
			,colModel:[
			{
			     header: 'First Name'
				,mapping: 'FIRST_NAME'
			},{
			     header: 'Last Name'
				,mapping: 'LAST_NAME'
			},{
			     header: 'Status'
				,mapping: 'EMPLOYEE_STATUS'
			}]
			,listeners: {
		         rowdblclick  : function (grid, index, e) {
				    alert('row dbl clicked');
					//mainPanel.setActiveItem('contactDetailPanel', {type: 'flip'});
				 
					//var form = Ext.getCmp('contactDetailPanel');
					//var rec = grid.getSelectionModel().getSelected();
					//form.load(rec);
		        }
		    }
		});
		contactGrid.on('rowclick', function(){
			 alert('row clicked');
		});

Jack S.

[squarefan]

Hi,

Maybe someone can help me with two things..

1. Grid Rendering
I want to highlight (change the background color) of a certain row - whole row - e.g. to green. I can already check the cell value to determine which row and can set the font color with the examples provided but don't know how to set the background color for the whole row.

2. Resizing of the Grid
I looked into the issue and could resize the grid combining the window resize listener of Touch and the initComponent of Touchgrid:

       //listen for window resize
        Ext.EventManager.onWindowResize(function () {
            //console.log('resize');
            grid.initComponent();            
        });

This actually works pretty well in both the browser and the iphone.. unfortuantely it always returns an error from the sencha-touch-debug.js... namely on every resize:

TypeError: result of expression 'comp.getItemId' [undefined] is not a function

well thats actually it.. thank you so much for this great plugin!!!

cheers,
Alex

[mitchellsimoens]

Just one question, do I need to include the ext-all from ExtJS for the listeners to work?

No you do not.

Ok... this is kind of embarrassing. I changed from click to tap so rowtap works. My bad :-)

If you go to http://www.simoens.org/Sencha-Projec...ouchGridPanel/ I echo out all the params in the listener (grid, el, rowIndex, e). el is wrapped as an Ext.Element.

[mitchellsimoens]

About resizing... the beauty of using CSS3 column layout is it's suppose to resize the columns to the available size if you do not specify column-width as I am not. I'm specifying column-count. I'm looking into it but it seems that ST Panel isn't resizing either so I'm working on it.

[mitchellsimoens]

Happy holidays to all! Go ahead, go to http://www.simoens.org/Sencha-Projec...ouchGridPanel/ and rotate your iOS device. See if it rotates because I just found out why it wasn't.

Turns out I was overriding a crucial function, initEvents. So I added one line and it works! Git has been updated so grab it!

Once again ***ORIENTATION BUG HAS BEEN FIXED***

[squarefan]

@mitchellsimoens

FANTASTIC !!!

thanks sooo much. that was one of my major problems... now I'm almost finished! Do you maybe also have a pointer for my second "issue"... how to highlight the whole row in the grid with a specific color??

cheers,
Alex

[mitchellsimoens]

@mitchellsimoens

FANTASTIC !!!

thanks sooo much. that was one of my major problems... now I'm almost finished! Do you maybe also have a pointer for my second "issue"... how to highlight the whole row in the grid with a specific color??

cheers,
Alex

So you want the whole row in a color when the grid is rendering?

[squarefan]

yup.. i'm checking a field lets call it --> is_awesome. when that field is e.g. true then i want to set the background over the whole row. I can already check the value etc. but don't know how to set the background color for the whole row.

cheers,
Alex

[mitchellsimoens]

The problem is that the column renderers render the cell when the grid body is rendered. So you would have to do this post-grid body render as it stands right now.

[squarefan]

OK IC... do you have maybe a guideline how I could do that? do i have to iterate through the store and then overwrite the style for the correct row?