[ExtJS]範例Tree元件的使用Ext.tree.TreePanel

ExtJS的TreePanel樹是繼承Ext.Panel,所以它可以算是一個Container,不過它也是算是一個ExtJS的Component,給於TreeNode來完成樹狀結果,可以應用在選單或是分類等地方。像是下圖

ExtJSTree3.png

左邊圖是設定rootVisible : false,而右邊圖是設定rootVisible : true,根結點是否顯示

ExtJSTree1.pngExtJSTree2.png

相關資料

ExtJS的API

ExtJS的下載點

ExtJS官網

ExtJS Example

更多內容 [ExtJS]範例Tree元件的使用Ext.tree.TreePanel

[jsp]利用Google Map查詢經緯度

如果手上有一堆地址清單想要知道它們的經緯度如何?要怎麼做呢?這裡介紹一個很簡單的方法,利用二個Ajax及Google Map就可以完成,一個要求地址欄位及key值(這其實可以直接全都先輸出成javascript的Array就好了),另一個接收到經緯度資料後回傳給Server做儲存(這也可以直接利用一個TextArea存放,到時再複製起來存放),而Google Map最主要的功能就是把地址轉換成經緯度。

GoogleMap3.png

做法及想法如下:

1.建立資料庫Table

需要有一個pk值、地址、經度、緯度及一個記錄是否已取得成功的註記符號,MySQL語法如下:

ps.先建立幾筆資料做測試,如下insert

更多內容 [jsp]利用Google Map查詢經緯度

prototype Ajax回傳json物件的處理

一般人在設計ajax成功回傳事件時,有幾種方式來處理回傳的資料,一種是純文字或html code,一種是xml格式那另一種就是json格式,json格式不像xml需要成對的tag,所以在回傳資料長度上會顯的短很快,如果整個網站都大量使用ajax方法的話,選擇json是一個很好的方法。

ajaxjson2.png

json的相關資訊可以在這裡看到:JSON in JavaScript

prototype這個framework本身就有支援To JSON的方法,有二種格式可以轉換成json,一種是javascript的class,另一種就是純文字了,不過純文字的內容要為json格式才能被轉換,如下:

更多內容 prototype Ajax回傳json物件的處理

[Javascript]AutoComplete自動完成效果

之前為了做這AutoComplete效果找了好多資料,不過大都是jQuery的,當然不是不好用,只是在一個頁面載入prototypejQeruy就會有些衝突的問題要解決

效果大概會像下面這樣子

AutoComplete1.png

更多內容 [Javascript]AutoComplete自動完成效果

[jsp小技巧]利用Throw Exception來完成Ajax

一般在寫Ajax時,最直覺的使用方法就是利用Ajax Object來要求Server給與回應,

再依回應的內容解西倒底是完成動作?還是有錯誤產生,如必填欄位未填。

這裡介紹一個小技巧,在編譯式的網頁伺服器語言可能比較合適使用。

大概的原理是利用程式在執行有錯誤時Throw Exception來當做錯誤訊息,

回傳給client,而client只要接收到503的錯誤,則就可以知道動作並未完成,

反之則是完成。

範例使用prototype來使用Ajax,傳送及回應,有需要可以參考:

Ajax 使用prototype.js 1

以下是載行結果,當有填值時,則回應填寫的值,

沒填值的時候就回傳錯誤訊息。(Exception)

1

2

更多內容 [jsp小技巧]利用Throw Exception來完成Ajax