ExtJsUI ---button ---panel -- textfield 特性学习笔记

最新推荐文章于 2025-11-30 22:25:41 发布

最新推荐文章于 2025-11-30 22:25:41 发布 · 153 阅读

文章标签：

#EXT #json #HTML

JS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用 ExtJS UI 库中的 Button 和 Panel 组件进行 Web 开发的基本方法，包括如何定义组件属性、事件监听及与其他组件的交互，通过综合实例展示了如何在实际项目中灵活运用这些组件。

ExtjsUI

1. Ext.Button
在button這個組件代替的是原先的<input type=“button/button/submit...”/>，
他的作用是觸發事件，和現實文字，提交表單-（json方式）等信息。
其屬性：
renderTo:----一般是上级的容器（Html-DOM模型的容器）
	e.g. 	renderTo:Ext.getBody(),//document.body,效果是一样的
text:"確 定",
	现实按钮上面的文字
minWidth : 40,
	按钮的宽度
listeners:
 同时监听的时间：
 handler:
  默认在click button的时候出发的处理事件，即是：指定一个事件句柄
  综合实例：
  Ext.onReady(function(){
	var _text = new Ext.Button({
		renderTo:Ext.getBody(),
		text:"確 定",
		minWidth : 40,
		listeners:{
			"click":function() {
				alert("鎖定點擊！");
				this.setDisabled(true);
			}
		}
	});
	alert(_text.text);
	_text.setText("取   消");
	//_text.setDisabled(true);
//	_text.setHandler( function() {
//			this.setDisabled(true);
//	});

	_text.on("click",function(){
		this.setText("取===  消");
	});


});
//说明；Listeners 没有setListeners()这个方法，其他的属性都有setXyy方法。故
Listeners一定要在初始化button 的时候初始化上。

2.Ext.Panel()

Ext.onReady(function(){
	
	var _panel = new Ext.Panel({
		renderTo: Ext.getBody(),
		layout:"form",//构建出来的是formPanel
/**
	* layout 的值
 * absolute accordion anchor auto Default border card column fit form hbox menu
 * table toolbar vbox
 */
		labelWidth:30,
		listeners:{
			"render":function(_panel){//render: 当前对象被正确构建后创建
				_panel.add(new Ext.form.TextField({
					id:"textName",
					fieldLabel:"姓名"
				}));
			}
		}
	});
	new Ext.Button({
		text:"确 定",
		renderTo:Ext.getBody(),
		handler:function() {
			alert(Ext.getCmp("textName").getValue());//getCmp("id");获得是一个组件对象
		}
	});
	
});

说明：renderTo，在初始化的时候创建，
			applyTo：给定对象的操作

3.Ext.form.TextField
Ext.form.TextField 只有在
Class: Container 
Subclasses: Panel, Toolbar, Viewport, Menu 
Extends: BoxComponent 
xtype: container 
中才能显示出来，见上面Panel的例子


Ext.onReady(function(){
	
	var _panel = new Ext.Panel({
		//layout:"form",
		frame:true,
		labelWidth:30,
		title:"人员信息",
		width:400,
		height:300
	});
	_panel.addButton({text:"确 定"});//设计时布局
	_panel.addButton(new Ext.Button({
		text:"取 消",
		minWidth:100
	}));
	_panel.render(Ext.getBody());//注意不能在构造方法中设置renderTo，要不然panel已经构造完成了，button就添加不上了
});