[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

sencha extjs combobox with queryMode remote sends empty strings rather than the typed in value

Posted on 2014-08-11
2
Medium Priority
?
1,407 Views
Last Modified: 2014-08-12
i'm trying to deal with autocompletion from yahooAPI which works (using a web browser) using the following url

http://d.yimg.com/autoc.finance.yahoo.com/autoc?callback=YAHOO.Finance.SymbolSuggest.ssCallback&query=aaaa

and yields results such as (for the previous example which queries for values matching 'aaaa')

YAHOO.Finance.SymbolSuggest.ssCallback({"ResultSet":{"Query":"aaaa","Result":[{"symbol":"AAAAX","name": "DWS Alternative Asset Allocation A","exch": "NAS","type": "M","exchDisp":"NASDAQ","typeDisp":"Fund"}]}})

Open in new window


the problem i experience is whatever is typed in the field, sencha sends a query, and adds the 'query' parameter as expected (or eny other parameter name i try) but with an empty value rather than the field's contents

i'm using the version available here (also tried 5.0.1 : same problem)
http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js


here is the model

		Ext.define('symbolsList', {
			extend: 'Ext.data.Model',
			fields: [
				{name: 'symbol', type: 'string'},
				{name: 'name',  type: 'string'},
				{name: 'exch', type: 'string'},
				{name: 'type', type: 'string'},
				{name: 'typeDisp', type: 'string'},
			]
		});

Open in new window


and here is the code for the panel with the combobox

	var floatingPanel = Ext.create('Ext.panel.Panel', {
		width: 200,
		floating: true, // make this panel an absolutely-positioned floating component
		draggable:true,
		alwaysOnTop: true,
		title: 'new value',
		html: 'Test floating Panel',
		items: [
			{
				xtype: 'component',
				style: 'margin-bottom:0.5em',
				html: 'blah blah',
			},
			{
				xtype: 'combo',
				
				fieldLabel: 'symbol or name',
				hideLabel: true,
				
				store: Ext.create('Ext.data.Store', {
					model:'symbolsList',
					
					proxy: {
						type: 'jsonp',
						url: 'http://d.yimg.com/autoc.finance.yahoo.com/autoc?callback=YAHOO.Finance.SymbolSuggest.ssCallback',
						reader: {
							type: 'json',
							transform: function(data){
								return data['query']['results'];
							}
						}
					},					
				}),
				
				queryMode: 'remote',
				queryParam: 'query',
				//queryCaching: true,
				
// adding either of those did not help
				//id:'tttt',
				//displayField: 'newSymbol',
				//valueField: 'abbr',
			}	
		]
	}).show();

Open in new window


i'm also wondering why sencha sends the query but keeps displaying a "loading" symbol after it receives an empty resultset

i'm NOT interested in other ways to interact with yahooAPI : i already have both jquery and plain js code for that, and i'm not interested in a server side solution either (my app is client only and written in order to learn sencha and possibly for personal use at some point). other than that all ideas are welcome.

thanks for any help you can provide
0
Comment
Question by:skullnobrains
  • 2
2 Comments
 
LVL 27

Accepted Solution

by:
skullnobrains earned 0 total points
ID: 40256347
found the answer myself :

there is a "minChars:4," default settings that prevents autocompletion if the value of the field is not long enough

when the user types less characters and presses <down arrow>
sencha triggers the load() method of the corresponding store
with expected parameter : "query: field.value" (in pseudo code)

somehow sencha does send the query but as long as minchars is not reached,
the parameter is empty (GET ... &query=&...)

the only way to prevent this behavior is to set minchars to 1

i do not know of a way to actually prevent sencha from sending the query when the typed string is not long enough without hacking the framework. i consider the behavior a bug, and i'm unsure the same would be repeatable on other versions
0
 
LVL 27

Author Closing Comment

by:skullnobrains
ID: 40256352
found answer myself
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question