Apex Code Development You need to sign in to do that
Don't have an account?
1986anuj How to use extjs with visualforce
Hi,
I have created a small vf page with extJs included.Its not giving any error but its not working,i cannot see anything on page.
Here is the code i have written.Please let me know how will it work??
<link rel="Stylesheet" type="text/css" href="{!$Resource.ExtJs}/ext-2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="{!$Resource.ExtJs}/ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="{!$Resource.ExtJs}/ext-2.1/ext-all.js"></script>
<apex:page>
<!-- Begin Default Content REMOVE THIS -->
<h1>Congratulations</h1>
This is your new Page
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
}
});
});
</script>
</apex:page>
I am using FF 3.0.5 too. I tried downloading the ExtJS files again and followed the same steps as you - and my code is still working. What is the file structure like within your static resource? Do you have another folder above ext-2.1 that you aren't accounting for in your reference? (Also, if you just zipped up the folder you'd have a top-level folder of 2.2.1)
Try this:
Take the files/folders inside the ext-2.2.1 folder you extracted from the ExtJS site and then zip all of the files except for the examples/docs into a file called ExtJS.zip and upload this into your static resource. Then change your resouce refernces to omit ext-2.1.
So the refences would look like:
<link rel="Stylesheet" type="text/css" href="{!$Resource.ExtJS}/resources/css/ext-all.css" />
<script type="text/javascript" src="{!$Resource.ExtJS}/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="{!$Resource.ExtJS}/ext-all.js"></script>
The only thing I can think of is that you've got some kind of problem with the references to your resources.
-- Matt
All Answers
That code should work - I tested it out and it was working for me. You should drop your included resources inside of the page tags, that's how I set my page up (and the IDE wouldn't let me save otherwise). Not sure if that would be causing your issue.
-- Matt
Hi Matt,
I dont know how its working for you.
I am writing the steps i did for doing extjs example, please let me know where i am doing wrong
1. Downloaded extjs2.2.1.zip from ExtJs Website.
2. Unzipped,removed docs and examples folder and again rezipped.
3. Uploaded the zip as a static resource.
4. Created VF page with posted code.
thank you,
Anuj
Here is the code I used and it worked for me:
<apex:page >
<link rel="Stylesheet" type="text/css" href="{!$Resource.ExtJS}/resources/css/ext-all.css" />
<script type="text/javascript" src="{!$Resource.ExtJS}/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="{!$Resource.ExtJS}/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.show({
title: 'Milton',
msg: 'Have you seen my stapler?',
buttons: {
yes: true,
no: true,
cancel: true
}
});
});
</script>
</apex:page>
Try downloading the Ext JS file again from the website, don't delete anything, zip it up and upload it to your static resource (just to be sure you didn't inadvertently delete something important) then use with the above code. Be sure to change the references to the ExtJS resource in my code. Also, what browser are you using?
-- Matt
Hi Matt,
i am using mozilla 3.0.5.
I have pasted your code also with change is resource link, still the code is not giving any error but i cannot see anything on page.
Actually the downloaded zip file is larger then 5 mb and as salesforce allows max of 5mb uploading for static resources, i have deleted those folders and zipped again.
In which browse you have tried?
thanks,
Anuj
I am using FF 3.0.5 too. I tried downloading the ExtJS files again and followed the same steps as you - and my code is still working. What is the file structure like within your static resource? Do you have another folder above ext-2.1 that you aren't accounting for in your reference? (Also, if you just zipped up the folder you'd have a top-level folder of 2.2.1)
Try this:
Take the files/folders inside the ext-2.2.1 folder you extracted from the ExtJS site and then zip all of the files except for the examples/docs into a file called ExtJS.zip and upload this into your static resource. Then change your resouce refernces to omit ext-2.1.
So the refences would look like:
<link rel="Stylesheet" type="text/css" href="{!$Resource.ExtJS}/resources/css/ext-all.css" />
<script type="text/javascript" src="{!$Resource.ExtJS}/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="{!$Resource.ExtJS}/ext-all.js"></script>
The only thing I can think of is that you've got some kind of problem with the references to your resources.
-- Matt
Yessssssssss Got it Matt !!!!
Thank You So Much...i was doing that stupidity in zipping the folder !!!!!
Its working fine now !!!!!!!
Thanks Again !!!!
-- Anuj
Glad to help. Good luck with Ext JS - it provides a lot of nice functionality to enhance VF apps.
-- Matt
Yes Matt, thanks !!!
Also do you know whether salesforce provides any extJs+vf documentation where i can refer to???
can i use the code {!$User.FirstName} inside script code????
ALso, please let me know if you have any link for any document on ExtJS + VF
thanks,
Anuj
install fire bug in you firefox broswer, it will hekp you to find out problem irrespective of error in code.
its a very good plugin to work with ext js