Extjs4 类的定义和扩展实例

一般定义方式,注意方法和函数的添加方式不同。(添加函数只能用override方式添加不知为什么,有知道的,请搞之。)
定义一个类,并给他一个方法


代码如下:

Ext.define('Simple.Class',{
welcome:function(){
alert('Welcome to the app');
}
});

使用Ext.override方法对已有类进行重载并添加函数


代码如下:

Ext.override(Simle.Class,{
goodBye:function(){
alert('Goodbye');
},
funAll:function(){
this.welcome();
this.goodBye();
}
});

实例化类对象,并调用新的方法


代码如下:

var app = new Simple.Class();
app.runAll(); //Welcome to the app Goodbye

重载的另一种写法


代码如下:

Simple.Class.override({
// New members...
});

实际例子:


代码如下:

Ext.define('MyButton',{
extend:'Ext.Action',
initComponent: function(){
var me = this;
var initEnable = true; //初始权限
}
});
Ext.override(MyButton,{
mysetenable:function(b){ //增加自定义函数设置按钮权限
if ( this.initEnable ) {
if (b){
this.enable();
}
else{
this.disable();
}
}
else{
this.disable();
}
}
});

例子2:


代码如下:

Ext.define('PO_Head_Add_Panel', {
extend: 'Ext.form.Panel',
alias: 'widget.PO_Head_Add_Panel',
//height:400,
//width:600,
frame: true,
layout: 'anchor', //该form分为两列
bodyPadding: 5, //偏移5px
//baseCls: "x-plain", //指定使用系统背景色
//defaults: { anchor: "95%", msgTarget: "side" },
// anchor: '100%',
defaults:{//统一设置表单字段默认属性
//autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
labelSeparator :':',//分隔符
labelWidth : 60,//标签宽度
//width : 150,//字段宽度
allowBlank : false,//是否允许为空
//blankText : '不允许为空', //若设置不为空,为空时的提示
labelAlign : 'right',//标签对齐方式
msgTarget :'qtip' //显示一个浮动的提示信息
//msgTarget :'title' //显示一个浏览器原始的浮动提示信息
//msgTarget :'under' //在字段下方显示一个提示信息
//msgTarget :'side' //在字段的右边显示一个提示信息
//msgTarget :'none' //不显示提示信息
//msgTarget :'errorMsg' //在errorMsg元素内显示提示信息
},
items:[{
xtype:'combobox',
name: 'ToAddress',
labelWidth:70,
width:600,
queryMode: 'local',
store:TmpAddressStore,
displayField: 'AddrName',
valueField: 'AddrName',
editable : false,// 是否允许输入
forceSelection : true,// 必须选择一个选项
msgTarget: 'side',
allowBlank: false, //是否允许空值
fieldLabel: '送货地址'
},{
xtype:'textfield',
name: 'HRemark',
labelWidth:70,
width:600,
msgTarget: 'side',
allowBlank: false, //是否允许空值
fieldLabel: '备注'
}],
initComponent: function(){
var me = this;
var PoType = ''; //可以定义属性 obj.PoType 使用
var TmpHeadRec = Ext.create('PO_HeadData');

Ext.apply(this, {
buttons: [{
text: '保存',
handler:function(){
if (me.getForm().isValid()) { //判断提交的数据是否符合正则表达式
//保存功能
}
}
}, {
text: '取消',
handler: function () {
me.ownerCt.hide();
}
}],
SetFormValue:function(){ //自定义方法 obj.SetFormValue() 方式调用
me.TmpHeadRec = HeadStore.getAt(0);
me.getForm().findField('POType').setValue(me.TmpHeadRec.get('POType'));
me.getForm().findField('PONum').setValue(me.TmpHeadRec.get('PONum'));
}
});

this.callParent(arguments);
}
});

时间: 2013-06-25

ExtJS4 动态生成的grid导出为excel示例

搜索了蛮久,找到一些例子,因为我是初学者的缘故大多不知道怎么使用.. 研究了一下那个源码,搞到现在终于实现了基本的下载.解决了一个表格不能重复下载的小BUG,一个使用grid初始化发生的BUG 下面记录一下步骤.说不定下次还有用 1.下载需要用到js代码,我已经上传 2.在你的html文件中加入引用,路径问题自己 注意下,下面是我的路径 复制代码 代码如下: <script type="text/javascript" src="../export/export-all

ExtJS4中使用mixins实现多继承示例

在ExtJS4中使用mixins来实现多继承.具体例子代码如下: 复制代码 代码如下: (function(){ Ext.onReady(function(){ Ext.define('say',{ canSay:function(){ alert("hello"); } }); Ext.define('eat',{ caneat:function(){ alert("eating"); } }); Ext.define("user",{ mix

浅谈JSON.parse()和JSON.stringify()

1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23"}' 经 JSON.parse(str) 得到: Object: age:"23" name:"cpf" _proto_:Object ps:单引号写在{}外,每个属性都必须双引号,否则会抛出异常 2.stringify用于从一个对象解析出字符串,例如 var

Extjs4如何处理后台json数据中日期和时间

当ASP.NET后台使用JavaScriptSerializer这个组件将对象序列化为json,或者使用ScriptMethod特性的json [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)] public List<EUser> Users()//参数测试用 { List<EUser> l = new List<EUser>(); Random a

ExtJS4给Combobox设置列表中的默认值示例

这个是model 复制代码 代码如下: Ext.regModel('commemModel', { fields : [ 'name', 'id' ] }); 定义一个store设置id为s1的容器的默认值是 第一季度 复制代码 代码如下: var gjcx1 = new Ext.data.Store({ autoLoad:true, model : commemModel, proxy : { type : 'ajax', url : '../store/cxjd.json' }, liste

extjs4 treepanel动态改变行高度示例

  复制代码 代码如下: //css代码 .x-row-class{ line-height:30px; } //js代码 },{ text: '技能分配', flex: 1, width:150, dataIndex: 'skillDistribut', sortable: true, renderer:function(value, metaData, record, rowIndex, columnIndex, store){ metaData.tdAttr= "data-qtip='&q

javascript中JSON对象与JSON字符串相互转换实例

本文实例讲述了javascript中JSON对象与JSON字符串相互转换实现方法.分享给大家供大家参考.具体如下: <script type="text/javascript"> // 根据JSON对象的属性的名称获取属性的值 var jsonObj = { name: "jxqlovejava" }; // JSON对象 console.log(jsonObj.name); // "jxqlovejava" var jsonStr

Extjs4实现两个GridPanel之间数据拖拽功能具体方法

1.之前在winForm上有看过在选择数据时会将一些数据放在待选框中,而用户可以将想要选择的数据放到备选框中,那么如何用Extjs实现类似功能,我们选择用两个gridPanel来模拟其中的备选框和待选框.如下图所示: 定义代码如下: 复制代码 代码如下: {               xtype:'gridpanel',               multiSelect: true,                id:'staff',                 x: 5,      

Extjs4 Treegrid 使用心得分享(经验篇)

最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo, 没一个可靠的,全都无法显示出来.像对于我们习惯用C++的coder来说,EXTJS简直就是一群无政府土匪来维护的,官网上连个搜索框都没有,找资料基本靠遍历,还是人工的. 使用treegrid,需要在调用页面的head中加载以下几个文件: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="css/ext-

ExtJS4中的requires使用方法示例介绍

ExtJS4的requires是新增的机制,主要是实现异步加载机制.这样在不点击对应的按钮或者选项的时候就不会加载对应的js文件,提高了加载速度和用户等待时间. requires机制的实现通过一个Ext.Loader.setConfig函数来设置文件寻找的映射目录,然后在需要用到对应js文件的时候使用Ext.require进行加载. 文件的存储结构如下所示:  ux文件夹和lesson2.htm和lesson22.js在相同的目录下,而使用到的MyWin.js存放在ux的文件夹中. 在lesso

jsp中定义和使用方法示例介绍

在jsp中,如果需要处理复杂数据时,在上方定义一个java方法是很有效的解决方案,把处理数据的责任推给该方法,然后该jsp页面的主流程就不受影响.当然也可以使用js定义方法来处理,js似乎更善于定义这样的方法来处理前台数据,但有时候jsp和js之间倒腾数据时会出乱码或者报一些找不到对象的错误,因此他们之间的互相传值还是越少越好. 看一看jsp中定义一个字符串处理的方法: 复制代码 代码如下: <%! String splitString(String str, int a) { if (str

在Python中使用gRPC的方法示例

本文介绍了在Python中使用gRPC的方法示例,分享给大家,具体如下: 使用Protocol Buffers的跨平台RPC系统. 安装 使用 pip pip install grpcio pip install grpcio-tools googleapis-common-protos gRPC由两个部分构成,grpcio 和 gRPC 工具, 后者是编译 protocol buffer 以及提供生成代码的插件. 使用 编写protocol buffer 使用 gRPC 首先需要做的是设计 p

Go语言中的字符串处理方法示例详解

1 概述 字符串,string,一串固定长度的字符连接起来的字符集合.Go语言的字符串是使用UTF-8编码的.UTF-8是Unicode的实现方式之一. Go语言原生支持字符串.使用双引号("")或反引号(``)定义. 双引号:"", 用于单行字符串. 反引号:``,用于定义多行字符串,内部会原样解析. 示例: // 单行 "心有猛虎,细嗅蔷薇" // 多行 ` 大风歌 大风起兮云飞扬. 威加海内兮归故乡. 安得猛士兮守四方! ` 字符串支持转义

在Angular中使用JWT认证方法示例

本文介绍了在Angular中使用JWT认证方法示例,分享给大家,具体如下: 项目地址: grading-system 基于session的认证和基于token的认证的方式已经被广泛使用.在session认证中,服务端会存储一份用户登录信息,这份登录信息会在响应时传递给浏览器并保存为Cookie,在下次请求时,会带上这份登录信息,这样就能识别请求来自哪个用户. 在基于session的认证中,每个用户都要生成一份session,这份session通常保存在内存中,随着用户量的增加,服务端的开销会增大

SpringBoot 中使用JSP的方法示例

本文介绍了SpringBoot 中使用JSP的方法示例,分享给大家,具体如下: 依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.1.RELEASE</version> <relativePath/> <!-- l

Linux中在防火墙中开启80端口方法示例

linux如果刚安装好防火墙时我们常用的端口是没有增加的,也就是说不能访问,那么要怎么把常用端口增加到防火墙通过状态呢,下面我们以80端口为例子吧. 最近自己在学习Linux.搭建一个LNMP环境.在测试时一切都好.然后重启Linux后.再次访问网站无法打开.最终原因是在防火墙中没有加入 80 端口的规则.具体方法如下: 在CentOS下配置iptables防火墙,是非常必要的.来我们学习如何配置!,其它版本一下: 1.打开iptables的配置文件: 代码如下 vi /etc/sysconfi

Android中imageview.ScaleType使用方法详细介绍

Android中imageview.ScaleType使用方法详细介绍 ScaleType属性用以表示显示图片的方式,共有8种取值: ScaleType.CENTER:图片大小为原始大小,如果图片大小大于ImageView控件,则截取图片中间部分,若小于,则直接将图片居中显示. ScaleType.CENTER_CROP:将图片等比例缩放,让图像的短边与ImageView的边长度相同,即不能留有空白,缩放后截取中间部分进行显示. ScaleType.CENTER_INSIDE:将图片大小大于Im

Python3.X 线程中信号量的使用方法示例

前言 最近在学习python,发现了解线程信号量的基础知识,对深入理解python的线程会大有帮助.所以本文将给大家介绍Python3.X线程中信号量的使用方法,下面话不多说,来一起看看详细的介绍: 方法示例 线程中,信号量主要是用来维持有限的资源,使得在一定时间使用该资源的线程只有指定的数量 # -*- coding:utf-8 -*- """ Created by FizLin on 2017/07/23/-下午10:59 mail: https://github.com

Python cookbook(数据结构与算法)从字典中提取子集的方法示例

本文实例讲述了Python从字典中提取子集的方法.分享给大家供大家参考,具体如下: 问题:想创建一个字典,其本身是另一个字典的子集 解决方案:利用字典推导式(dictionary comprehension)可轻松解决 # example of extracting a subset from a dictionary from pprint import pprint prices = { 'ACME': 45.23, 'AAPL': 612.78, 'IBM': 205.55, 'HPQ':