`
minzaipiao
  • 浏览: 146670 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs扩展自己的组件

阅读更多
myWindow = function(cfg){
	Ext.apply(this,cfg); //属性拷贝,apply将会覆盖目标对象中的属性
	Ext.onReady(this.init, this);
}

Ext.extend(myWindow, Ext.util.Observable,{
	init: function(){
		
		this.formPanel = new Ext.form.FormPanel({
			width:280,
			height:280,
			labelWidth:50,
			frame:true,
			defaultType:'textfield',
			items:[
				{
				fieldLabel:'name'
				},
				{fieldLabel:'age'}
			],
			buttons:[
			{text:'add'}
			]
		});
		
		this.showWindow = new Ext.Window({
			width:300,
			height:300,
			title:'坏蛋吧',
			items:[this.formPanel]
		});
		this.showWindow.show();
	}
});

new myWindow();



userPanel = Ext.extend(Ext.Window,{
	title:'entend Ext.window',
	width:300,
	height:200,
	buttonAlign:'center',
	layout:'fit',
	initComponent:function(){
		Ext.apply(this,{
			buttons:[{
				text:'new',
				handler:this.saveUser.createDelegate(this)
			},{
				text:'cancel',
				handler:this.cancel.createDelegate(this)
			}]
		}),
		userPanel.superclass.initComponent.call(this),
		this.uf = this.createForm();
		this.add(this.uf);
	},
	createForm:function(){
		var uf = new Ext.form.FormPanel({
			defaultType:'textfield',
			labelAlign:'right',
			labelWidth:50,
			frame:true,
			items:[{
				fieldLabel:'用户名',
				name:'username',
				allowBlank:false
			},{
				fieldLabel:'密码',
				name:'password',
				inputType:'password',
				allowBlank:false
			}]
		});
		return uf;
	},
	saveUser:function(){
		if(this.uf.form.isValid())
		{
			alert("hello ");
		}
	},
	cancel:function(){
		alert('cancel');
	}
	
});

Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';
	new userPanel().show();
});
分享到:
评论

相关推荐

    Extjs树分页组件扩展

    实现对Ext树进行分页的组件,扩展了TreeLaoder和PagingToobar

    ExtJS 组件扩展

    ExtJS 组件扩展 如何正确使用Extjs---扩展组件的两个层次

    extjs各种常用组件归纳总结

    extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等

    ExtJS开发插件及Ext包

    ExtJS开发插件及Ext包.一个是Spket一个是Ext包

    几个不错的EXTJS拓展组件

    包含34个优秀的EXTJS扩展组件实例,可直接运行查看,同样很方面的用到自己的项目中。非常不错的

    extjs4.2 日期控件扩展带时分秒

    extjs4.2 日期控件扩展,带年月日时分秒的选择。

    extjs-ux, EXT JS 4的一些插件和扩展.zip

    extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示:链接论坛:链接 Ext.ux. grid.feature.Tileview 演示:链接

    ExtJS原生多文件拖动上传组件

    ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...

    ext日期时间控件 (支持Extjs 3.0以上版本.)

    此控件由本人原创,扩展了DateField。在Extjs3.0.0、3.2.1、3.3.0版本下都测试通过。且在IE6、Firefox3.5.2、Chrome5.0都测试通过(理论上支持更多浏览器,由于本人只装了这些,所以只测了这些)。凑满100分后开源。...

    EXTJS实用开发指南_个人整理笔记.pdf

    EXTJS的组件体系由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。EXTJS的组件体系可以分成三大类,即基本组件、工具栏组件、表单及元素组件...

    extJs 2.1学习笔记

    24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77

    ExtJsCustomComponent:ExtJs自定义组件

    SearchComboBox: 扩展ExtJs4的combobox控件,当输入框改变时就会向后台发送请求,展现数据。TreeField: 扩展ExtJs4的Ext.form.field.Picker类,当点击下拉框时,异步加载树形结构数据的所有层级,需要后台提供树形...

    Extjs3.3+swfUpload2.2实现多文件上传组件.pdf

    Extjs3.3+swfUpload2.2 实现多文件上传组件 Extjs3.3+swfUpload2.2 实现多文件上传组件是一种基于 Extjs3.3 和 swfUpload2.2 的...该组件的实现主要基于 swfUpload2.2 和 Extjs3.3,提供了良好的用户体验和可扩展性。

    ExtJS可视化工具

    丰富的组件库,可自定义扩展ExtJS组件 .开发应用简单快速 .高效率和高稳定性 .跨平台、数据库和浏览器 .服务器端的脚本支持 .智能的数据库访问机制 您可以到 http://www.putdb.com 在线使用或下载到本地使用。

    ExtJS官方帮助文档6.5.0

    ExtJS-6.5.0官方文档为最新版本,扩展了morden组件

    ExtJS(ajax框架) 4.2.1

    ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是 一款不可多得的JavaScript客户端技术的精品。 ...

    轻松搞定Extjs_原创

    一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被设计得面目全非的按钮 53 ...

    ExtJS扩展 垂直tabLayout实现代码

    但ExtJS中的TabPanel只能水平显示,搜索了一下Ext论坛,发现有垂直TabLayout的扩展,但垂直tab的页签内容是水平显示的,且页签多了之后也不能通过设置enableScroll属性使其能滚动,为了适应项目的需求,本人对...

    精通JS脚本之ExtJS框架.part2.rar

    14.2 与ExtJS扩展相关的预备知识 14.2.1 定义命名空间 14.2.2 使用xtype 14.3 用户扩展和插件 14.3.1 编写自定义用户扩展 14.3.2 常用插件UploadDialog 14.3.3 常用插件ManagedIFrame 14.4 使用ExtJS制作...

    ExtJs教程_完整版

    (4).Ext初期仅是对YUI的对话框扩展,后来逐渐有了自己的特色,深受网友的喜爱。发展至今,Ext除YUI外还支持Jquery Prototype等的JS库,让大家自由地选择; (5).多浏览器支持、支持多平台下的主流浏览器。

Global site tag (gtag.js) - Google Analytics