初學(xué)JavaScript_03(ExtJs Grid的簡(jiǎn)單使用)
更新時(shí)間:2008年10月02日 00:49:41 作者:
Ext JS Grid的簡(jiǎn)單使用:(從土豆的文檔中學(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:'編號(hào)',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:'編號(hào)',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常見疑難點(diǎn)分析之match,charAt,charCodeAt,map,search用法分析
- Javascript技術(shù)難點(diǎn)之a(chǎn)pply,call與this之間的銜接
- javascript下數(shù)值型比較難點(diǎn)說明
- 初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
- 初學(xué)js者對(duì)javascript面向?qū)ο蟮恼J(rèn)識(shí)分析
- 國(guó)外的為初學(xué)者寫的JavaScript教程
- 走出JavaScript初學(xué)困境—js初學(xué)
- 初學(xué)JavaScript第一章
- JavaScript初學(xué)者的10個(gè)迷你技巧
- 你有必要知道的10個(gè)JavaScript難點(diǎn)
相關(guān)文章
微信小程序?qū)崿F(xiàn)類似微信點(diǎn)擊語(yǔ)音播放效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)類似微信點(diǎn)擊語(yǔ)音播放效果,不會(huì)互相干擾播放狀態(tài),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07javascript中不提供sleep功能如何實(shí)現(xiàn)這個(gè)功能
javascript中不提供sleep功能,而我們時(shí)長(zhǎng)會(huì)用到這個(gè)功能,下面與大家分享個(gè)不錯(cuò)的解決方法,而且在不同的機(jī)器上的執(zhí)行速度是一致的2014-05-05Javascript實(shí)現(xiàn)跨域后臺(tái)設(shè)置攔截的方法詳解
這篇文章主要給大家介紹了關(guān)于Javascript實(shí)現(xiàn)跨域后臺(tái)設(shè)置攔截的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08javascript Slip.js實(shí)現(xiàn)整屏滑動(dòng)的手機(jī)網(wǎng)頁(yè)
Slip.js能做什么?Slip.js可以讓你的手機(jī)網(wǎng)站像原生手機(jī)軟件一樣慣性滾動(dòng),手觸圖片輪換等等,對(duì)Slip.js感興趣的小伙伴們可以參考一下2015-11-11給所有的超級(jí)練級(jí)都加上onmousemove時(shí)間的js代碼
給所有的超級(jí)練級(jí)都加上onmousemove時(shí)間的js代碼...2007-08-08JS封裝的三級(jí)聯(lián)動(dòng)菜單(使用時(shí)只需要一行js代碼)
在實(shí)際的項(xiàng)目開發(fā)中,我們經(jīng)常需要三級(jí)聯(lián)動(dòng),比如省市區(qū)的選擇,商品的三級(jí)分類的選擇等等。這篇文章主要介紹了JS封裝的三級(jí)聯(lián)動(dòng)菜單(使用時(shí)只需要一行js代碼)的相關(guān)資料,需要的朋友可以參考下2016-10-10微信小程序左右滑動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序左右滑動(dòng)的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12