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就添加不上了 });
ExtJsUI ---button ---panel -- textfield 特性学习笔记
最新推荐文章于 2024-08-13 16:33:17 发布