PDA

View Full Version : Creating ComboBox



charlieholder
4 Apr 2008, 6:53 AM
I am getting this error and the code is not creating the ComboBox:

TypeError: Value undefined (result of expression cbsite.applyTo) is not object.
at app:/ext_sample.js : 84
at app:/lib/ext/ext-all.js : 12
at app:/lib/ext/ext-all.js : 12
at app:/lib/ext/ext-all.js : 13
at app:/lib/ext/adapter/ext/ext-base.js : 10
at app:/lib/ext/adapter/ext/ext-base.js : 10
undefined at undefined : undefined

Here is my HTML file:

<html>
<head>
<title>Curriculum Example</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<link href="sample.css" rel="stylesheet" type="text/css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="ext_sample.js"></script>

<script type="text/javascript" src="AIRAliases.js"></script>
<!-- <script type="text/javascript" src="AIRIntrospector.js"></script> -->
</head>

<body>
<div>
<form name="myForm">
<input type="text" id="feedbox" size="20" />
</form>
</div>
</body>
</html>

And here is my ext_sample.js:

Ext.namespace('Ext.exampledata');

Ext.exampledata.states = [
['1', 'http://www.domain.com/test1.atom'],
['2', 'http://www.domain.com/test2.atom'],
['3', 'http://www.domain.com/test3.atom'],
['4', 'http://www.domain.com/test4.atom'],
['5', 'http://www.domain.com/test5.atom'],
['6', 'http://www.domain.com/test6.atom'],
['7', 'http://www.domain.com/test7.atom'],
['8', 'http://www.domain.com/test8.atom'],
['9', 'http://www.domain.com/test9.atom']
];

var combos = {
init : function(){
// simple array store
var store = new Ext.data.SimpleStore({
fields: ['num', 'url'],
data : Ext.exampledata.states
});
var cbsite = new Ext.form.ComboBox({
store: store,
displayField: 'url',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select a feed...',
selectOnFocus: true
});

cbsite.applyTo('feedbox');
}
};
Ext.onReady(combos.init, combos);

Upon rendering, I only see a blank input field. Can anyone offer a suggestion?

charlieholder
4 Apr 2008, 7:52 AM
*bump*

mjlecomte
4 Apr 2008, 8:38 AM
I don't see applyTo in the API?

http://extjs.com/deploy/dev/docs/?class=Ext.form.ComboBox

charlieholder
7 Apr 2008, 5:35 AM
It's the 4th one down from the top.


applyTo : Mixed
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document ...
The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in the document that specifies some structural markup for this component. When applyTo is used, constituent parts of the component can also be specified by id or CSS class name within the main element, and the component being created may attempt to create its subcomponents from that markup if applicable. Using this config, a call to render() is not required. If applyTo is specified, any value passed for renderTo will be ignored and the target element's parent node will automatically be used as the component's container.

charlieholder
7 Apr 2008, 7:20 AM
I think I'm getting a little closer. I now have a ComboBox appearing, but my data doesn't populate it. Here's my code so far and the error I get when I click the drop down.

Error:

Error: Adobe AIR runtime security violation for JavaScript code in the application security sandbox (Function constructor)
at app:/lib/ext/ext-all.js : 25
at app:/lib/ext/ext-all.js : 25
at app:/lib/ext/ext-all.js : 83
at app:/lib/ext/ext-all.js : 83
at app:/lib/ext/ext-all.js : 58
at app:/lib/ext/adapter/ext/ext-base.js : 9
at app:/lib/ext/adapter/ext/ext-base.js : 9
at app:/lib/ext/ext-all.js : 129
at app:/lib/ext/ext-all.js : 129
at app:/lib/ext/ext-all.js : 12
at app:/lib/ext/ext-all.js : 12
at app:/lib/ext/ext-all.js : 12
at app:/lib/ext/ext-all.js : 12
at app:/lib/ext/ext-all.js : 123
at app:/lib/ext/ext-all.js : 125
at app:/lib/ext/ext-all.js : 129
at app:/lib/ext/ext-all.js : 13
at app:/lib/ext/adapter/ext/ext-base.js : 10
at app:/lib/ext/adapter/ext/ext-base.js : 10
undefined at undefined : undefined

ext_sample.js:

Ext.onReady(function(){
// some data used in the examples
var myData = [
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
['CA', 'California'],
['CO', 'Colorado'],
['CN', 'Connecticut'],
['DE', 'Delaware'],
['DC', 'District of Columbia']
];
var theData = new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : myData
});
var cbsite = new Ext.form.ComboBox({
store: theData,
displayField: 'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true
});

cbsite.applyToMarkup('local-states');
});

html file:

<html>
<head>
<title>Curriculum Example</title>

<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="ext_sample.js"></script>
<script type="text/javascript" src="AIRAliases.js"></script>
<!-- <script type="text/javascript" src="AIRIntrospector.js"></script> -->

<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>

<body>

<form>
<input type="text" id="local-states" name="local-states" />
</form>

</body>
</html>

charlieholder
7 Apr 2008, 9:30 AM
*bump*

charlieholder
7 Apr 2008, 11:42 AM
The ComboBox is "working" now. It does appear on the screen, but I can't see any of the options from the drop down menu. It registers the data but the options seem to be like 3 pixels tall and containing no text. Has anyone had this problem?


<html>
<head>
<title>Curriculum Example</title>

<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script type="text/javascript" src="lib/ext/air/ext-air.js"></script>
<script type="text/javascript" src="ext_sample.js"></script>
<script type="text/javascript" src="AIRAliases.js"></script>
<!-- <script type="text/javascript" src="AIRIntrospector.js"></script> -->

<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="lib/ext/air/resources/ext-air.css" />
<link rel="stylesheet" type="text/css" href="ext_sample.css" />
</head>

<body>

<form>
<input type="text" id="local-states" name="local-states" />
</form>

</body>
</html>


var combo = new Ext.XTemplate(
'<tpl for="."><div class="x-combo-list-item"></div></tpl>'
);
Ext.onReady(function(){
// some data used in the examples
var myData = [
['AL', 'Alabama'],
['AK', 'Alaska'],
['AZ', 'Arizona'],
['AR', 'Arkansas'],
['CA', 'California'],
['CO', 'Colorado'],
['CN', 'Connecticut'],
['DE', 'Delaware'],
['DC', 'District of Columbia']
];
var theData = new Ext.data.SimpleStore({
fields: ['abbr', 'state'],
data : myData
});
var cbsite = new Ext.form.ComboBox({
store: theData,
tpl: combo,
displayField: 'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select A State ...',
selectOnFocus: true
});

cbsite.applyToMarkup('local-states');
});

mjlecomte
7 Apr 2008, 1:51 PM
In the future use this during development.


<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>

What does firebug show when you inspect the html of the combobox? Click on the combobox dropdown, to open it up, then click inspect in firebug, then go to page and highlight the dropdown to inspect. This will help you see what content is there.

How about valueField: 'abbr' ?

devnull
7 Apr 2008, 2:25 PM
'applyTo' is a config option, not a method, though I see you did change it.
The 'applyToMarkup' method specifies that the existing markup be valid, though I have no idea what 'valid' is in this case. I have always used the 'render' method, but have also always rendered it to a div when doing this, not an existing form element (which there is no need for in this case btw).

charlieholder
8 Apr 2008, 5:28 AM
What does firebug show when you inspect the html of the combobox?

How do you run firebug on an AIR application?

charlieholder
8 Apr 2008, 5:34 AM
I have always used the 'render' method, but have also always rendered it to a div when doing this, not an existing form element (which there is no need for in this case btw).

When I render to a div, I get a blank screen back.

charlieholder
8 Apr 2008, 8:35 AM
*bump*

mjlecomte
8 Apr 2008, 11:49 AM
How do you debug in air?

charlieholder
9 Apr 2008, 6:00 AM
How do you debug in air?
I don't know.

I Just complied the code and ran it on the Firefox internal server since Firebug needs a browser and not an application window. I see this error:

air is not defined
var app = air.NativeApplication.nativeApplication;

Here is a screen shot (http://www.charlieholder.com/img/other/Picture8.png) of what I see.

mjlecomte
9 Apr 2008, 8:57 AM
I don't know.

http://www.adobe.com/devnet/air/ajax/articles/air_dreamweaver_for_js_04.html

allampraveen
9 Apr 2008, 9:55 AM
I am reloading Combo Box Items

MonthData.load({data: Months});

MonthData is a Store
Contains Data as
[['1','1']]


Months is a Variable which is update with [['1','1','2','2']]

Please let me know where i have gone wrong

charlieholder
9 Apr 2008, 10:19 AM
http://www.adobe.com/devnet/air/ajax/articles/air_dreamweaver_for_js_04.html

I'm using Aptana Studio.

Maybe I don't understand, but how does this info help me figure out why the text in the drop down isn't displaying?

mjlecomte
9 Apr 2008, 11:38 AM
Well, I just figured you might need to debug at some point. You said you didn't know how.

Again, I had very similar problem at one point while making the extending class thread. I wouldn't have been able to fix it without debugging it. Firebug was how I figured out what was wrong. Other than asking for help, how do you intend to figure out what is wrong without some sort of debug routine?

charlieholder
10 Apr 2008, 9:15 AM
That's kind of a weird question. I don't really think there is another way to find out?

I guess no one knows the answer to why the text isn't showing up.

charlieholder
11 Apr 2008, 6:53 AM
*bump*

mjlecomte
11 Apr 2008, 8:42 AM
Apparently I'm not the only one that feels that some debugging is needed on your end to provide insight.

charlieholder
14 Apr 2008, 5:44 AM
How do you run firebug on an AIR application?
Well in that case, again, how do you run firebug on an AIR application?

How do you debug in Aptana Studio?

I don't know what debugging totally entails. There is a console in AS that prints stuff while the AIR application is running. Nothing is being printed there.

mjlecomte
14 Apr 2008, 6:43 AM
Well in that case, again, how do you run firebug on an AIR application?I don't know hence the:

http://www.adobe.com/devnet/air/ajax/articles/air_dreamweaver_for_js_04.html


How do you debug in Aptana Studio?

I don't, I use firebug.


I don't know what debugging totally entails. There is a console in AS that prints stuff while the AIR application is running. Nothing is being printed there.I dunno, go to Aptana and get help?

Your code doesn't look like anything special, if it were me I probably would have tried it outside of Air to get it working first (using firebug as mentioned), then drop it into Air once I knew it worked.

This particular issue appears to be a side point. I don't know how you expect to get anywhere with no debug resources at your fingertips.

charlieholder
14 Apr 2008, 9:16 AM
When I look at the information that the AIR debugger gives me, the innerHTML for all the list options is set to empty.

How can I ensure that the list elements are being filled with text?

jonhartmann
14 Apr 2008, 10:32 AM
You really should have asked this in the Air specific forum, as I think its confusing the heck out of people that don't understand whats going on. He can't use FireFox because he isn't accessing the code in a browser, he's accessing it in Adobe AIR's run time. The AIR run time can be debugged by including the AIRIntrospection file, but its really cryptic, and thus far has done me no good.

The air runtime is also why he has a call to the NativeWindow, which is probably causing Firebug to flip out.


charlieholder:
If you look over in the AIR forum will find that AIR's security prevents eval() from working, and that stops ComboBox and some other features from working correctly. The fix for that is over in the AIR forum as well, but involves creating a template before Ext.onReady and then passing it in explicitly.

charlieholder
14 Apr 2008, 10:50 AM
Thanks for the advice. I am not using eval and had the template in since a while ago.

I will try this other place since this doesn't seem to be the correct forum.

charlieholder
14 Apr 2008, 11:58 AM
Solved the problem.

mjlecomte
14 Apr 2008, 6:51 PM
It would be nice to post the working version stating the problem so someone else coming here can benefit. ;)

charlieholder
21 Apr 2008, 7:55 AM
I read somewhere that you need to define a template before creating the combo box. It didn't however state that you need to say which field is displayed.


var combo = new Ext.XTemplate(
'<tpl for="."><div class="x-combo-list-item">{state}</div></tpl>'
);