ajax架構—- ExtJS

一、概述：

       ExtJS是一個很不錯的Ajax架構，可以用來開發帶有華麗外觀的富用戶端應用，使得我們的b/s應用更加具有活力及生命力。ExtJS是一個用javascript編寫，與後台技術無關的前端ajax架構。因此，可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。要使用ExtJS，那麼首先要得到ExtJS庫檔案，該架構是一個開源的，可以直接從官方網站下載，網址：http://extjs.com/products/extjs/download.php

二、使用extjs顯示表格

    1、將下載下來的程式碼封裝，放在你的項目中，然後在頁面中引用兩個js檔案和一個樣式檔案

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script>

 

2、編寫事件代碼：

<script>
function showUrl(value)

{

return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";

}

Ext.onReady(function(){ 

var data=[ [1,  'QQ空間','user.qzone.qq.com/394403011'],

[2,  '部落格園','zhuqil.cnblogs.com/'], 

[3,  '百度貼吧','tieba.baidu.com/f?kw=%BC%C6%BF%C605104%B0%E0'],

[4,  '湖南文理學院','www.huas.cn'] ]

var store=new Ext.data.SimpleStore({data:data,fields:["id","name","homepage"]});

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"麒麟",

height:150,

width:600, 

columns:[{header:"簡稱",dataIndex:"name",sortable:true},

{header:"網址",dataIndex:"homepage",renderer:showUrl,sortable:true}],

store:store,

autoExpandColumn:1

}); 

});
</script>

上面js有兩個函數，第一個是返回一個地址，第二個函數一般情況下每一個使用者的ExtJS應用都是從Ext.onReady開始的，相當與main（）函數，在這個函數中，我們 在第一行“var data=…”用來定義表格中要顯示的資料，這是一個[][]二維數組；第二行“var store=…”用來建立一個資料存放區，這是GridPanel需要使用配置屬性，資料存放區器Store負責把各種各樣的資料（如二維數組、JSon對象數組、xml文本）等轉換成ExtJS的資料記錄集Record，關於資料存放區器Store我們將在下一章中作專門介紹。第三行“var grid = new Ext.grid.GridPanel(…)”負責建立一個表格，表格包含的列由columns配置屬性來描述，columns是一數組，每一行資料元素描述表格的一列資訊，表格的列資訊包含列頭顯示文本(header)、列對應的記錄集欄位(dataIndex)、列是否可排序(sorable)、列的渲染函數(renderer)、寬度(width)、格式化資訊(format)等，在上面的列子中只用到了header及dataIndex。用sortable:true表示此列可以排序，用renderer:showUrl指向第一個函數，返回一個http的地址.

3、效果

 

三、總結：

通過使用extjs架構大大提高了我們web開發的效率，它是一個ajax架構，在使用ajax調用伺服器十分方便。非常值得學習。

   附：代碼+Extjs包：http://files.cnblogs.com/zhuqil/ExtJS.rar