Touch Auto Complete Help

[vscarpenter@gmail.com]

Hi everyone. I am trying to implement something like an 'auto-complete' for my Sencha Touch application where the user needs to be able to filter through 1000's of items to select a particular item. So I am implemented this using a form with a text field where I ask the user to type in a few characters of name of the item and then hit search.

Once they hit search, I am using what they've typed in so far to filter the store. I then use the filtered results to create a modal popup and then display a select list of the items that they can select from - once they select the item, I close the pop-up window and prefill the text area in my form with the selected value. Sounds pretty simple and I have it mostly working.

I get an error when the user attempts to select an item from the select dropdown list the first time. If the user taps/clicks again, everything works as expected. The error I get is:

Uncaught TypeError: Property '1' of object function (e, args) {
            gen.call(dom, e, o, fn, scope, ename, dom, arguments.callee, args);
        } is not a function
Ext.gesture.Gesture.Ext.extend.fire
Ext.gesture.Touch.Ext.extend.onTouchStart
Ext.gesture.Manager.Ext.AbstractManager.handleTarget
Ext.gesture.Manager.Ext.AbstractManager.handleTarget
Ext.gesture.Manager.Ext.AbstractManager.onTouchStart
(anonymous function)

I have a sample application that illustrates the issue deployed here:

http://dl.dropbox.com/u/39023/Notes/autocomplete.html

Can anyone provide any input on what the issue could be? Any suggestions on improvements? Thanks in advance.

--Vinny

[Johnnyger]

Got the same Error, when choosing an item of the selectfield (Using Sencha Touch 1.1.0)

Uncaught TypeError: Property '1' of object function (e, args) {
            gen.call(dom, e, o, fn, scope, ename, dom, arguments.callee, args);
        } is not a function
Ext.gesture.Gesture.Ext.extend.firesencha-touch-debug.js:18588
Ext.gesture.Touch.Ext.extend.onTouchStartsencha-touch-debug.js:18658
Ext.gesture.Manager.Ext.AbstractManager.handleTargetsencha-touch-debug.js:18348
Ext.gesture.Manager.Ext.AbstractManager.handleTargetssencha-touch-debug.js:18316
Ext.gesture.Manager.Ext.AbstractManager.onTouchStartsencha-touch-debug.js:18205
(anonymous function)

Code is quite simple:

ntm.views.AddPatient = Ext.extend(Ext.Panel, {
	layout: {
		type: 'vbox',
		align: 'stretch'
	},
	floating: true,
	modal: true,
	centered: true,
	width: 320,
	height: 340,
	styleHtmlContent: true,
	mentorSelect: null,
	
	initComponent: function() {
		mentorSelect = new Ext.util.MixedCollection();
		
		for (i=0; i< ntm.MentorStore.data.length; i++) {
			mentorSelect.add({
				text: ntm.MentorStore.data.items[i].data.first_name,
				value: ntm.MentorStore.data.items[i].data.dbid
			});
		}
				
		this.form = new Ext.form.FormPanel({
			layout: 'auto',
			items: [{
				xtype: 'textfield',
				name: 'first_name',
				label: 'Vorname'
			}, {
				xtype: 'textfield',
				name: 'last_name',
				label: 'Nachname'
			}, {
				xtype: 'textfield',
				name: 'address1',
				label: 'Adresse'
			}, {
				xtype: 'textfield',
				name: 'address2',
				label: 'Ort'
			}, {
				xtype: 'selectfield',
				name: 'mentor',
				label: 'Mentor',
				options: mentorSelect.items
			}, {
				xtype: 'button',
				text: 'Hinzufügen',
				scope: this,
				handler: function() {
					//TODO
				}
			}]
		});
		
		this.dockedItems = [{
			scope: this,
			xtype: 'toolbar',
			title: 'Patient hinzufügen',
			items: [{
				xtype: 'spacer'
			}, {
				scope: this,
				xtype: 'button',
				iconCls: 'delete',
				iconMask: true,
				ui: 'plain',
				handler: function() {
					this.setVisible(false);
					this.form.reset();
				}
				
			}]
		}]
		
		this.items = this.form;
		ntm.views.AddPatient.superclass.initComponent.call(this);
	}
});

Ext.reg('addPatient', ntm.views.AddPatient);

Any suggestions?

[Johnnyger]

Could be a problem with floating "popup"-Panels. Can anyone confirm?

[Johnnyger]

push

Did not resolve the issue so far.
Can anyone help?

[ralf]

I had the same problem. Worked fine for me after adding "hideOnMaskTap: false" to the forms parent panel.

[vscarpenter@gmail.com]

hideOnMaskTap: false didn't work for me. I ended up having the exact same error message and issues.

[frostfang]

Hey guys, Just to help those in the future. I don't know if this is the correct solution but it worked for me.

I had a Ext.Component as my containers that was being floated. I had a nested list inside of it. I was getting the same error you describe when ever someone tapped anywhere after the floated component was shown.

Originally the component looked like this

var floatContainer = new Ext.Component({
    floating: true
});

I then changed the Nested List to have floating: true and changed the component to have hideOnMaskTap: true. Here is the code. The nested list does have docked items inside it but below is what i did to make everything work.

var floatContainer = new Ext.Component({
    floating: true,
    hideOnMaskTap: false,
});

var nList = new Ext.NestedList({
   floating : true
});