1. #41
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Vote Rating
    834
    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


    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.
    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. #42
    Sencha User
    Join Date
    Apr 2008
    Posts
    330
    Vote Rating
    0
    Jack_S is on a distinguished road

      0  

    Default


    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).

    Code:
    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);

  3. #43
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Vote Rating
    834
    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


    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.
    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.

  4. #44
    Sencha User
    Join Date
    Apr 2008
    Posts
    330
    Vote Rating
    0
    Jack_S is on a distinguished road

      0  

    Default


    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.
    Code:
    	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

    Code:
    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.

  5. #45
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Vote Rating
    834
    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


    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:

    Code:
    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.
    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.

  6. #46
    Sencha User
    Join Date
    Apr 2008
    Posts
    330
    Vote Rating
    0
    Jack_S is on a distinguished road

      0  

    Default


    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

    Code:
    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:

    Code:
    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.

  7. #47
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Vote Rating
    834
    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


    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.
    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.

  8. #48
    Sencha User
    Join Date
    Apr 2008
    Posts
    330
    Vote Rating
    0
    Jack_S is on a distinguished road

      0  

    Default


    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:

    Code:
    ,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.

  9. #49
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,812
    Vote Rating
    834
    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


    This was controversial for me to decide. I pretty much stayed with the ExtJS events... cellclick, rowclick, headerclick, refresh
    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.

  10. #50
    Sencha User
    Join Date
    Apr 2008
    Posts
    330
    Vote Rating
    0
    Jack_S is on a distinguished road

      0  

    Default


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

    Having some issue with the listeners not firing?

    Code:
    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');
    		});