eclipse+spket+Extjs4.2.1開發環境搭建

時間  2019-11-06
標籤 eclipse+spket+extjs4.2.1 eclipse spket extjs 開發環境 搭建 欄目 Eclipse 简体版
原文   原文鏈接

1、開發工具配置

       1、http://www.eclipse.org/downloads/下載Eclipse，解壓。

        2、http://spket.com/download.html下載Plugin，解壓後覆蓋到Eclipse的目錄。

       三、啓動Eclipse，選擇window→proference→spket→javascriptprofiles→new  (輸入Ext JS4.2.1)




    四、Add libary(選擇ExtJS)。




        5、Add file(選擇ext-all-dev.js)，注意整個路徑不能出現中文。




    六、選中Ext JS 4.2.1，設置默認。




        7、將 js默認打開方式設爲  spket。(若是不成功，請重複檢查上面的步驟，重點檢查第6步，設置默認成功以後字體明顯變黑)




        8、重啓Eclipse。

        9、新建javascript文件，輸入Ext+. 則會出現自動提示


若是沒有出現自動提示則右擊你的JS文件,有個Open with - 選擇spket JavaScript Editor。 若是仍舊沒有出現提示則能夠經過在項目文件上點擊右鍵,選擇「Reload Javascript Profiles」菜單，對javascript文件從新加載。javascript


 2、ExtJS開發環境搭建：

       (1)  下載Ext開發包,下載地址：http://extjs.org.cn/

    

        (2)  將Ext開發包copy到eclipse項目的/WebRoot目錄下

             注意：不須要整個Ext開發包所有導入，這樣很容易形成eclipse卡死，由於eclipse會自動檢測js的合法性，會佔用大量的檢測時間、cpu和內存。一般普通的開發只須要用到\extjs-4.2.1\resources文件包、\extjs-4.2.1\ext-all.js這兩個資源就能夠,須要中文化再導入\extjs-4.2.1\locale\ext-lang-zh_CN.js  就能夠了


 

        (3) 在web頁面中經過<script>標籤引入ext的庫文件。(注意引入順序)

            Extjs4.0開始比以往有些變化，用起來麻煩不小。與之前的引入三個文件不一樣，如今的4.0只要引用兩個文件就好了。    css

[javascript] view plaincopyprint?在CODE上查看代碼片派生到個人代碼片html

  1. <link rel="stylesheet" type="text/css" href="extjs-4.2.1/resources/css/ext-all.css">  // 引入樣式文件  java

  2. <script type="text/javascript" src="extjs-4.2.1/bootstrap.js" ></script>    web

  3. <script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>   //  中文化  bootstrap


    (4) 調用Ext.onReady()初始化組件

       <script>
           Ext.onReady(function(){
            …///在這裏面建立及使用ext控件
            });
        </script>
eclipse


 

3、hello word 實例


hellowrod.js

[javascript] view plaincopyprint?在CODE上查看代碼片派生到個人代碼片工具

  1. (function()  開發工具

  2.     {  字體

  3.      Ext.onReady(function()  

  4.      {  

  5.         Ext.Msg.alert("hello wrod!");  // 彈出hellowrod對話框 （實例化組 件）                                                                                 }                                                                                                                                                                                                                                                                                                                 }) ();   

                                                            
html代碼

 [html] view plaincopyprint?在CODE上查看代碼片派生到個人代碼片

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  

  2. <html>  

  3. <head>  

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

  5. <title>Insert title here</title>  

  6.   

  7.   

  8. <link rel="stylesheet"  type="text/css" href="./css/test.css">  

  9. <link rel="stylesheet"  type="text/css" href="./js/ext-4.2.1-gpl/resources/css/ext-all.css">//資源樣式文件  

  10. <script type="text/javascript" src="./js/ext-4.2.1-gpl/bootstrap.js"></script>  

  11. <script type="text/javascript" src="./js/ext-4.2.1-gpl/locale/ext-lang-zh_CN.js"></script>//中文化  

  12. <script type="text/javascript" src="./js/helloword.js"></script>  

  13. </head>  

  14. <body>  

  15. </body>  

  16. </html>  

[javascript] view plaincopyprint?在CODE上查看代碼片派生到個人代碼片

  1. <pre code_snippet_id="170450" snippet_file_name="blog_20140125_1_6261797"></pre>  

  2. <pre></pre>  

  3. <pre></pre>  

  4. <pre></pre> 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程