初學(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)文章
初學(xué)JavaScript_03(ExtJs Grid的簡(jiǎn)單使用)
Ext JS Grid的簡(jiǎn)單使用:(從土豆的文檔中學(xué)到)2008-10-10
js獲取時(shí)間函數(shù)及擴(kuò)展函數(shù)的方法
下面小編就為大家?guī)硪黄猨s獲取時(shí)間函數(shù)及擴(kuò)展函數(shù)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了RequireJS多頁面應(yīng)用實(shí)例分析的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
IE和Firefox下javascript的兼容寫法小結(jié)
學(xué)習(xí)js的朋友必須要知道或了解的知識(shí)2008-12-12
下面小編就為大家?guī)硪黄獪\談js中test()函數(shù)在正則中的使用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
javascript 實(shí)現(xiàn)的完全兼容鼠標(biāo)滾軸縮放圖片的代碼
以前看到的都是用IE的zoom，所以非IE就不支持，昨天看到這個(gè)js中鼠標(biāo)滾輪事件詳解 ，于是完全兼容（IE6-8,FF,Chrome,Opera,Safari）的鼠標(biāo)滾軸縮放圖片效果今天就誕生了2010-02-02
這篇文章主要介紹了JS替換字符串中 方法，非常的簡(jiǎn)單實(shí)用，附上各種示例代碼，有需要的小伙伴可以參考下。2015-04-04
在Angular中，最好在一個(gè)頂級(jí)模塊中加載和配置路由，它專注于路由功能，然后由根模塊AppModule導(dǎo)入它，最后還有初始化并監(jiān)聽瀏覽器的地址變化2023-01-01
javascript基本數(shù)據(jù)類型和轉(zhuǎn)換
本文主要介紹了javascript的基本數(shù)據(jù)類型和轉(zhuǎn)換，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
JavaScript實(shí)現(xiàn)流星雨效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)簡(jiǎn)易的流星雨的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06