ext.button 常用 函数 属性
Ext常用函数
1、Ext.onReady(function fn,Object scope,boolean override)
该方法的调用发生在Document对象加载完毕后,html的Onload()事件与image加载之前
fn:执行的函数
2、Ext.get(Mixed el)
如果参数是字符串则返回String,如果参数是数字则返回number,如果参数是布尔参数则返回boolean
如果参数是日期则返回Date,如果参数是函数则返回函数
通过指定的id或者Dom节点或Element元素,获取HTMLElement
7、Ext.isEmpty()
对指定的元素或者节点进行判断,是否为空,如果指定的节点是null,undefined,则返回true,否则返回false
8、space()
创建指定的命名空间后,就可以在该命名空间下定义变量,方法和类。
此时在这些变量或类将在该命名空间下,当引用该类时需要通过该命名空间方可引用。
9、Ext.each()
分别对一个数组或者集合进行迭代,分别对集合中的对合具有相同的功能。
10、Ext.apply(Object obj,Object config,Object defaults)
来完成的,而它只是提供了一种Ext.DomQuery.select的简快调用。
5、Ext.getCmp(String id)
返回ponent管理的指定的id的Component对象,实际是ponentMgr.get(id)的包装调用
6、Ext.getDom(Mixed el)
为指定的对象拷贝属性,或以默认的属性初始化一个对象
Button的设置及各种属性
Button的设置及各种属性(1)UIButton类继承⾃UIControl,⽽UIControl继承⾃UIView,因为UIView就是个矩形区域,所以UIButton实例化的对象其实都是⼀个矩形,虽然有各种圆⾓、增加联系⼈、信息按钮等等,给它们加个背景它们就现形成矩形了,⽽且它们有个frame属性,这就是设置位置和矩形框的。
(2)UIButton创建⼀个按钮不⽤实例化,也就是不⽤alloc和init,⽽是直接调⽤内置的⼏个⼯⼚⽅法即可,这⼀点和UILabel *label1= [[UILabel alloc]init]不同,⽽且这些类型⾥⾯最常⽤的时Custom类型,因为我们可以⾃定义图⽚,以及图⽚和⽂字的位置。
(3)按钮有很多状态,正常状态Normal、被点击时状态Highlighted等等,所以可以分别对不同状态设置属性。
(4)其实按钮最重要的不是上⾯那些设置属性,⽽是按钮关联的操作是什么?即点击后发⽣什么,这需要⼀个addtarget操作函数,如果多个按钮⽤到同⼀个函数,则需要tag属性来区别是哪个按钮。
(5)要⾃定义按钮,⼀种⽅式是我们先⾃定义⼀个继承UIButton的类,然后对这个类进⾏重写函数,相当于定制,最后⽤这个类去创建按钮,这些按钮也就具有⾃定义的样式(这种⽅法只针对⾃定义按钮类型有效)。
1 - (void)viewDidLoad {2//⽣成⼀个btn1对象,不需要alloc和init,⽽是直接⽤内置的⼯⼚⽅法,有很多可CMD+点击查看3 UIButton *btn1=[UIButton buttonWithType:UIButtonTypeRoundedRect];4//设置位置和宽⾼5 btn1.frame=CGRectMake(30, 30, 300, 30);6//设置按钮的⽂字,状态有好⼏种常⽤的时Normal和Highlighted(点击时状态),可CMD+点击查看7 [btn1 setTitle:@"点我啊!" forState:UIControlStateNormal];8//设置点击时的⽂本9 [btn1 setTitle:@"我被点了!" forState:UIControlStateHighlighted];10//设置⽂字颜⾊11 [btn1 setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];12 [btn1 setTitleColor:[UIColor yellowColor] forState:UIControlStateHighlighted];13//设置点击时按钮背景颜⾊,呃,完全不起作⽤,即⽆效果14 [btn1 setTintColor:[UIColor purpleColor]];15//点击时按钮发光,就是在按钮中间发亮光,这个有效果16 btn1.showsTouchWhenHighlighted=YES;17//设置tag标签,唯⼀标记⽤,可⽤于分辨是哪个按钮控件18 btn1.tag=1;19//设置背景颜⾊20 btn1.backgroundColor=[UIColor redColor];21//现在⾼版本的iOS⾥这个⽅法会让⼈抓狂,因为我们发现,不设置背景时,圆⾓按钮没有边框,所以上⾯设置frame其实意义不⼤22//设置了背景或者图⽚后,背景是矩形,说好的圆⾓呢?坑爹呢!23//所以现在⼤多数开发都是⽤UIButtonTypeCustom,⽽不是UIButtonTypeRoundedRect2425//最重要的添加触发事件⽤户交互26//self是指调⽤哪个对象的⽅法27//btnClick:是调⽤的⽅法,btnClick和btnClick:不⼀样,后者表⽰有参数28//UIControlEventTouchUpInside是触发事件,有很多,可以CMD+点击查看29//这⾥三个参数都可以随意更换,⽐如新建⼀个类Hi,在类⾥定义⼀个⽅法-(void)report;30//然后在此⽂件引⼊Hi.h头⽂件,在这⾥实例化⼀个对象hi1,然后就可以⽤hi1代替self,⽤report代替btnClick31//意思就是点击后调⽤的是hi1对象⾥⾯的report⽅法32 [btn1 addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];3334//再增加⼀个按钮35 UIButton *btn2=[UIButton buttonWithType:UIButtonTypeContactAdd];36 btn2.frame=CGRectMake(30, 80, 300, 30);37//这个增加联系⼈按钮其实也是⼀个矩形,和上⾯的⼀样,都是继承⾃UIControl,⽽后者⼜继承⾃UIView,所以是矩形38//虽然按钮就⼀点点⼤,但点击整个矩形区域都是相当于点击按钮39 btn2.backgroundColor=[UIColor greenColor];40//设置标签41 btn2.tag=2;42//增加事件:和btn1调⽤同⼀个⽅法,但问题是我们如果需要区分是哪个按钮的话,就需要⽤到tag,并且把控件作为参数传递给btnClick43 [btn2 addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];4445//再增加⼀个最常⽤的Custom按钮,其他按钮⾃⼰尝试46 UIButton *btn3=[UIButton buttonWithType:UIButtonTypeCustom];47 btn3.frame=CGRectMake(30 , 150 , 300, 90);48 btn3.backgroundColor=[UIColor redColor];49 btn3.tag=3;50 [btn3 addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];51//设置图⽚背景被点击时变暗(但没有图⽚背景时则⽆效果)52 btn3.adjustsImageWhenHighlighted=YES;53//所以,增加图⽚⽅式之⼀是增加背景图⽚,这个图⽚如⼩会被放⼤充满整个背景54 [btn3 setBackgroundImage:[UIImage imageNamed:@"logo.png"] forState:UIControlStateNormal];55//还有⼀种增加图⽚的⽅式,是在按钮上⾯加⽽不是背景,这种⽅式不会缩放图⽚,⽽且会居中56 [btn3 setImage:[UIImage imageNamed:@"logo.png"] forState:UIControlStateNormal];57//设置按钮⽂字,增加的⽂字会和setImage图⽚⼀并居中,图⽚在左边,⽂字紧随其后58 [btn3 setTitle:@"⾃定义按钮" forState:UIControlStateNormal];59//如果需要重新排版这个图⽚和按钮⽂字的位置,则需要重写UIButton类⾥⾯的两个函数,点击UIButton可查看60//- (CGRect)titleRectForContentRect:(CGRect)contentRect;⽂字相对于按钮的位置61//- (CGRect)imageRectForContentRect:(CGRect)contentRect;图⽚相对于按钮的位置62//第⼀步:可以重新定义⼀个UIButton类叫myButton,在.m⾥重写如下函数63//- (CGRect)titleRectForContentRect:(CGRect)contentRect{64// return CGRectMake(50, 25, 100, 40);65//}66//- (CGRect)imageRectForContentRect:(CGRect)contentRect{67// return CGRectMake(150, 25, 40, 40);68//}69//第⼆步,在这个⽂件中引⼊myButton.h头⽂件,然后实例化btn3的时候,⽤myButton,⽽不⽤原始的UIButton 70//myButton相当于稍微定制了⼀下原⽣的UIButton,所以前者实例出得对象也就具有定制效果71//这种⽅式仅对UIButtonTypeCustom有效,其他⽆效7273//把三个按钮显⽰出来74 [self.view addSubview:btn1];75 [self.view addSubview:btn2];76 [self.view addSubview:btn3];77 [super viewDidLoad];78// Do any additional setup after loading the view, typically from a nib.79 }80//增加⼀个参数,即由原先的-(void)btnClick{}变成如下81//因为我们知道这⾥都是按钮对象,所以可以⽤(UIButton *)sender,但通常我们⽤通⽤指针id82 -(void)btnClick:(id)sender{83//把传递过来的控件参数转化成按钮84 UIButton *btn=(UIButton *)sender;85//把btn.tag转化成整型86 NSLog(@"OMG,it is %i",(int)btn.tag);87 }。
EXT各个控件属性(5)
Extjs3.0新特性概要:* 问题修复.* 增强.变更:* Ext.Buttono Button目前已经是一个标准的 BoxComponent,并可以被layout management(布局管理器)托管. buttons的markup已经完全不同,在你实现自定义主题的时候需要一些变更。
以前按钮位置的设定被限制在button配置块,现在他们可以诶放在任何地方。
o Buttons 现在可以设定任意宽高,并且拥有增强的文本位置设定。
* Ext.data.Storeo baseParams 可以被load()方法的同名参数覆盖* Ext.debugo 增强的debug控制台* Ext.Elemento autoHeight() - 删除o alignTo() - “position” 参数变更o query() - “unique” 参数增加o focus() - “defer” 参数增加* Ext.EventManagero within() - 现在可以检查当前元素是否是目标元素或者是相关元素* Ext.formo Ext.form.TextField - 允许为空的校验行为被修改,详细信息参照Ext.form.TextFieldo Ext.form.FormPanel buttonAlign 不在复写Ext.Panel(’right’) 默认居中。
* Ext.grido renderer可能有更多的方式。
* youto Layout managers (布局管理器)现在自动隐藏或者收缩子组件当子组件可见或者展开。
这是避免大小计算在隐藏/收缩容器时遇到问题,并删除使用hideMode:”offsets”。
* Ext.lib.Ajaxo Ajax responses(Ajax响应). 作为Ext.lib.Ajax类的核心适配器已经变更为符合W3XMLHttpRequest标准。
The response object(响应对象)已经拥有 getResponseHeader 和getAllResponseHeaders 方法来更好的替代XHR对象。
MessageBox常用配置项
Buttons配置项:图标样式说明:这个panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件。
panel组件的配置参数的属性和方法,1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据。
2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false。
3.autoShow:设为ture显示设为"x-hidden"的元素,默认为false。
4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}],5.tbar:顶部条,显示在主体内,//代码:tbar:[{text:'顶部工具栏topToolbar'}],6.buttons:按钮集合,自动添加到footer中(footer参数,显示在主题外)//代码:buttons:[{text:"按钮位于footer"}]。
7.buttonAlign:footer 中按钮的位置,枚举值为:"left","right","center",默认为right。
8.collapsible:设为true,显示右上角的收缩按钮,默认为false。
9.draggable:true则可拖动,但需要你提供操作过程,默认为false.10.html:主体的内容11.id:id值,通过id可以找到这个组件,建议一般加上这个id值12.width:宽度13.height:高度13.title:标题14.titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.15.applyTo:(id)呈现在哪个html元素里面16.contentEl:(id)呈现哪个html元素里面,把el内的内容呈现17.renderTo:(id)呈现在哪个html元素里面特别说明:(applyTo,contentEl,renderTo这个三个参数个人理解为applyTo和RenderTo强调to 到html元素中,contentEl则是html元素到ext组件中去)。
Ext属性详细信息
Ext属性详细信息Ext.window属性详细信息Ext.Window扩展⾃Ext.Panel,其xtype值为window。
1、主要配置项closable:是否允许关闭窗⼝,默认为true。
closeAction:关闭窗⼝的动作,包括以下两种:close:从DOM删除窗⼝,销毁窗⼝及其所属组件,窗⼝不再可⽤,重新显⽰需要调⽤show⽅法。
此为默认值。
hide:通过设置可见性隐藏窗⼝,窗⼝还可⽤,调⽤show⽅法后重新显⽰。
constrain:是否约束窗⼝只能在容器内移动,默认为false。
窗⼝默认渲染到document.body。
constrainHeader:是否约束窗⼝头部只能在容器内移动,默认为false。
draggable:是否可拖曳,默认为true。
resizable:是否可改变窗⼝的⼤⼩,默认为true。
modal:是否为模式窗⼝,默认为false。
maximizable:是否可最⼤化窗⼝,默认为false。
maximized:是否在初始化时最⼤化显⽰窗⼝,默认为false。
x:窗⼝的X坐标值。
y:窗⼝的Y坐标值。
manager:WindowGroup的引⽤。
expandOnShow:是否在窗⼝显⽰时展开它,默认为true。
当取值为false时,collapsed取值为true时,窗⼝初始显⽰时收缩。
minimizable:是否可最⼩化窗⼝,默认为false。
需要⾃定义最⼩化⾏为。
defaultButton:当窗⼝获得焦点时,默认获得焦点的按钮。
plain:主体背景是否透明,默认为false。
2、主要⽅法:show( [String/Element animateTarget], [Function callback], [Object scope] ):显⽰窗⼝。
hide( [String/Element animateTarget], [Function callback], [Object scope] ):隐藏窗⼝。
EXT表单组件常见属性介绍(二)
EXT表单组件常见属性介绍(二)EXT表单组件常见属性介绍(二)文章分类:Web前端1、Ext.form.Hidden2、bel配置项:html:text:3、Ext.form.TextField配置项:allowBlank:是否允许为空,默认为trueblankT ext:空验证失败后显示的提示信息emptyT ext:在一个空字段中默认显示的信息grow:字段是否自动伸展和收缩,默认为falsegrowMin:收缩的最小宽度growMax:伸展的最大宽度inputType:字段类型:默认为textmaskRe:用于过滤不匹配字符输入的正则表达式maxLength:字段允许输入的最大长度maxLengthT ext:最大长度验证失败后显示的提示信息minLength:字段允许输入的最小长度minLengthText:最小长度验证失败后显示的提示信息regex:正则表达式regexText:正则表达式验证失败后显示的提示信息vtype:验证类型的名字alpha:限制只能输入字母alphanum:限制只能输入字母和数字emailurlvtypeText:验证失败时的提示信息validator:自定义验证函数selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false4、Ext.form.TextArea配置项:preventScrollbars:是否禁止出现滚动条,默认为false5、Ext.form.NumberField配置项:allowDecimals:是否允许输入小数,默认为trueallowNegative:是否允许输入负数,默认为truebaseChars:输入的有效数字集合,默认为'0123456789'decimalPrecision:数字的精度,默认保留小数点后2位decimalSeparator:十进制分隔符,默认为'.'maxValue:允许输入的最大数值maxText:超过最大值之后的提示信息minValue:允许输入的最小数值minT ext:超过最小值之后的提示信息nanText:输入非有效数值之后的提示信息6、Ext.form.Checkbox配置项:boxLabel:复选框的文字描述checked:复选框是否被选择,默认为falsehandler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checkedinputValue:方法:getValue():返回复选框的checked状态setValue( Boolean/String checked ):7、Ext.form.CheckboxGroup配置项:allowBlank:是否允许不选择,默认为trueblankT ext:columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)items:对象数组vertical:是否垂直方向显示对象,默认为false8、Ext.form.Radio方法:getGroupValue():setValue( value {String/Boolean} ):9、Ext.form.RadioGroup配置项:allowBlank:blankT ext:10、boBox配置项:displayField:被显示在下拉框中的字段名editable:是否可编辑,默认为trueforceSelection:输入值是否严格为待选列表中存在的值。
EXT各个控件属性(6)
ext3.1 全选/反选/取消/临时数据集1.定义数据集/* 默认源字符串*/var Regular_Data = {totalProperty:2,root:[]}/* 临时数据源*/var Regular_store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(),reader: new Ext.data.JsonReader({root: 'root',totalProperty: 'totalProperty',fields: [{name: 'Regular_name', type: 'string'}]})});Regular_store.loadData(Regular_Data);2.临时数据集添加数据var Data_1001 = Ext.data.Record.create([{name: 'Regular_name'}]);var a = SmRegulartree.getSelections();Ext.each( a,function (item,index,allItems){var foundItem = Regular_store.find('Regular_name', );if (foundItem == -1) {Regular_store.add(new Data_1001({Regular_name:item.data['name']}));}});3.全选反选取消bbar :[{text:'全选',handler:function(){var count = Regular_store.getCount();if(count>0){var a= new Array();for(var i=0;i<count;i++){a[i]=i;}}regularg1.getSelectionModel().selectRows(a);}},'-',{text:'反选',handler:function(){var trims = "";var str = "";var id = "";var count = Regular_store.getCount();if(count>0){var a= new Array();for(var i=0;i<count;i++){a[i]=Regular_store.data.items[i].id+"-"+i;}}var list2 = regularg1.selModel.getSelections();for(var k=0; k<a.length; k++){str = a[k].split("-");for (var j=0; j<list2.length; j++){id = list2[j].id.split("-");if(str[2]==id[2]){break;}}if (j<list2.length){continue;}if (trims!='') {trims+=',';}trims+=k.toString();}regularg1.getSelectionModel().selectRows(trims);//Ext.MessageBox.alert('提示', result);}},'-',{text:'取消',handler:function(){regularg1.getSelectionModel().clearSelections();}}]grid表格的操作行选择模式:Js代码var rowcount = grid.getSelectionNode().getSelections();var rowcount = grid.getSelectionNode().getSelections();可以获取全部选中的记录,得到的rowcount将是一个Array,比如想获取sex列的数据,语句如下Js代码v ar strsex = rowcount*i+.get(‘sex’);var strsex = rowcount*i+.get(‘sex’);单元格选择模式如果在GridPanel的配置属性增加sm属性如下Js代码sm:new Ext.grid.CellSelectionModel();sm:new Ext.grid.CellSelectionModel();则表格的选择模式为单元格选择模式。
EXT表单组件常见属性介绍(三)
EXT表单组件常见属性介绍(三)本范例展⽰如何使⽤表单的各种组件。
下拉框组件展⽰了5种使⽤范例:普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";3. Ext.QuickTips.init();4. Ext.form.Field.prototype.msgTarget = "qtip";5.6. //component7. var hiddenField = new Ext.form.Hidden({8. name: "hiddenField",9. value: "1"10. });11.12. var usernameField = new Ext.form.TextField({13. name: "username",14. fieldLabel: "⽤户名",15. allowBlank: true,16. blankText: "请输⼊⽤户名!"17. });18.19. var pwdField = new Ext.form.TextField({20. name: "password",21. fieldLabel: "密码",22. allowBlank: true,23. blankText: "请输⼊密码!",24. inputType: "password"25. });26.27. var ageField = new Ext.form.NumberField({28. name: "age",29. allowBlank: true,30. blankText: "请输⼊年龄!",31. fieldLabel: "年龄",32. allowDecimals: false,33. allowNegative: false,34. minValue: 18,35. minText: "年龄不能少于18",36. maxValue: 100,37. maxText: "年龄不能⼤于100"38. });39.40. var love1 = new Ext.form.Checkbox({41. name: "love1",42. boxLabel: "打球",43. inputValue: "1"44. });45.46. var love2 = new Ext.form.Checkbox({47. name: "love2",48. boxLabel: "游泳",49. inputValue: "2"50. });51.52. var love3 = new Ext.form.Checkbox({53. name: "love3",54. boxLabel: "登⼭",55. inputValue: "3"56. });57.58. var loveGroup = new Ext.form.CheckboxGroup({59. name: "love",60. columns: [80, 80, 1.0],61. fieldLabel: "爱好",62. items: [love1, love2, love3]63. });64.65. var sex1 = new Ext.form.Radio({66. name: "sex1",67. boxLabel: "男",68. inputValue: "1"69. });70.71. var sex2 = new Ext.form.Radio({72. name: "sex1",73. boxLabel: "⼥",74. inputValue: "0"75. });76.77. var sexGroup = new Ext.form.RadioGroup({78. name: "sex",79. columns: [80, 1.0],80. fieldLabel: "性别",81. items: [sex1, sex2]82. });83.84. //本地数据源的组合框85. var store = new Ext.data.SimpleStore({86. fields: ["code", "name"],87. data: [88. ["1", "北京"],89. ["5", "上海"],90. ["4", "⼴东"]91. ]92. });93. var cmbProvince = new boBox({94. id: "cmbProvince",95. hiddenName: "province.id",96. fieldLabel: "省份",97. resizable: true,98. editable: false,99. width: 100,100. emptyText: "请选择...",101. store: store,102. valueField: "code",103. displayField: "name",104. triggerAction: "all",105. mode: "local"106. });107.108. //远程数据源的组合框109. var store2 = new Ext.data.SimpleStore({110. fields: ["name"],111. proxy: new Ext.data.HttpProxy({112. url: "../testForm!loadData.action"113. })114. });115.116. var cmbManager = new boBox({117. hiddenName: "manager",118. fieldLabel: "经理",119. editable: false,120. triggerAction: "all",121. mode: "local",122. maxHeight: 200,123. store: new Ext.data.SimpleStore({fields:[],data:[[]]}),124. onSelect: Ext.emptyFn,125. tpl: "<tpl for='.'><div id='tree'></div></tpl>"126. });127.128. var root = new Ext.tree.TreeNode({129. nodeId: 1,130. text: "根节点",131. expanded: true132. });133. root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true})); 134. root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true})); 135.136. var tree = new Ext.tree.TreePanel({137. root: root,138. border: false,139. autoHeight: true,140. autoScroll: true141. });142.143. tree.on("click", function(node){144. if(!node.isLeaf()) return; //只能选择叶节点145. //下拉框的隐藏值146. if(cmbManager.hiddenField){147. cmbManager.hiddenField.value = node.attributes.nodeId; 148. }149. cmbManager.setRawValue(node.text); //下拉框的显⽰值150. cmbManager.collapse(); //折叠下拉框151. });152.153. cmbManager.on("expand", function(){154. tree.render("tree");155. });156.157. //分页远程数据源的组合框158. var store3 = new Ext.data.JsonStore({159. url: "../testForm!loadData3.action",160. totalProperty: "totalNum",161. root: "books",162. fields: ["id", "name"]163. });164. var cmbBook = new boBox({165. hiddenName: "books",166. fieldLabel: "书籍",167. store: store3,168. valueField: "name",169. displayField: "name",170. triggerAction: "all",171. mode: "remote",172. queryParam: "books",173. loadingText: "正在装载数据...",174. width: 180,175. minChars: 1,176. editable: false,177. listWidth: 250,178. pageSize: 3179. });180.181. //HTML标准组件182. var cmbPass = new boBox({183. hiddenName: "status",184. fieldLabel: "是否有效",185. triggerAction: "all",186. editable: false,187. width: 100,188. transform: "isPass",189. lazyRender: true190. });191.192. var cmbTimes = new Ext.form.TimeField({193. hiddenName: "time",194. fieldLabel: "时间",195. minValue: "09:00",196. minText: "所选时间应⼤于{0}",197. maxValue: "18:00",198. maxText: "所选时间应⼩于{0}",199. format: "H时i分",200. increment: 30,201. invalidText: "时间格式⽆效!",202. maxHeight: 200,203. width: 100,204. value: "09时00分",205. editable: false206. });207.208. var cmbMonths = new Ext.ux.MultiSelectCombo({209. hiddenName: "months",210. fieldLabel: "⽉份",211. maxHeight: 200,212. editable: false,213. store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]], 214. mode: "local",215. width: 180,216. maxItemsCount: 3,217. maxItemsCountText: "最多只能选择三个选项!"218. });219.220. var cmbBirths = new Ext.form.DateField({221. name: "births",222. fieldLabel: "出⽣⽇期",223. disabledDays: [0,6],224. disabledDaysText: "禁⽌选择周末!",225. width: 100,226. readOnly: true,227. format: "Y-m-d",228. invalidText: "不是有效的⽇期值!"229. });230.231. var fieldSet1 = new Ext.form.FieldSet({232. title: "下拉框",233. checkboxName: "fieldSet1",234. checkboxToggle: true,235. autoHeight: true,236. layout: "table",237. layoutConfig: {238. columns: 3239. },240. defaults: {241. style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",242. layout:"form",243. labelAlign: "right"244. },245. items: [246. {rowspan:1, colspan:1, items:[cmbProvince]},247. {rowspan:1, colspan:1, items:[cmbManager]},248. {rowspan:1, colspan:1, items:[cmbBook]},249. {rowspan:1, colspan:1, items:[cmbPass]},250. {rowspan:1, colspan:1, items:[cmbTimes]},251. {rowspan:1, colspan:1, items:[cmbMonths]},252. {rowspan:1, colspan:1, items:[cmbBirths]}]253. });254.255. var remarksField = new Ext.form.TextArea({256. name: "remarks",257. fieldLabel: "备注",258. width: 400,259. height: 80260. });261.262. var form = new Ext.form.FormPanel({263. id: "frmAddUser",264. title: "新增⽤户",265. autoWidth: true,266. autoHeight: true,267. frame: true,268. renderTo: Ext.getBody(),269. labelWidth: 70,270. tbar: toolbar,271. items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup, 272. fieldSet1, remarksField],273. url: "../testForm!ajaxSubmitForm.action"274. });275. });Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";。
button的用法和例句 -回复
button的用法和例句-回复Button的用法和例句Button(按钮)是一种常见的用户界面控件,用于在计算机程序中触发特定操作。
它通常以可点击的形式呈现,通过单击按钮来执行与之关联的函数或命令。
本文将详细介绍按钮的用法和给出一些实际例句,以帮助读者更好地理解和应用这一控件。
一、Button的基本用法1. Button控件的创建Button控件可以在各种编程语言和开发框架中创建,如Java、C++、Python、HTML等。
在大多数情况下,使用相应的代码和库来创建按钮控件并定义其外观和行为。
以下是在Python中使用Tkinter库创建一个简单的按钮控件的示例:from tkinter import *root = Tk() # 创建根窗口button = Button(root, text="点击我") # 创建按钮button.pack() # 将按钮添加到窗口中root.mainloop() # 进入主循环2. Button控件的属性设置通过设置不同的属性,可以定制按钮的外观和行为。
以下是一些常见的Button属性:- text:按钮上显示的文本。
- width、height:按钮的宽度和高度。
- font:按钮上文本的字体和大小。
- background(bg)、foreground(fg):按钮的背景色和前景色。
- command:按钮被点击时执行的函数或命令。
- state:按钮的状态,可以是"normal"(默认)、"disabled"或"active"。
例如,可以使用以下代码设置按钮的一些属性:button = Button(root, text="点击我", width=10, height=2,font=("Arial", 12),bg="blue", fg="white", command=click_function, state="normal")3. Button控件的事件绑定除了定义按钮的属性外,还可以为按钮绑定各种事件,如点击事件、鼠标移入事件等。
ExtJs4 笔记(5) Ext.Button 按钮
ExtJs4 笔记(5)Ext.Button 按钮
从本篇开始讲基础控件,ExtJs对所有的UI控件都有它自己的一套封装。
本篇要讲到的是ExtJs的按钮。
主要包括按钮事件、带分割线、带图标、带菜单的按钮,下拉选项式按钮和按钮组合等。
我们先看看效果图:
预览
如下是用到的html:
一、基本按钮,三种方式实现按钮事件
这里介绍了最基本的按钮生成代码,第一个按钮具备弹起和按下两种状态,三个按钮分别别设置成三种大小。
每个按钮的单击事件都是通过一种新的实现方式。
下面看看Js代码:
二、带图标菜单
按钮可以带图标和菜单,我们可以在配置项里面配置:
三、带分割线的按钮
注意的地方:分割线的按钮来自于类Ext.SplitButton
四、菜单式按钮
按钮式菜单Ext.CycleButton与下拉不同的是,它具备选中状态,当选中下拉项时,选中文本会相应变化。
四、按钮组合
定义了一组按钮,并可以控制按钮排版。
出处:[Lipan](/lipan/)。
EXT表单组件常见属性介绍(一)
EXT表单组件常见属性介绍(一)EXT表单组件常见属性介绍(一)文章分类:Web前端1、Ext.form.Action配置项:success:执行成功后回调的函数,包括两个参数:form和actionfailure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包括GET、POSTparams:传递到请求中的参数url:动作提交的路径waitMsg:动作执行时显示的等待信息属性:Action.CLIENT_INVALID:客户端验证错误Action.CONNECT_FAILURE:通信错误Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回Action.SERVER_INVALID:服务端验证错误failureType:错误类型result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'}type:动作类型,可选值有submit和loadExt.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data属性2、Ext.form.BasicForm配置项:baseParams:传递到请求中的参数method:表单的提交方式,有效值包括GET、POSTurl:表单默认的提交路径fileUpload:表单是否进行文件上传timeout:表单动作的超时时间,默认为30秒trackResetOnLoad:是否在表单初次创建时清楚数据方法:doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选项包括:url:动作提交的路径method:表单的提交方式,有效值包括GET、POSTparams:传递到请求中的参数headers:success:执行成功后回调的函数,包括两个参数:form和actionfailure:执行失败后回调的函数,包括两个参数:form和action clientValidation:是否客户端验证clearInvalid():清除表单中所有的无效验证信息findField( String id ):查找表单字段getValues( [Boolean asString] ):isDirty():表单数据是否被更改过isValid():客户端验证是否成功load( Object options ):执行表单读取动作loadRecord( Record record ):从一个数据记录中读取数据到表单中markInvalid( Array/Object errors ):成批设置表单字段为验证无效reset():重置表单setValues( Array/Object values ):成批设置表单字段值submit( Object options ):执行表单提交动作updateRecord( Record record ):持久化表单数据到记录集中3、Ext.form.FormPanel配置项:items:一个元素或元素数组buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为centerlabelWidth:表单标签的宽度labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为leftlabelSeparator:字段标签与字段之间的分隔符,默认为':'minButtonWidth:按钮的最小宽度,默认为75方法:getForm() : Ext.form.BasicFormload( Object options )startMonitoring()stopMonitoring()4、Ext.form.Field配置项:name:字段名value:字段的初始化值disabled:字段是否不可用,默认为falsefieldLabel:字段标签说明hideLabel:隐藏字段标签,默认为falselabelSeparator:字段标签与字段之间的分隔符,默认为':'labelStyle:字段标签样式inputType:默认为textinvalidClass:默认为x-form-invalidinvalidText:字段非法文本提示msgTarget:错误信息显示的位置,默认为qtipqtip:显示一个浮动的提示信息title:显示一个浏览器的浮动提示信息under:在字段下方显示一个提示信息side:在字段右边显示一个提示信息readOnly:字段是否只读,默认为false validateOnBlur:字段在失去焦点时被验证,默认为true 方法:clearInvalid():getRawValue()setRawValue( Mixed value )getValue()setValue( Mixed value )isDirty():字段值在装载后是否被修改过isValid( Boolean preventMark ):当前字段值是否合法markInvalid( [String msg] )validate()reset()。
wpf button 参数
wpf button 参数
在WPF中,Button控件具有许多可用的参数来自定义其行为和外观。
以下是一些常用的Button控件参数:
1. Content(内容): 用于设置按钮上显示的文本或其他内容。
可以是简单的文本,也可以是复杂的XAML代码。
2. Command(命令): 用于指定按钮所关联的命令。
通过绑定Command属性,可以将按钮与应用程序的后台逻辑或ViewModel中的命令关联起来。
3. CommandParameter(命令参数): 用于向关联的命令传递参数值。
通过设置CommandParameter属性,可以将特定的值传递给与按钮关联的命令。
4. Click(点击事件): 一个用于处理按钮点击事件的事件处理程序。
可以在XAML中使用Button元素的Click属性,或者在后台代码中订阅按钮的Click 事件来实现。
5. IsEnabled(启用状态): 用于设置按钮是否可用。
可以设置为true或false,以启用或禁用按钮的交互。
6. Style(样式): 可以通过Style属性来自定义按钮的外观。
可以使用自定义的样式或者在资源字典中定义的样式。
7. Tooltip(工具提示): 用于在用户将鼠标悬停在按钮上时显示的文本提示。
可以通过设置Tooltip属性来设置工具提示内容。
这些只是一些常见的Button控件参数,您还可以根据具体需要进一步了解和使用WPF中Button控件的其他属性和事件。
ExtJS Button(按钮)
实用ExtJS教程100例-022:ExtJS Button(按钮)用法发布时间:2013-12-17 10:30 浏览量:454今天这篇内容将介绍ExtJS中Button的用法。
更多的ExtJS教程,点击进入>>《ExtJS 教程目录》,持续更新中……简单的按钮使用ExtJS创建一个按钮的代码非常简单:{xtype: "button",id: "btn1",text: "小按钮"}使用scale绘制不同大小的按钮ExtJS提供了三种大小的按钮,通过配置项scale实现绘制不同大小的按钮,scale的值有:∙small:小按钮,默认值∙medium:中等按钮∙large:大按钮接下来我们用scale来实现三种不同大小的按钮:{xtype: "button",id: "btn1",text: "小按钮"},{xtype: "button",id: "btn2",text: "中按钮",scale: "medium"},{xtype: "button",id: "btn3",text: "大按钮",scale: "large"}第一个按钮为小按钮,由于small为默认值,所以我们可以不写。
为按钮添加事件ExtJS为按钮添加事件的方法有三种,分别是:∙使用handler添加事件∙使用listeners添加事件∙动态绑定事件接下来我们将分别进行演示使用handler添加事件{xtype: "button",id: "btn1",text: "小按钮",handler: function () {Ext.MessageBox.alert("提示", "通过handler配置项添加的事件"); }}使用listeners添加事件{xtype: "button",id: "btn2",text: "中按钮",scale: "medium",listeners: {click: function () {Ext.MessageBox.alert("提示", "通过listeners配置项添加的事件");}}}动态绑定事件Ext.get("btn3").on("click", function () {Ext.MessageBox.alert("提示", "通过on方法动态添加的事件"); });为Button添加menubutton可以包含一个菜单列表,在点击的时候显示出来:我们来看看代码:{xtype: "button",id: "btnAction",text: "操作",iconCls: "qicon-user",arrowAlign: "right",menu: [{ text: "新增", iconCls: "qicon-add" },{ text: "修改", iconCls: "qicon-edit" },{ text: "保存", iconCls: "qicon-save" },"-",{ text: "删除", iconCls: "qicon-remove" }]}iconCls配置项用来设置icon图标的css属性arrowAlign配置项用来设置下拉列表箭头的位置,一般为right或bottomenableToggle配置项和toggle事件enableToggle配置项用来控制按钮的按下状态,当按钮按下的时候,它的样式将会保持:enableToggle默认为false,设置为true将开始toggle功能。
EXT各个控件属性(7)
1:按钮的禁用于否:属性: disabled : true, 初始化时为禁用Ext.getCmp('updateb').disable(); //禁用按钮Ext.getCmp('deleteb').enable(); //恢复可用2:面板Ext.getCmp('rulepanel').setVisible(true); //使面板可见Ext.getCmp('rulepanel').setVisible(false); //使面板不可见Ext.getCmp('rulepanel').collapse(true); //使rulepanel收缩Ext.getCmp('rulepanel').expand(true); //使rulepanel展开3:checkbox属性:inputValue 类似其valueview plaincopy to clipboardprint?var popSelect = Ext.getCmp('panel3').findByType('checkbox'); for(var i=0,j=0;i<popSelect.length;i++){if(popSelect[i].checked){pop[j++] = popSelect[i].inputValue;if(popSelect[i].inputValue=='103'){selectorder = Ext.getCmp('ruleid').getValue();}}}var popSelect = Ext.getCmp('panel3').findByType('checkbox');for(var i=0,j=0;i<popSelect.length;i++){if(popSelect[i].checked){pop[j++] = popSelect[i].inputValue;if(popSelect[i].inputValue=='103'){selectorder = Ext.getCmp('ruleid').getValue();}}}body : Ext.Element它是指向panel的body的Element引用。
EXT各个控件属性(3)
一、如何同步调用Ajax远程数据//同步方式,API不直接提供,获取XHR的conn的引用即可var url = "myApp/getUserList.do";var conn = new Ext.data.Connection()conn;conn.open("POST", url, false);conn.send(null);var json = Ext.decode(conn.responseText);// 异步方式,这是常用的方式new Ext.data.Connection().request({// 此即是Ext和Struts交互的关键url: 'myApp/getUserList.do',params: {id: 10001,name: '测试'},failure: requestFailed,success: requestSuccessful}// 同步方式,API不直接提供,获取XHR的conn的引用即可var url = "myApp/getUserList.do"; var conn = new Ext.data.Connection()conn; conn.open("POST", url, false); conn.send(null); var json = Ext.decode(conn.responseText); // 异步方式,这是常用的方式newExt.data.Connection().request({ // 此即是Ext和Struts交互的关键url: 'myApp/getUserList.do', params: {id: 10001,name: '测试'}, failure: requestFailed, success: requestSuccessful }二、全局性、强制指定HTTP方法(动词)view plaincopy to clipboardprint?Ext.Ajax.on('beforerequest', function(){arguments[1].method = 'GET' // or 'POST'\'PUT'\'DELETE'});Ext.Ajax.on('beforerequest', function(){ arguments[1].method = 'GET' // or'POST'\'PUT'\'DELETE' });三、怎么对form中的textfield赋值view plaincopy to clipboardprint?Ext.getCmp("TextField_id").setValue("value");Ext.getCmp("TextField_id").setValue("value");四、布局一些已知的限制'fit'的layout中items只能放一个子组件,即使放多个,也只会显示第一个。
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码_
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码_先给大家说下什么是extext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了, 主要包括data,widget,form,grid,dd,menu,其中最强大的应当算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以依据需要按需加载您想要的类库就可以了.主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括全部的类库,您可以依据需要进行删减.官方网站供应这一接口),在引用ext类库的时候.这三个文件必不行少.它供应了丰富的,特别美丽的外观体验,成为众多界面层开发人员的追捧!其核心的组件基本掩盖了我们构建富客户端的常用的组件。
从 Ext 2开头,商业版(针对那些以盈利为目的的开发方)要收费了。
这可能会影响一些他的应用前景。
目前的最新版本为3.2.21.创建一个添加按钮,listeners大事中button的单击大事,id:'button1',xtype : 'button',margin : '6',text : '添加',name : 'btn-add',iconCls: 'btn-add',listeners:{click:function(){var r = Ext.create('ItemGridMdl', { //…………});//要插入表格的数据Ext.getCmp('grid1').getStore().insert(Ext.getCmp('grid1').getStore().getCount(), r);//在表格的最终添加一行cellEditing.cancelEdit();cellEditing.startEditByPosition({//要编辑的表格中的光标消失的位置row : Ext.getCmp('grid1').getStore().getCount()-1, column : 1});}}2.调用这个button按钮的方法Ext.getCmp('fbutton').fireEvent('click');3.grid表格中plugins:属性的配置:plugins:[cellEditing=Ext.create('Ext.grid.plugin.CellEditing ', {clicksToEdit:1,listeners: {edit: function(editor,e) {}}})],...。
EXT 按钮事件
在EXT中,当我们要为按钮点击添加处理function的时候,可以看到一般人的实现分成2类:1.使用onClick: function xx()2.使用handler: function xx()完成后,我们会发现,无论用哪一种实现,再点击按钮时都能触发xx这个function. 那么有人就会考虑,为什么EXT提供了2个功能一样的东西,或者说这2种方式有哪些细微的不同?首先有一点需要明确,在Button中,onClick是一个方法,而handler是一个配置项。
接着,为了明确这2种方式本质上的区别,我们查看Button的源码:// privateonClick : function(e){......一系列其他无关的代码if(this.handler){//this.el.removeClass('x-btn-over');this.handler.call(this.scope || this, this, e);}}},源码中可以看到,handler在onClick的实现中被调用。
进一步分析,我们点击按钮的时候,又是如何会调用onClick的?看下面一段源码:[js]view plaincopy1.// private2. initButtonEl : function(btn, btnEl){3. ......一系列无关的代码4.if(this.repeat){5. ......一系列无关的代码6.this.mon(repeater, 'click', this.onRepeatClick, this);7. }else{8.this.mon(btn, this.clickEvent, this.onClick, this);9. }10. },在初始化button的el的时候,Ext通过this.mon将 'click'事件和onClick绑定在了一起。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
var buttonName = new Ext.Button({
id:"buttonName",
text:"Button组件基本用法",
tooltip:"提示信息:Button组件基本用法",
//提示信息,如果需要显示提示信息,需要使用Ext.QuickTips.init();
tooltipType:"title", //定义显示提示信息的类型,有qtip和title两种方式,默认是qtip
type:"button", //按钮类型:可以是submit, reset or button 默认是button
autoShow:true, //默认false,自动显示
hidden:false, //默认false,是否隐藏
hideMode:"offsets", //隐藏方式,默认display,可以取值:display,offsets,visibility
cls:"cssButton", //样式定义,默认""
disabled:false, //是否可用,默认false
disabledClass:"", //默认x-item-disabled
enableToggle:true, //默认false
pressed:false, //设置按钮是否已经被按下,默认是false
html:"Ext",//默认""
handleMouseEvents:true, //默认true,如果为false,那么mouseout mouseover就不能被触发//x:number,y:number,在容器中的x,y坐标
handler:function(){Ext.Msg.alert('提示消息框','测试Button组件:handler事件!');},//添加事件
listeners:{//添加监听事件可以结合handler测试这两个事件哪个最先执行
"click":function(){
Ext.Msg.alert('提示消息框','测试Button组件:listeners事件!');
Ext. getCmp_r("buttonName").hide();//隐藏按钮
}
},
cls:"x-btn-text-icon",//添加图标前需要设置该属性
icon:"house.gif", //图标的地址
//plugins : Object/Array扩展插件时使用
repeat:false, //默认false ,如果为true,需要设置mouseover事件
renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID
});
配置:
1. id:"buttonName",
2. text:"Button组件基本用法",
3. tooltip:"提示信息:Button组件基本用法", //提示信息,如果需要显示提示信息,需要使用
Ext.QuickTips.init();
4. ooltipType:"title", //定义显示提示信息的类型,有qtip和title两种方式,默认是qtip
5. ype:"button", //按钮类型:可以是submit, reset or button 默认是button
6. autoShow:true, //默认false,自动显示
7. hidden:false, //默认false,是否隐藏
8. hideMode:"offsets", //隐藏方式,默认display,可以取值:display,offsets,visibility
9. cls:"cssButton", //样式定义,默认""
10. disabled:false, //是否可用,默认false
11. disabledClass:"", //默认x-item-disabled
12. enableToggle:true, //默认false
13. pressed:false, //设置按钮是否已经被按下,默认是false
14. html:"Ext",//默认""
15. handleMouseEvents:true, //默认true,如果为false,那么mouseout mouseover就不能被触发
16. x:number,y:number,在容器中的x,y坐标
17. handler:function(){Ext.Msg.alert('提示消息框','测试Button组件:handler事件!');},//添加事件
18. listeners:{//添加监听事件可以结合handler测试这两个事件哪个最先执行
"click":function(){
Ext.Msg.alert('提示消息框','测试Button组件:listeners事件!');
Ext. getCmp_r("buttonName").hide();//隐藏按钮
}
},
19. cls:"x-btn-text-icon",//添加图标前需要设置该属性
20. icon:"house.gif", //图标的地址
21. plugins : Object/Array扩展插件时使用
22. repeat:false, //默认false ,如果为true,需要设置mouseover事件
23. renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID
常用方法:
1. enable();激活按钮
2. disable();禁用按钮
3. destroy();消灭按钮
4. focus();按钮获取焦点
5. getText_r();获取按钮上的文本
6. hide();隐藏按钮
7. show();显示按钮
8. setText( String text );设置按钮上的文本
9. setVisible( Boolean visible );设置按钮是否隐藏
10. buttonName.purgeListeners();
//使用该方法,意思是清除所有的监听事件,所以当执行该句后就不会再执行listeners的click事件了。
按钮就不会被隐藏了。
11. buttonName.setHandler(fn);
//也可以通过这种方式设置handler事件:
buttonName.setHandler(function(){Ext.Msg.alert('提示消息框','测试Button组件:setHandler事件!');});
12. buttonName.on(eventName,fn);
//下面的事件可以自己测试下
buttonName.on("click",function(){
Ext.Msg.alert('提示消息框','测试Button组件:click事件!');
});
buttonName.on("mouseover",function(){
Ext.Msg.alert('提示消息框','测试Button组件:mouseover事件!');
});
buttonName.on("mouseout",function(){
Ext.Msg.alert('提示消息框','测试Button组件:mouseout事件!');
});
mouseout : ( Button this, Event e ) ;
mouseover : ( Button this, Event e );
beforedestroy : ( ponent this ) ;
beforehide : ( ponent this ) ;
beforerender : ( ponent this )
beforeshow : ( ponent this )
click : ( Button this, EventObject e )
destroy : ( ponent this )
disable : ( ponent this )
enable : ( ponent this )
hide : ( ponent this )
show : ( ponent this )
render : ( ponent this )。