JS小练习代码之二_
JS练习代码
相关的源代码如下:
1.beginFormPanel.js(作用:外层html文件中表单的展现)
<script> var beginFormPanel = Ext.extend(Ext.form.FormPanel,{ constructor:function() { beginFormPanel.superclass.constructor.call ( this, { title:"myForm(绝不裸奔)", width:418, height:180, frame:true, labelWidth:45, style:"margin-left:250px", defaultType:"textfield", defaults:{anchor:"95%"}, items: [ { fieldLabel:"姓名", name:"name" }, { fieldLabel:"年龄", name:"age" }, { fieldLabel:"性别", name:"sex" }, { fieldLabel:"住址", name:"addr" } ], buttons: [ { text:"添加" }, { text:"修改" }, { text:"删除" } ], renderTo:Ext.getBody() } ) ; } }) ; </script>
2.beginPanel.js(作用:GridPanel与窗口以及窗口中FormPanel的实现)
<script> /**************************** FormPanel *****************************************************/ var myWindowForm = Ext.extend(Ext.form.FormPanel,{ constructor:function() { myWindowForm.superclass.constructor.call ( this, { labelWidth:45, defaultType:"textfield", defaults:{anchor:"93%"}, style:"padding:5px", baseCls:"x-plain", items: [ { fieldLabel:"姓名", name:"name", allowBlank:false, blankText:"姓名不能够为空!" }, { fieldLabel:"年龄", name:"age", allowBlank:false, vtype:"age", blankText:"年龄不能够为空!" }, { fieldLabel:"性别", name:"sex", allowBlank:false, blankText:"性别不能够为空!" }, { fieldLabel:"住址", name:"addr", allowBlank:false, blankText:"住址不能够为空!" } ] } ) ; }, getValues:function() { if(this.getForm().isValid()) { return new Ext.data.Record(this.getForm().getValues()) ; } else { throw error("表单验证没通过哦!") ; } }, setValues:function(record) { this.getForm().loadRecord(record) ; }, reset:function() { this.getForm().reset() ; } }) ; /******************************** Window ***********************************/ var myWindow = Ext.extend(Ext.Window,{ form:new myWindowForm(), constructor:function() { myWindow.superclass.constructor.call ( this, { title:"myWindow(绝不裸奔)", width:300, height:185, frame:true, plain:true, modal:true, items:this.form, closable:false,//禁止关闭 collapsible:true,//可折叠 buttons: [ { text:"确定", handler:this.onSubmitClick, scope:this }, { text:"取消", handler:this.onCancelClick, scope:this } ] } ) ; this.addEvents("submit") ; }, close:function() { this.hide() ; }, onSubmitClick:function() { /* try { this.fireEvent("submit",this,this.form.getValues()) ; } catch (error) { Ext.Msg.alert("警告","请将需要填写的信息填写完整!") ; } */ this.fireEvent("submit",this,this.form.getValues()) ; this.close() ; }, onCancelClick:function() { //上面不加scope属性则提示this.form为空 this.form.reset() ; this.close() ; } }) ; /************************** 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>

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台,在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能,并提供具体的代码示例。一、准备工作使用百度地图API前,首先需要在百度地图开放平台(http://lbsyun.baidu.com/)上申请一个开发者账号,并创建一个应用。创建完成

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形,通过绘制股票的开盘价、收盘价、最高价和最低价等数据,帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图,并附上具体的代码示例。一、准备工作在开始之前,我们需要准备以下环境:1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中,地图应用已经成为常见的功能之一。而地图上绘制多边形,可以帮助我们将特定区域进行标记,方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能,并提供具体的代码示例。首先,我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

如何使用JS和百度地图实现地图点击事件处理功能概述:在Web开发中,经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能,并给出具体的代码示例。步骤:导入百度地图的API文件首先,要在HTML文件中导入百度地图API的文件,可以通过以下代码实现:

如何使用JS和百度地图实现地图热力图功能简介:随着互联网和移动设备的迅速发展,地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式,能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能,并提供具体的代码示例。准备工作:在开始之前,你需要准备以下事项:一个百度开发者账号,并创建一个应用,获取到相应的AP
