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>
相关文章
ko的动态属性是指，ViewModel不确定的属性，而后期却需要的属性,本文将详细介绍，需要的朋友参考下2012-11-11
下面小编就为大家带来一篇javascript数字验证的实例代码(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了使用js如何判断横竖屏及禁止浏览器滑动条,需要的朋友可以参考下2014-04-04
隔行换色非表格版不过原理可以参考下面的代码，写的很不错2008-05-05
这篇文章主要介绍了BootStrap 动态表单效果,实现代码分为js部分和html部分，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
单例模式也称作为单子模式，更多的也叫做单体模式。为软件设计中较为简单但是最为常用的一种设计模式。这篇文章主要介绍了Javascript实现单例模式的相关资料,需要的朋友可以参考下2016-01-01
下面小编就为大家带来一篇在一个页面重复使用一个js函数的方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-12-12
这篇文章主要介绍了webpack项目轻松混用css module的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了基于JavaScript实现全选、不选和反选效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
在qq空间可以自定义一些插件，装饰空间，大家通常就是复制代码到空间粘贴，会实现非常美观的效果，有的会随机飘落一些花瓣，那么这种效果用代码怎么实现的呢，下面小编给大家详解jquery实现网页背景花瓣随机飘落特效，需要的朋友可以参考下2015-08-08
最新评论