在使用extjs时,因为特殊的业务要求,extjs提供的功能不能满足业务逻辑,所以需要对其进行扩展,也就是所谓的继承,
在extjs中继承有两种写法
1。在ExtJS中使用Ext.extend()函数实现继承功能:
/*
*扩展树的多选模式,加了写业务逻辑方法validNodeHasFolder,并重写了select方法加入了业务逻辑
**/
Ext.ns("Ext.targsoft");
Ext.targsoft.MultiSelectionModel = function(config){
Ext.apply(this, config);
Ext.targsoft.MultiSelectionModel.superclass.constructor.call(this);
};
Ext.extend(Ext.targsoft.MultiSelectionModel , Ext.tree.MultiSelectionModel,{
validCount : 0 ,
select : function(node, e, keepExisting){
if(keepExisting !== true){
this.clearSelections(true);
}
if(this.isSelected(node)){
this.lastSelNode = node;
return node;
}
if(!node.isLeaf() && keepExisting ){
return ;
}
if(keepExisting && node.isLeaf() && this.validCount == 0 ){
alert(this.validCount );
this.validNodeHasFolder();
}
this.selNodes.push(node);
this.selMap[node.id] = node;
this.lastSelNode = node;
node.ui.onSelectedChange(true);
this.fireEvent("selectionchange", this, this.selNodes);
return node;
},
//判断选择的节点中是否含有文件夹,如果有那么就进行反选
validNodeHasFolder : function(){
this.validCount = 1 ;
for(var i=0 ; i< this.selNodes.length ; i++){
if(!this.selNodes[i].isLeaf()){
this.unselect(this.selNodes[i]);
}
}
}
});
2.Extjs中替换constructor,写法如下:
Ext.ns('Ext.formdesign');
Ext.formdesign.FormSort = Ext.extend(Ext.Window ,{
constructor : function(_cfg){
Ext.apply(this,_cfg);
this.grid = this.createGrid();
Ext.formdesign.FormSort.superclass.constructor.call(this,{
title : '表单类别' ,
width : 280 ,
height : 270 ,
closeAction : 'close' ,
items : [this.grid ] ,
buttons : [
{
text : '关闭' ,
scope : this ,
handler : function(){
this.close();
}
}
]
})
},
//创建表格
createGrid : function(){
//搜索
var searchObjRecs = Ext.data.Record.create([
{name: 'formSortUuid', mapping: 'formSortUuid'},
{name: 'sortName', mapping: 'sortName'},
{name: 'description', mapping: 'description'}
]);
var searchObjSm = new Ext.grid.CheckboxSelectionModel({header : '' ,singleSelect: true});
var searchObjStore = new Ext.data.Store({
url : this.contextPath+'/formsort.do?method=getFormSortDatas',
autoLoad : false ,
reader: new Ext.data.JsonReader(
{
totalProperty: "total",
root: 'data',
id: 'formSortUuid'
},searchObjRecs )
});
/*
var pagingBar = new Ext.PagingToolbar({
pageSize: rowLimit_1,
store: searchObjStore,
displayInfo: true,
displayMsg: '总数: {2}',
emptyMsg: '没有数据'
});
*/
var searchObjGrid = new Ext.grid.GridPanel({
id: 'searchObjGridId',
store: searchObjStore,
height : 202 ,
autoScroll : true ,
cm: new Ext.grid.ColumnModel([
searchObjSm,
{header: "编号", width: 100, dataIndex: 'formSortUuid', sortable: true,hidden: true},
{header: "名称", width: 105, dataIndex: 'sortName', sortable: true} ,
{header: "描述", width: 105, dataIndex: 'description', sortable: true}
]),
tbar : [
{
text :'添加',
handler : this.createRecord.createDelegate(this)
},'-',{
text :'修改',
handler : this.updateRecord.createDelegate(this)
},'-',{
text :'删除',
handler : this.delteRecord.createDelegate(this)
}
] ,
frame: false,
loadMask:{msg:"数据加载中...."},
sm:searchObjSm
});
return searchObjGrid ;
} ,
//新建
createRecord : function(){
this.getWindow().show();
this.getWindow().setTitle('新建表单类别');
this.getForm().baseParams = {
create : true
} ;
} ,
//修改
updateRecord : function(){
var r = this.getGridSeleted();
if(r){
this.getWindow().show();
this.getWindow().setTitle('修改表单类别');
this.getForm().baseParams = {
create : false
} ;
this.getForm().loadRecord(r);
}
} ,
//删除记录
delteRecord: function(){
var sort = this.protectId ? this.protectId : 'temp' ;
var rec = this.getGridSeleted();
if(rec){
Ext.Msg.confirm('提示','确认删除<b>'+rec.get('sortName')+'</b>吗?',function(btn){
if(btn == 'yes'){
if(rec.get('formSortUuid') == sort){
Ext.Msg.alert('提示','<b>'+rec.get('sortName')+'</b>是系统默认类别不能删除!');
}else{
Ext.Ajax.request({
url : this.contextPath+'/formsort.do?method=delFormSort',
params : {sortId : rec.get('formSortUuid')} ,
scope : this ,
callback :function(options ,success ,response ){
if(success){
var text = response.responseText ;
if(text == '1'){
Ext.Msg.alert('提示','删除成功!',function(btn){
if(btn == 'ok'){
this.grid.getSelectionModel().clearSelections();
this.grid.getStore().reload();
}
},this);
}else if(text == '2'){
Ext.Msg.alert('提示','<b>'+rec.get('sortName')+'</b>已经被业务对象使用不能进行删除!');
}else{
Ext.Msg.alert('提示','删除数据失败!');
}
}else{
Ext.Msg.alert('提示','删除数据失败!');
}
}
});
}
}
},this)
}
},
createForm : function(){
var form = new Ext.form.FormPanel({
frame : true ,
defaultType : 'textfield' ,
buttonAlign : 'center' ,
labelAlign : 'right' ,
labelWidth : 70 ,
items : [
{
fieldLabel : 'id' ,
xtype : 'hidden',
name : 'formSortUuid'
},
{
fieldLabel : '名称' ,
name : 'sortName'
},{
fieldLabel : '描述' ,
xtype : 'textarea' ,
name : 'description'
}
] ,
buttons : [
{
text : '确定' ,
scope : this ,
handler : function(){
form.getForm().submit({
url: this.contextPath+'/formsort.do?method=saveOrUpdateFormSort',
waitTitle : '请等待' ,
waitMsg: '正在提交中',
scope : this ,
success:function(form,action){
this.getForm().reset();
this.grid.getSelectionModel().clearSelections();
this.grid.getStore().reload();
this.getWindow().hide();
},
failure:function(form,action){
Ext.Msg.alert('提示','保存失败!');
}
});
}
} , {
text : '取消' ,
scope : this ,
handler : function(){
this.getForm().reset();
this.getWindow().hide();
}
}
]
});
return form ;
} ,
getForm : function(){
var form = this.getFormPanel().getForm();
return form ;
} ,
getFormPanel : function(){
if(!this.gridForm){
this.gridForm = this.createForm();
}
return this.gridForm ;
} ,
createWindow : function(){
var form = this.getFormPanel();
var win = new Ext.Window({
title : 'info' ,
closeAction : 'hide' ,
width : 300 ,
height : 180 ,
modal : true ,
items : [form]
});
return win ;
},
getWindow : function(){
if(!this.gridWindow){
this.gridWindow = this.createWindow();
}
return this.gridWindow ;
} ,
//取到grid选择的记录
getGridSeleted : function(){
var sm = this.grid.getSelectionModel();
if(sm.hasSelection()){
return sm.getSelected() ;
}else{
Ext.Msg.alert('提示','请选择一条记录!');
return null ;
}
}
})
分享到:
相关推荐
在提供的`继承扩展写法.js`文件中,我们可以看到实际的`Ext`继承示例。通常,文件会包含多个类定义,每个类定义都是通过`Ext.extend()`来实现继承的。这些类可能包含特定的配置选项、方法重写、事件监听等。 ### 类...
在EXT JS这个强大的JavaScript框架中,"继承"和"重写"是两个核心概念,它们在构建可复用和模块化的应用程序中起着至关重要的作用。EXT JS采用面向对象的编程方式,允许开发者通过继承机制来扩展类的功能,同时通过...
目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...
在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类),这些类将继承另一个类(父类)的属性和方法。这个功能对于构建复杂的JavaScript应用程序至关重要,因为它提供...
在这个特定的例子中,我们关注的是"Ext继承和扩展",这是Ext JS中两个核心的概念,它们对于理解和创建自定义组件至关重要。 1. **Ext继承**: 在面向对象编程中,继承是类之间的一种关系,允许一个类(子类或派生...
"ext官方21种样式"指的是EXT库中预设的21种不同的主题或样式,这些样式可以极大地改变EXT组件的外观,以适应不同项目的需求和用户界面设计。 EXT的样式主要通过Sass(Syntactically Awesome Style Sheets)语言来...
在给定的标题“Ext 两种树形菜单”中,我们可以推测这是一个关于使用Ext JS框架创建两种不同样式或功能的树形菜单的示例。Ext JS是一个强大的JavaScript库,专门用于构建富客户端应用,它提供了丰富的组件和API来...
这里,我们聚焦于`ext`继承,通常指的是JavaScript中的`extend`方法,这是一种实现继承的方式。在JavaScript中,由于语言本身没有内置的类机制,所以开发者通过函数和原型链来模拟类的概念。 `extend`方法通常被...
EXTJS的类继承主要通过以下几种方式实现: 1. **Ext.extend()**:这是EXTJS中最基础的类继承方法。通过调用`Ext.extend(baseClass, subClass, overrides)`,可以创建一个新的子类,其中`baseClass`是父类,`...
在JavaScript的世界里,面向对象(Object-Oriented Programming, OOP)是一种常用的设计模式,它允许我们通过类和对象来组织代码,实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制,特别是继承的...
Ext4.0学习总结及功能详解。描述ext各种控件用法,布局等。
EXT图书系统的18种皮肤切换功能展示了EXT的灵活性和可定制性。皮肤是EXT应用的外观主题,包括颜色、字体、布局等方面的设计。用户可以根据个人喜好或企业品牌需求选择不同的皮肤,使得系统界面更加个性化。这种多...
在IT行业中,Java和ExtJS是两种非常重要的技术。Java是一种多平台的、面向对象的编程语言,而ExtJS则是一个用于构建富客户端Web应用的JavaScript框架。它们之间的结合能够帮助开发者创建功能丰富的、交互性极强的Web...
3. **LVM2支持**: LVM(逻辑卷管理)是Linux中的一种高级存储管理技术,用于管理磁盘空间。Ext2Read能够识别和处理配置了LVM2的Linux系统,使得用户能访问LVM2中的EXT分区。 4. **EXT4 extent支持**: EXT4引入了...
例如,`Ext.extend(MyClass, Ext.Panel, {myMethod: function() {...}})`创建了一个新类MyClass,它继承自Ext.Panel,并添加了一个名为myMethod的方法。 - `Ext.apply()`: 这个静态方法用于合并对象的属性,通常...
在面向对象编程中,类的继承是创建新类的一种方式,新类可以从现有类(父类)继承属性和方法。在Ext 2.2中,各个组件和类通常会形成一个复杂的继承链,使得代码可以重用并保持一致性。类说明图可以帮助开发者理解和...
EXT,全称EXT JS,是一种基于JavaScript的开源前端框架,主要应用于构建富互联网应用程序(Rich Internet Applications,简称RIA)。EXT3.jar是EXT框架的一个版本,它包含EXT库的Java版本,通常用于Java Web应用程序...
在Windows操作系统中,由于默认不支持Linux文件系统如EXT4,因此无法直接读取或写入EXT4格式的分区。但有一些第三方工具可以帮助我们解决这个问题,其中之一就是Ext2Fsd。Ext2Fsd是一个免费的开源软件,专门设计用于...