PDA

View Full Version : Problem while setting up EXT JS for use



vkjk89
20 Dec 2011, 12:09 AM
Hi All,
I am a newbie in the area of EXT JS.
I am still learning this amazing library.
I need a help here.
When i set up the ext js environment by including below standard EXT JS libraries and run a sample example , i get errors in web console as below( even page is not displayed correctly)

I included below :
<link rel="stylesheet" type="text/css" href="http://localhost/lib/ext/resources/css/ext-all.css" />
<script src="http://localhost/lib/ext/ext-all-debug.js"></script>

and error :-

[13:31:05.230] GET http://localhost/ext/index.html [HTTP/1.1 304 Not Modified 0ms]
[13:31:05.258] Ext.EventManager._unload is not a function @ http://localhost/lib/ext/adapter/ext-base-debug.js:1746
[13:31:05.271] GET http://localhost/lib/ext/resources/css/ext-all.css [HTTP/1.1 304 Not Modified 0ms]
[13:31:05.277] GET http://localhost/lib/ext/adapter/ext-base-debug.js [HTTP/1.1 304 Not Modified 0ms]
[13:31:05.282] GET http://localhost/lib/ext/ext-all-debug.js [HTTP/1.1 304 Not Modified 0ms]
[13:31:05.383] Unknown property 'box-sizing'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.385] Unknown property 'zoom'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.388] Error in parsing value for 'filter'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.400] Unknown property 'user-select'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.402] Error in parsing value for 'cursor'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.406] Expected declaration but found '*'. Skipped to next declaration. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.415] Error in parsing value for 'background-image'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.573] Unknown property '-moz-outline'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.619] Expected color but found 'null'. Error in parsing value for 'color'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.724] Expected color but found 'null'. Error in parsing value for 'border-bottom-color'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.790] Error in parsing value for '-moz-border-radius-bottomleft'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.792] Error in parsing value for 'border-bottom-left-radius'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.795] Error in parsing value for '-moz-border-radius-bottomright'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.798] Error in parsing value for 'border-bottom-right-radius'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.800] Error in parsing value for '-moz-border-radius-topleft'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.803] Error in parsing value for 'border-top-left-radius'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.811] Error in parsing value for '-moz-border-radius-topright'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:05.814] Error in parsing value for 'border-top-right-radius'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:06.029] Unknown property 'behavior'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:06.055] Expected color but found 'invert'. Error in parsing value for 'outline'. Declaration dropped. @ http://localhost/lib/ext/resources/css/ext-all.css:1
[13:31:06.745] Error in parsing value for 'background-image'. Declaration dropped. @ http://localhost/ext/index.html
[13:31:06.757] GET http://localhost/lib/ext/resources/themes/images/default/tools/tool-sprites.gif [HTTP/1.1 304 Not Modified 16ms]
[13:31:06.816] GET http://localhost/lib/ext/resources/themes/images/default/form/text-bg.gif [HTTP/1.1 304 Not Modified 0ms]

skirtle
20 Dec 2011, 2:04 AM
Any reason why you're learning ExtJS 3 rather than the latest version?

I don't see any significant errors in that output, only the EventManager one is even slightly worrying. I don't think anything there explains why you aren't seeing anything on the page.

Could you provide more information about what you're actually doing?

vkjk89
20 Dec 2011, 3:28 AM
Hi Skirtle,
Thanks for the prompt reply.
I am using EXT-4.Any reason you pointed out EXT-3 ?
I included 2 files in my html page.(ext/resources/css/ext-all.css and ext-all-debug.js).
But when i tried to use any widget , its not being rendered correctly ( with errors in web console which i pasted earlier)
One other thing :-
When i unzipped the SDK of EXT4 , i didn't find adapter folder in it.
If i am not using any other js library such as jquery etc , do i need it ?

Thanks

skirtle
20 Dec 2011, 3:27 PM
I'm not sure which web console you're using but I think it's misleading you. Try Firebug or the Chrome Developer Tools.

The CSS warnings you're getting can all be ignored. The ExtJS CSS uses browser-specific rules to overcome some issues and other browsers will report such rules as invalid. It won't stop the page behaving correctly.

These lines are quite interesting:


[13:31:05.230] GET http://localhost/ext/index.html [HTTP/1.1 304 Not Modified 0ms]
[13:31:05.258] Ext.EventManager._unload is not a function @ http://localhost/lib/ext/adapter/ext-base-debug.js:1746
[13:31:05.271] GET http://localhost/lib/ext/resources/css/ext-all.css [HTTP/1.1 304 Not Modified 0ms]
[13:31:05.277] GET http://localhost/lib/ext/adapter/ext-base-debug.js [HTTP/1.1 304 Not Modified 0ms]
[13:31:05.282] GET http://localhost/lib/ext/ext-all-debug.js [HTTP/1.1 304 Not Modified 0ms]

They clearly show that you are using ExtJS 3 (or an earlier version). As you pointed out, the adapters no longer exist in ExtJS 4 yet there is a request logged for an adapter that succeeds. There's also a JS error thrown in that file, further reinforcing that you aren't using ExtJS 4.

I don't know what's going on but you definitely aren't doing what you think you're doing. You claim to have included just 2 files (1 CSS, 1 JS) yet the logging shows 2 JS files being loaded. I can only assume that you're either looking at the wrong HTML file or that you've got a caching problem. Trying going to 'View source' on the page to confirm.

To answer your question, the adapters are no longer required, irrespective of whether you're using another library such as jQuery.

vkjk89
20 Dec 2011, 8:55 PM
Thanks skirtle,
As you pointed out , i have included 2 JS and 1 CSS , the one extra JS file is adapter file.I thought extjs adapter file ( in adapter directory) is not mandatory and hence i didn't mention it in the post.My apologies for the confusion caused due to this . :(

Also i am using firefox built in web console. Should i not use it ? and change to something else ?

I am still trying to figure out why the widgets are not being rendered correctly if all the CSS warnings which i pasted earlier could be ignored.

skirtle
20 Dec 2011, 9:10 PM
If you're using Firefox then install Firebug. Chrome also comes with an excellent set of debugging tools.

This still doesn't make sense:


As you pointed out , i have included 2 JS and 1 CSS , the one extra JS file is adapter file.I thought extjs adapter file ( in adapter directory) is not mandatory and hence i didn't mention it in the post.

In ExtJS 4 this file does not exist. How can you be including it if it doesn't exist? If it's the adapter file taken from ExtJS 3 then it'll just break everything, remove it.

You mention that you're trying to run a 'sample example'. What example exactly? You need to make sure whatever example you're using is written for ExtJS 4.

The ExtJS 4 zip you downloaded includes a number of examples. You may want to take a look at the code for some of them to see the correct way to include the library.