JS小练习代码之二第2/2页
更新时间：2008年10月12日 23:25:25 作者：
JS练习代码
/************************** 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
},
"-",//得到的结果为:|
{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.静态html页面的表现
<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)
{
//此处用正则表达式要使
if(/^\d+$/.test(value))
{
return true ;
}
return false ;
},
"ageText":"请输入正确的年龄!"
}
) ;
/* var newnewMyWindowForm = new myWindowForm() ;
newMyWindowForm.render(Ext.getBody()) ;
*/
// var newnewMyWindow = new myWindow() ;
// newMyWindow.show() ;
var myGridPanel = new beginMyPanel() ;
var myForm = new beginFormPanel() ;
//注意下面这句与***** 1 ****** 和 ***** 2 ******的关系
myGridPanel.on
(
"rowselect",
function(selectedRow)
{
this.getForm().loadRecord(selectedRow) ;
},
myForm
) ;
}) ;
</script>
</head>
<body>
</body>
</html>
相关文章
JavaScript实现JSON合并操作示例【递归深度合并】
这篇文章主要介绍了JavaScript实现JSON合并操作,结合实例形式分析了javascript基于递归深度实现json合并操作相关实现技巧与注意事项,需要的朋友可以参考下2018-09-09
在学习typescript的过程中发现在vscode上不能很好地的输出typescript的运行结果,需要先将typescript编译为javascript,在通过node执行js文件得到结果,这篇文章给大家介绍如何在vscode上直接运行typescript,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要为大家详细介绍了H5 js点击按钮复制文本到粘贴板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
Discuz 公告效果效果代码，可以自动换行和无间隙滚动2009-03-03
这篇文章主要介绍了通过实例解析JavaScript常用排序算法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
本文给大家介绍JavaScript语句的执行过程的相关知识，对js语句执行过程的相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要为大家详细介绍了微信小程序使用canvas绘制钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要为大家详细介绍了原生JS实现音乐播放器，支持循环、随机播放，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
在JavaScript中遇到处理错误很让人头疼，这篇文章整理了JavaScript错误处理实践，有需要的小伙伴们可以参考。2016-07-07
有限状态机（Finite State Machine, FSM）是一种数学模型,用于描述系统在不同状态下的行为,本文给大家介绍JavaScript实现有限状态机的示例代码,感兴趣的朋友一起看看吧2024-12-12
最新评论