JS小練習(xí)代碼之二第2/2頁(yè)
更新時(shí)間：2008年10月12日 23:25:25 作者：
JS練習(xí)代碼
/************************** GridPanel **************************************/
var beginMyPanel = Ext.extend(Ext.grid.GridPanel,{
insertWin:new myWindow(),
constructor:function()
{
//this.insertWin = new myWindow() ;
var myData =
[
["th","91","非女","地球"],
["thtwin","92","男","地球"],
["thtwinj2ee","93","非女","地球"],
["thj2ee","94","男","地球"],
["thtwin","95","非女","地球"]
] ;
var myRecord = Ext.data.Record.create
(
["name","age","sex","addr"]
) ;
var myColumn = new Ext.grid.ColumnModel
(
[
{header:"姓名",dataIndex:"name"},
{header:"年齡",dataIndex:"age"},
{header:"性別",dataIndex:"sex"},
{header:"住址",dataIndex:"addr"}
]
) ;
var myStore = new Ext.data.Store
(
{
proxy:new Ext.data.MemoryProxy(myData),
reader:new Ext.data.ArrayReader
(
{},
myRecord
)
}
) ;
beginMyPanel.superclass.constructor.call
(
this,
{
title:"myGridPanel(thtwinj2ee)",
frame:true,
width:418,
height:250,
cm:myColumn,
ds:myStore,
style:"margin:20,0,10,250",
tbar:
[
{
text:"添加人員",
handler:function()
{
this.insertWin.show() ;
},
scope:this
},
"-",//得到的結(jié)果為:|
{text:"修改人員"},
"-",
{text:"刪除人員"}
],
selModel:new Ext.grid.RowSelectionModel
(
{
listeners:
{
"rowselect":
{
fn:function(row,index,record)
{
this.setTitle("修改之后的GridPanel的名字!") ;
//注意下面的這句 ***** 1 ******
this.fireEvent("rowselect",record) ;
},
scope:this
}
}
}
),
renderTo:Ext.getBody()
}
) ;
myStore.load() ;
//注意下面這句 ***** 2 ******
this.addEvents("rowselect") ;
this.insertWin.on("submit",this.onInsertWinSubmit,this) ;
},
insert:function(myRecord)
{
this.getStore().add(myRecord) ;
},
onInsertWinSubmit:function(insertWin,myRecord)
{
this.insert(myRecord) ;
}
}) ;
</script>
3.靜態(tài)html頁(yè)面的表現(xiàn)
<html>
<head>
<title></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 type="text/javascript" src="beginPanel.js"></script>
<script type="text/javascript" src="beginFormPanel.js"></script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init() ;
Ext.form.Field.prototype.msgTarget="side" ;
Ext.apply(Ext.form.VTypes,{
"age":function(value)
{
//此處用正則表達(dá)式要使
if(/^\d+$/.test(value))
{
return true ;
}
return false ;
},
"ageText":"請(qǐng)輸入正確的年齡!"
}
) ;
/* var newnewMyWindowForm = new myWindowForm() ;
newMyWindowForm.render(Ext.getBody()) ;
*/
// var newnewMyWindow = new myWindow() ;
// newMyWindow.show() ;
var myGridPanel = new beginMyPanel() ;
var myForm = new beginFormPanel() ;
//注意下面這句與***** 1 ****** 和 ***** 2 ******的關(guān)系
myGridPanel.on
(
"rowselect",
function(selectedRow)
{
this.getForm().loadRecord(selectedRow) ;
},
myForm
) ;
}) ;
</script>
</head>
<body>
</body>
</html>
相關(guān)文章
JavaScript實(shí)現(xiàn)JSON合并操作示例【遞歸深度合并】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)JSON合并操作,結(jié)合實(shí)例形式分析了javascript基于遞歸深度實(shí)現(xiàn)json合并操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-09-09
在vscode上直接運(yùn)行typescript的操作方法
在學(xué)習(xí)typescript的過程中發(fā)現(xiàn)在vscode上不能很好地的輸出typescript的運(yùn)行結(jié)果,需要先將typescript編譯為javascript,在通過node執(zhí)行js文件得到結(jié)果,這篇文章給大家介紹如何在vscode上直接運(yùn)行typescript,感興趣的朋友一起看看吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了H5 js點(diǎn)擊按鈕復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Discuz 公告效果（自動(dòng)換行，無間隙滾動(dòng)）
Discuz 公告效果效果代碼，可以自動(dòng)換行和無間隙滾動(dòng)2009-03-03
這篇文章主要介紹了通過實(shí)例解析JavaScript常用排序算法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
本文給大家介紹JavaScript語句的執(zhí)行過程的相關(guān)知識(shí)，對(duì)js語句執(zhí)行過程的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序使用canvas繪制鐘表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)音樂播放器，支持循環(huán)、隨機(jī)播放，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
在JavaScript中遇到處理錯(cuò)誤很讓人頭疼，這篇文章整理了JavaScript錯(cuò)誤處理實(shí)踐，有需要的小伙伴們可以參考。2016-07-07
JavaScript實(shí)現(xiàn)有限狀態(tài)機(jī)的示例代碼
有限狀態(tài)機(jī)（Finite?State?Machine,?FSM）是一種數(shù)學(xué)模型,用于描述系統(tǒng)在不同狀態(tài)下的行為,本文給大家介紹JavaScript實(shí)現(xiàn)有限狀態(tài)機(jī)的示例代碼,感興趣的朋友一起看看吧2024-12-12