初學(xué)JavaScript_03(ExtJs Grid的簡單使用)
更新時間：2008年10月02日 00:49:41 作者：
Ext JS Grid的簡單使用:(從土豆的文檔中學(xué)到)
<html>
<head>
<title>Ext中的Grid例子</title>
<link rel="stylesheet" type="text/css"
href="../AllRes/resources/css/ext-all.css"/>
<script type="text/javascript" src="../AllRes/adapter/ext/ext-
base.js"></script>
<script type="text/javascript" src="../AllRes/ext-all.js"></script>
<script>
//ID排序
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id',sortable:true},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]) ;
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name3','descn5']
] ;
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
}) ;
ds.load() ;
var grid = new Ext.grid.GridPanel({
el:'grid',
ds: ds,
cm: cm
}) ;
grid.render() ;
}) ;
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
<head>
<title>Ext中的Grid例子</title>
<link rel="stylesheet" type="text/css"
href="../AllRes/resources/css/ext-all.css"/>
<script type="text/javascript" src="../AllRes/adapter/ext/ext-
base.js"></script>
<script type="text/javascript" src="../AllRes/ext-all.js"></script>
<script>
//ID排序
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id',sortable:true},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]) ;
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name3','descn5']
] ;
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
}) ;
ds.load() ;
var grid = new Ext.grid.GridPanel({
el:'grid',
ds: ds,
cm: cm
}) ;
grid.render() ;
}) ;
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
您可能感興趣的文章:
- JS常見疑難點分析之match，charAt，charCodeAt，map，search用法分析
- Javascript技術(shù)難點之a(chǎn)pply，call與this之間的銜接
- javascript下數(shù)值型比較難點說明
- 初學(xué)js 新節(jié)點的創(chuàng)建 刪除 的步驟
- 初學(xué)js者對javascript面向?qū)ο蟮恼J(rèn)識分析
- 國外的為初學(xué)者寫的JavaScript教程
- 走出JavaScript初學(xué)困境—js初學(xué)
- 初學(xué)JavaScript第一章
- JavaScript初學(xué)者的10個迷你技巧
- 你有必要知道的10個JavaScript難點
相關(guān)文章
如何遍歷對象的屬性?...2006-09-09
在使用操作XML文件時,我們可以使用Load方法直接加載xml文件即可，在ie和ff下通用。2008-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)類似微信點擊語音播放效果，不會互相干擾播放狀態(tài)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
javascript中不提供sleep功能如何實現(xiàn)這個功能
javascript中不提供sleep功能，而我們時長會用到這個功能，下面與大家分享個不錯的解決方法，而且在不同的機(jī)器上的執(zhí)行速度是一致的2014-05-05
Javascript實現(xiàn)跨域后臺設(shè)置攔截的方法詳解
這篇文章主要給大家介紹了關(guān)于Javascript實現(xiàn)跨域后臺設(shè)置攔截的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
javascript Slip.js實現(xiàn)整屏滑動的手機(jī)網(wǎng)頁
Slip.js能做什么？Slip.js可以讓你的手機(jī)網(wǎng)站像原生手機(jī)軟件一樣慣性滾動，手觸圖片輪換等等，對Slip.js感興趣的小伙伴們可以參考一下2015-11-11
給所有的超級練級都加上onmousemove時間的js代碼...2007-08-08
這篇文章主要介紹了按鈕接受回車事件的三種實現(xiàn)方法,需要的朋友可以參考下2014-06-06
JS封裝的三級聯(lián)動菜單(使用時只需要一行js代碼)
在實際的項目開發(fā)中，我們經(jīng)常需要三級聯(lián)動，比如省市區(qū)的選擇，商品的三級分類的選擇等等。這篇文章主要介紹了JS封裝的三級聯(lián)動菜單(使用時只需要一行js代碼)的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序左右滑動的實現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-12-12