1.Ext.namespace("Ext.quanquanfly") ; Ext.quanquanfly.aa = function(){alert("aa")} ;//像java里面的构造函数,new的时候运行 Ext.quanquanfly.Person = Ext.emptyFn;//把person类定义为空==function(){} Ext.apply(Ext.quanquanfly.Person.prototype , { name:"zqhung" }) ; <link rel="stylesheet" type="test/css" href="resources/css/ext-all.css" mce_href="resources/css/ext-all.css"/> <mce:script type="text/javascript" src="adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript" src="hello.js" mce_src="hello.js"></mce:script> <mce:script type="text/javascript"><!-- var aa = new Ext.quanquanfly.aa();//弹出aa var _person = new Ext.quanquanfly.Person() ; alert(_person.name) ; //弹出zqhung _person.name = "hongzequan" ; alert(_person.name) ;//弹出hongzequan // --></mce:script> 切记:<script></script>不能写成<script/> 2.按钮、panel和输入框: Ext.onReady(//页面加载的时候同时启动 function(){ /* * 添加按钮,点击后弹出aa */ new Ext.Button({ renderTo:document.body, text:"确定", width:200, listeners:{ "click":function() { alert("aa"); } } }); /* * 在window中添加两个输入框和两个按钮 * 在panel中同理,只是将Window改为Panel,去掉show就可以了 */ var _aa = new Ext.Window({ title:"人员信息", width:200, height:150, frame:true, plain:true,//使颜色更加和谐 layout:"form",//添加 TextField必须的环节 labelWidth:40 //renderTo:Ext.getBody()不能增加这段,如果添加后,设计结构结束,以下的_aa.addButton等都将失效 }); _aa.add(new Ext.form.TextField({id:"name",fieldLabel:"姓名"})); _aa.add(new Ext.form.TextField({id:"password",fieldLabel:"密码"})); _aa.addButton(new Ext.Button( { text:"确定",handler:function(){alert("确定");} } ) ); _aa.addButton(new Ext.Button({text:"取消", handler:function(){alert("取消");} })); _aa.render(Ext.getBody()); _aa.show();//window必须具有的 } ); 3.小试布局: Ext.onReady( function(){ var window = new Ext.Window( { title:"测试单元", width:400, height:200, plain:true, frame:true, items:[ {xtype:"panel", baseCls:"x-plain",//使颜色协调 layout:"column",//布局采用列布局 items:[{ baseCls:"x-plain", columnWidth:0.5, layout:"form", labelWidth:55, defaultType:"textfield",//设置默认类型为textfield,不设置时默认为panel defaults:[{baseCls:"x-plain"}],//设置默认:baseCls:"x-plain" items:[{fieldLabel:"姓名",id:"name"}, {baseCls:"x-plain",xtype:"textfield",fieldLabel:"密码",inputType:"password"}//设置文本框属性为password ]}, {columnWidth:0.5, layout:"form", baseCls:"x-plain", items:[{baseCls:"x-plain",xtype:"textfield",fieldLabel:"个人照片",inputType:"image"}] } ]}] } ); window.addButton(new Ext.Button({text:"确定",handler:function(){alert(window.findById("name").getValue());}}));//获取id为name的文本框的值 window.show(); } ) 4.根据日期计算年龄: {baseCls:"x-plain",xtype:"textfield",fieldLabel:"年龄",id:"age"}, {xtype:"datefield",format:"Y-m-d",value:"1981-10-18",fieldLabel:"出生日期", listeners:{"blur":function(df)//设置事件:根据选择的日期显示年龄的值 { var age = window.findById("age"); age.setValue(new Date().getFullYear()-df.getValue().getFullYear()); } }}