當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ext2.0的EditorGridPanel

發布時間：2024/8/1 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ext2.0的EditorGridPanel 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文的代碼將演示一個可編輯的表格控件：

<html><head>
<link?rel="stylesheet"?type="text/css"?href="ext/resources/css/ext-all.css"?/>
<script?type="text/javascript"?src="ext/ext-base.js"></script>
<script?type="text/javascript"?src="ext/ext-all.js"></script>
<script?type="text/javascript"?src="ext/ext-lang-zh_CN.js"></script>
<title></title>
</head>
<script>
Ext.onReady(function(){
????//ComboBox的數據
????var?sex?=?[['male','male'],
????????['female','female']];
????var?sexStore?=?new?Ext.data.SimpleStore({
????????????fields:?['sexNm',?'sex'],
????????????data?:?sex
????????});?
????????
????var?sm?=?new?Ext.grid.CheckboxSelectionModel();
????//表格的表頭定義
????var?cm?=?new?Ext.grid.ColumnModel([
????????new?Ext.grid.RowNumberer(),
????????sm,
????????{header:'編號',dataIndex:'id'},
????????{header:'性別',dataIndex:'sex',editor:?new?Ext.form.ComboBox({//該列的數據由ComboBox修改
????????????store:?sexStore,
????????????displayField:'sexNm',
????????????valueField:?'sex',
????????????typeAhead:?true,
????????????editable:false,
????????????forceSelection:true,
????????????mode:?'local',
????????????triggerAction:?'all',
????????????emptyText:'Select?a?sex...',
????????????selectOnFocus:true,
????????????lazyInit:false
????????})
????????},
????????{header:'名稱',dataIndex:'name'},
????????{header:'描述',dataIndex:'descn',editor:?new?Ext.form.TextField({?//該列數據由TextField修改
????????????????allowBlank:?true,?
????????????????maxLength:?50?
????????????})
????????}
????]);
????cm.defaultSortable?=?true;
????
????var?data?=?[
????????['1','male','name1','descn1'],
????????['2','male','name1','descn2'],
????????['3','fmale','name3','descn3'],
????????['4','male','name4','descn4'],
????????['5','fmale','name5','descn5']
????];
????var?ds?=?new?Ext.data.Store({
????????proxy:?new?Ext.data.MemoryProxy(data),
????????reader:?new?Ext.data.ArrayReader({},?[
????????????{name:?'id',mapping:?0},
????????????{name:?'sex',mapping:?1},
????????????{name:?'name',mapping:?2},
????????????{name:?'descn',mapping:?3}
????????])
????});
????ds.load();
????
????var?grid?=?new?Ext.grid.EditorGridPanel({
????????el:?'grid3',
????????ds:?ds,
????????cm:?cm,
????????sm:?sm,
????????title:?'HelloWorld',
????????autoHeight:true,
????????selModel:?new?Ext.grid.RowSelectionModel({singleSelect:true}),
????????tbar:?new?Ext.Toolbar({?
????????items:[?
????????????????{?
????????????????????id:'buttonA'?
????????????????????,text:"Button?A"?
????????????????????,handler:?function(){?alert("You?clicked?Button?A");?}?
????????????????}?
????????????????,
????????????????new?Ext.Toolbar.SplitButton({})
????????????????,{?
????????????????????id:'buttonB'?
????????????????????,text:"Button?B"?
????????????????????,handler:?function(){?alert("You?clicked?Button?B");?}?
????????????????}?
????????????????,
????????????????'-'
????????????????,{
????????????????????id:'buttonc'?
????????????????????,text:"Button?c"
????????????????}
????????????]?
????????})?
????});
????
????grid.render();
????//表格的事件綁定
????grid.addListener('afteredit',afteredit);
????function?afteredit(e)
????{
????????Ext.MessageBox.alert("afteredit",e.value);
????}
????//將表格在一個新Panel中放置
????var?panel?=?new?Ext.Panel({
????????renderTo:?'grid-panel',
????????title:'panel',
????????collapsible:true,
????????width:450,
????????height:400,
????????items:[grid]
????});
})
</script>
<body>
<div?id='grid3'></div>
<div?id='grid-panel'></div>
</body>
</html>

總結

以上是生活随笔為你收集整理的Ext2.0的EditorGridPanel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

EditorGridPanel

上一篇： Java实现QQ、微信、新浪微博第三方登
下一篇： extjs的Ext.grid.Edito