Ext.ux.TouchGridPanel v2.0b1

[mitchellsimoens]

Yes, I get it. It's just really busy for me so I will get around to it when I can. If you want you can try and *fix* it.

[Jack_S]

Hello,

This is a really awesome extension. I'm porting some of modules from my ExtJS to Touch and am having a little difficulties with creating an xtype which I could reuse.

I know that the store model is slightly different with Touch (I was suing HttpProxy).

Ext.ns('Ori.module.grid');

// create pre-configured grid class
Ori.module.grid.Contacts = Ext.extend(Ext.ux.TouchGridPanel, {
	 layout: 'fit'
	 ,initComponent:function() {

		
		this.model = Ext.regModel('contactModel', {
			fields     : [
		        'CONTACT_ID',
		        'CUST_ID',
		        'FIRST_NAME',
		        'LAST_NAME',
		        'EMAIL',
				'BLACKBERRY',
				'MOBILE',
				'PHONE',
				'PHONE2',
				'EXTENSION',
				'JOB_TITLE',
				'EMPLOYEE_STATUS'
			]
		});
		

		// configure the grid
		Ext.apply(this, {
			 autoDestroy: true
			,store: new Ext.data.Store({
				 model: this.model
				,proxy: {
					 type: 'ajax'
					,url: 'wwv_flow.show?p_flow_id=' + $v('pFlowId') + '&p_flow_step_id=0&p_instance=' + $v('pInstance') + '&p_request=APPLICATION_PROCESS%3DLOOKUP_CONTACTS'
					,reader: {
						type: 'json'
						,root: 'CONTACT_ID'
					}
				}
			})
			,colModel:[
			{
			     header: 'First Name'
				,dataIndex: 'FIRST_NAME'
				
				
			},{
			     header: 'Last Name'
				,dataIndex: 'LAST_NAME'
				
			}]
			,selModel    : {
				singleSelect : true
			}
		}); // eo apply

			
		Ori.module.grid.Contacts.superclass.initComponent.apply(this, arguments);
	} // eo function initComponent

	
,onRender:function() {
		// call parent
	Ori.module.grid.Contacts.superclass.onRender.apply(this, arguments);
	
	var store = this.store;
	store.load();
	
	
	} 
}); // eo extend
Ext.reg('contacts-grid', Ori.module.grid.Contacts);

[mitchellsimoens]

What error are you getting or what do you mean which xtype?

One thing I see is in your proxy you are defining your url with "$v". Do not think this is valid. You can look at the headers on your request to see if your request is going through and returning valid results.

[Jack_S]

Hello,

The v$ ARE Oracle APEX substitution strings for page, session, application id.

I used a basic for to test that everything works. The below code works without a problem.

	Ext.regModel('contactModel', {
			fields     : [
		         'CONTACT_ID'
		        ,'CUST_ID'
		        ,'FIRST_NAME'
		        ,'LAST_NAME'
		        ,'EMAIL'
				,'BLACKBERRY'
				,'MOBILE'
				,'PHONE'
				,'PHONE2'
				,'EXTENSION'
				,'JOB_TITLE'
				,'EMPLOYEE_STATUS'
			]
		});


	var contactStore = new Ext.data.Store({
				 model: 'contactModel'
				,proxy: {
					 type: 'ajax'
					,url: 'wwv_flow.show?p_flow_id=' + $v('pFlowId') + '&p_flow_step_id=0&p_instance=' + $v('pInstance') + '&p_request=APPLICATION_PROCESS%3DLOOKUP_CONTACTS'
					,reader: {
						 type: 'json'
						,root: 'results'
					}
				}
				,autoLoad: true
				
		});
		
		var contactGrid = new Ext.ux.TouchGridPanel({
			 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'
			}]
		});

But when I declare it as an xtype mt app doesn't render

Ext.ns('Ori.module.grid');

// create pre-configured grid class
Ori.module.grid.Contacts = Ext.extend(Ext.ux.TouchGridPanel, {
	 //layout: 'fit'
	 initComponent:function() {

		
		this.model = new Ext.regModel('contactModel', {
			fields     : [
		        'CONTACT_ID',
		        'CUST_ID',
		        'FIRST_NAME',
		        'LAST_NAME',
		        'EMAIL',
				'BLACKBERRY',
				'MOBILE',
				'PHONE',
				'PHONE2',
				'EXTENSION',
				'JOB_TITLE',
				'EMPLOYEE_STATUS'
			]
		});
		

		// configure the grid
		Ext.apply(this, {
			store: new Ext.data.Store({
				 model: this.model
				,proxy: {
					 type: 'ajax'
					,url: 'wwv_flow.show?p_flow_id=' + $v('pFlowId') + '&p_flow_step_id=0&p_instance=' + $v('pInstance') + '&p_request=APPLICATION_PROCESS%3DLOOKUP_CONTACTS'
					,reader: {
						type: 'json'
						,root: 'results'
					}
				}
				,autoLoad: true
			})
			,colModel:[
			{
			     header: 'First Name'
				,dataIndex: 'FIRST_NAME'
				
				
			},{
			     header: 'Last Name'
				,dataIndex: 'LAST_NAME'
				
			}]
			,selModel    : {
				singleSelect : true
			}
		}); // eo apply

			
		Ori.module.grid.Contacts.superclass.initComponent.apply(this, arguments);
	} // eo function initComponent

	
,onRender:function() {
		// call parent
	Ori.module.grid.Contacts.superclass.onRender.apply(this, arguments);
	
	//var store = this.store;
	//store.load();
	
	
	} 
}); // eo extend
Ext.reg('contacts-grid', Ori.module.grid.Contacts);

On my main panel I have a button which opens the grid. I think I may be doing something wrong with the model?

Thanks in advance for your help.

Jack S.

[mitchellsimoens]

Just like you register an xtype (Ext.reg("something", MyApp), you register your model using (Ext.regModel("name", Object). This registers the model with the ModelMgr. And then to reference it when you create your store, you just use "name". So your code should be:

Ext.ns('Ori.module.grid');

Ori.module.grid.Contacts = Ext.extend(Ext.ux.TouchGridPanel, {
	initComponent: function() {
		Ext.regModel('contactModel', {
			fields: [
				'CONTACT_ID',
				'CUST_ID',
				'FIRST_NAME',
				'LAST_NAME',
				'EMAIL',
				'BLACKBERRY',
				'MOBILE',
				'PHONE',
				'PHONE2',
				'EXTENSION',
				'JOB_TITLE',
				'EMPLOYEE_STATUS'
			]
		});
		
		Ext.apply(this, {
			store: new Ext.data.Store({
				model: "contactModel",
				proxy: {
					type: 'ajax',
					url: 'wwv_flow.show?p_flow_id=' + $v('pFlowId') + '&p_flow_step_id=0&p_instance=' + $v('pInstance') + '&p_request=APPLICATION_PROCESS%3DLOOKUP_CONTACTS',
					reader: {
						type: 'json',
						root: 'results'
					}
				},
				autoLoad: true
			}),
			colModel:[
				{
					header: 'First Name',
					dataIndex: 'FIRST_NAME'
				},{
					header: 'Last Name',
					dataIndex: 'LAST_NAME'
				}
			],
			selModel: {
				singleSelect : true
			}
		});
		Ori.module.grid.Contacts.superclass.initComponent.apply(this, arguments);
	},
	onRender: function() {
		Ori.module.grid.Contacts.superclass.onRender.apply(this, arguments);
		var store = this.store;
		store.load();
	}
});
Ext.reg('contacts-grid', Ori.module.grid.Contacts);

Notice no "new" when you register your model. Also you don't have to save it to your grid as it's already saved in the ModelMgr. Also in your store, you just reference by name. Let me know if this works for you.

[Jack_S]

Hello Mitchell,

I've made the modifications. I've tested it and nothing is happens. Actually my main panel hangs.

I have my suspicions that it has to do with how the grid is then displayed. I've changed the declaration to and the grid gets displayed as the the top most panel and I cannot do anything, almost as if it hangs

var contactGridTest = new Ori.module.grid.Contacts();

[......]
{fullscreen: true
				   ,layout: 'fit'
				   ,id: 'contactPanel'
				   ,items: contactGridTest
				 }

I'm sorry about this, You components works perfectly, and I'm still warppign my head around the flow and layouts.

But the grid displays, so I'm half-way there.

Maybe on another hand, what is the best tool to debug Touch (for ExtJS--> Firebug);

Here is what I caught in the Javascript Console of Chrome:

Failed to load resource: the server responded with a status of 404 (Not Found)
f:63Uncaught TypeError: Object [object Object] has no method 'fadeOut'
:8080/i/themes/touch/app.js:200Uncaught ReferenceError: Ori is not defined

I will debug this


Thanks

Jack S.

[mitchellsimoens]

Sencha Touch will only work in the WebKit browsers (Chrome and Safari). I use Chrome for my development and it comes with a Firebug-like tool. Click on the wrench and then go to Tools and you will see Javascript Console.

[Jack_S]

Hello Mitchell,

thanks for your help in this. Actually I can live without this form of declaration. Its usuafull for large application where you can warp all of the fucntionality for a given grid into 1 xtype.

But I do have a question regarding listeners. Are the Touch events available such as itemtap ? Or is it the standard ExtJS events for a grid panel?

How would I go about it? Something like this:

,listeners: {
		         itemtap: function (grid, index, item, event) {
				  
				  mainPanel.setActiveItem('mypanel', {
										type: 'flip'
										//,direction: 'left'
									});
				 
				var form = Ext.getCmp('mypanel');
				//var rec = dataview.store.getAt(index).data;
				var rec = grid.store.getAt(index);
				//alert(rec);
				form.load(rec);
		        }
		    }

Thanks

Jack S.

[mitchellsimoens]

This was controversial for me to decide. I pretty much stayed with the ExtJS events... cellclick, rowclick, headerclick, refresh

[Jack_S]

Works for me. Still an awesome and extremely useful ux !!!

Having some issue with the listeners not firing?

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 clicked');
					//mainPanel.setActiveItem('contactDetailPanel', {type: 'flip'});
				 
					//var form = Ext.getCmp('contactDetailPanel');
					//var rec = contactGrid.getSelectionModel().getSelected();
					//form.load(rec);
		        }
		    }
		});
		contactGrid.on('rowclick', function(){
			 alert('row clicked');
		});