iT邦幫忙

0

ExtJS 程式語言問題

extjs
jason1418 2009-09-26 00:12:17 ‧ 10919 瀏覽

  • 分享至 

  • xImage

小弟最近在玩ExtJS這套網頁語言
從基本的Hello World開始
都還滿成功的

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></script>
<script>
	Ext.onReady(function(){Ext.MessageBox.alert('helloworld','Hello World.');});
</script>


到了第二個階段panel

<HTML>
<BODY>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script>
	Ext.onReady(function(){
		var panel = new Ext.Panel({
		el:'test',
        	title:'panel_hello',
        	shadow:true,
		draggable:true,
		collapsible:true,
		html:'test content',
        	width:200,
        	height:200
    	});
    	panel.render("hello");
   
});	
</script>
</BODY>
</HTML>

結果就跑不出任何東西了
不知道有沒有人知道這問題在哪裡?

登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

20
fillano
iT邦超人 1 級 ‧ 2009-09-26 10:10:44
最佳解答

http://www.extjs.com/deploy/dev/examples/panel/panels.html

仔細看一下網頁的原始碼跟程式。你沒有告訴他要renderTo哪裡，哪怎麼畫得出來？

看更多先前的回應...收起先前的回應...
jason1418 iT邦新手 5 級 ‧ 2009-09-26 11:11:28 檢舉

所以我因該要在
Ext.onReady(function(){
var panel = new Ext.Panel({
el:'test',
title:'panel_hello',
shadow:true,
draggable:true,
collapsible:true,
html:'test content',
width:200,
height:200
});
panel.render("hello");
裡面補上這一行?
renderTo: 'panel-basic',

fillano iT邦超人 1 級 ‧ 2009-09-26 16:56:13 檢舉

我看了一下api文件，Panel並沒有'el'這個property耶？拿掉以後稍微修改一下應該就會動了。

另外，指定renderTo屬性，跟使用render方法是一樣意思，所以你在body裡面必須有一個id是hello的元素，你上述程式才會動。

還有，link跟script應該移到body前面比較好，通常會放在head裡面的。另外，你似乎還多了一個ext-all.js？

jamesjan iT邦高手 1 級 ‧ 2009-09-27 11:35:19 檢舉

fillano 大回答的已經很完整了, 我就不再贅述了
extjs 的寫法其實蠻直覺的(目前 release 已經到 3.0 版)
API 的文件要好好看一下 尤其是 Configuration 的部分
還有他的 sample
另外他的 forum 也可以挖到很多寶

中文的部分,大陸有一些人在研究,可以 google 一下

lanechang iT邦新手 5 級 ‧ 2009-09-27 20:11:51 檢舉

在內要放一個el供render使用..
例如: <div id="hello"></div>
render作用是將Panel塞到<div id="hello"></div>內
另外還有一個apply則是作取代使用..

lanechang iT邦新手 5 級 ‧ 2009-09-27 21:29:41 檢舉

<HTML>
<BODY>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script>
Ext.onReady(function(){
var panel = new Ext.Panel({
el:'test',
title:'panel_hello',
shadow:true,
draggable:true,
collapsible:true,
html:'test content',
width:200,
height:200
});
panel.render("hello");

});
</script>
</BODY>
</HTML>

lanechang iT邦新手 5 級 ‧ 2009-09-27 21:34:22 檢舉

上面那段還不小心按到Enter.. Render使用方法..
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script>
Ext.onReady(function(){
var panel = new Ext.Panel({
el:'test',
title:'panel_hello',
html:'test content',
width:200,
height:200
});
panel.render();
});
</script>
</HEAD>
<BODY>
<div id="test"></div>
</BODY>
</HTML>

也可以寫成
Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo:'test',
title:'panel_hello',
html:'test content',
width:200,
height:200
});
});

fillano iT邦超人 1 級 ‧ 2009-09-28 09:45:43 檢舉

回應比主文詳細耶... lanechang 大你要不要直接回答阿？

登入發表回應
6
lanechang
iT邦新手 5 級 ‧ 2009-09-28 23:49:21 
&lt;pre class="c" name="code">
&lt;HTML> 
&lt;HEAD> 
&lt;link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
&lt;script type="text/javascript" src="../../adapter/ext/ext-base.js">&lt;/script> 
&lt;script type="text/javascript" src="../../ext-all.js">&lt;/script> 
&lt;script> 
  Ext.onReady(function(){ 
       var panel = new Ext.Panel({ 
                   el: 'test', 
                   title: 'panel_hello', 
                   html: 'test content', 
                   width: 200, 
                   height: 200 
       }); 
      
       panel.render(); 
  }); 
&lt;/script> 
&lt;/HEAD>
&lt;BODY>
&lt;div id="test">&lt;/div>
&lt;/BODY> 
&lt;/HTML>

也可以寫成...

&lt;pre class="c" name="code">
Ext.onReady(function(){ 
     var panel = new Ext.Panel({ 
             renderTo: 'test', 
             title: 'panel_hello', 
             html: 'test content', 
             width: 200, 
             height: 200 
     }); 
});

另外apply用法是直接將<div id="test"></div>取代
使用方式

&lt;pre class="c" name="code">
Ext.onReady(function(){ 
     var panel = new Ext.Panel({ 
            applyTo: 'test', 
            title: 'panel_hello', 
            html: 'test content', 
            width: 200, 
            height: 200 
     }); 
});
jason1418 iT邦新手 5 級 ‧ 2009-09-29 00:20:53 檢舉

大家真是抱歉...我才兩天沒空上來看，就這麼多熱心的邦友提供方法
小弟在這裡感謝大家
<div id="test"></div>這方法的確比較容易理解

最近在學ExtJS，總覺得很無助
想看一些別人完整的原始碼都看不到
主要都是po主文而已
使得我不知道自己錯在哪裡...
再來，看了一下ExtJS的example裡面的範例
也看不到完整的程式碼...
所以我就跑去買了本書(悅知文化 書名:EXTJS次世代AJAX解決方案 開發實戰)←紫色封面
裡面的範例，每試一個，就錯一個
是我太笨嗎><
所以如果有人知道哪裡有助於學習的教學網站，請不吝分享給小弟我知道

fillano iT邦超人 1 級 ‧ 2009-10-12 17:29:45 檢舉

原本以為你問題解決了...說實在的example裡面都有原始碼阿，點一下那些js檔就看到了，他還好心做成連結。

要精通的話，還是得多看他給的文件就是了，api的取名應該多少也能望文生義的。

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙