网站建设提成,企业网站建设_秒搜,wordpress点击文章跳转外站,全球最火的十大游戏序言#xff1a; 1.本文摘自网络#xff0c;看控件命名像是4.0以前的版本#xff0c;但控件属性配置仍然可以借鉴#xff08;不足之处#xff0c;以后项目用到时再续完善#xff09;。 Ext.form.TimeField: 配置项#xff1a; maxValue#xff1a;列表中允许… 序言 1.本文摘自网络看控件命名像是4.0以前的版本但控件属性配置仍然可以借鉴不足之处以后项目用到时再续完善。 Ext.form.TimeField: 配置项 maxValue列表中允许的最大时间 maxText当时间大于最大值时的错误提示信息 minValue列表中允许的最小时间 minText当时间小于最小值时的错误提示信息 increment两个相邻选项间的时间间隔默认为15分钟 format显示格式默认为“g:i A”。一般使用“H:i:s” H带前缀0的24小时 i带前缀0的分钟 s带前缀0的秒 invalidText当时间值非法时显示的提示信息 altFormats多个时间输入格式组成的字符串不同的格式之间使用“|”进行分割 Ext.form.FieldSet animCollapse动画折叠默认为false checkboxToggle设置是否显示字段集的checkbox选择框默认为false checkboxName指定字段集中用于展开或隐藏字段集面板的checkbox的名字该属性只有在checkboxToggle为true时生效 labelWidth字段标签的宽度可以级联到子容器 layout布局默认为form Ext.form.DateFied maxValue允许选择的最大日期 maxText当日期大于最大值时的错误提示信息 minValue允许选择的最小时间 minText当日期小于最小值时的错误提示信息 format日期显示格式默认为“m/d/y”一般使用“Y-m-d” Y四位年份 m带前缀0的月份 d带前缀0的日期 y两位年份 n不带前缀0的月份 j不带前缀0的日期 w星期的数字0表示星期日1代表星期一 showToday是否显示今天按钮默认为true altFormats多个日期输入格式组成的字符串不同的格式之间使用“|”进行分割默认值为m/d/Y|n/j/Y|n/j/y|m/j /y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d disabledDates禁止选择的日期组成的数组 disabledDatesText选择禁选日期时显示的提示信息 disabledDays禁止选择的星期组成的数组0代表星期日1代表星期一 disabledDaysText选择禁选星期时显示的提示信息 invalidText当日期值非法时显示的提示信息 方法 getValue()取得日期值 Ext.form.ComboBox displayField被显示在下拉框中的字段名 editable是否可编辑默认为true forceSelection输入值是否严格为待选列表中存在的值。如果输入不存在的值会自动选择第一个最接近的值。 hiddenName隐藏字段的名字如果提供该参数则一个隐藏字段将被创建用来存储所选值当表单提交时在服务器端可以通过该名字取得列表中的所选值 listWidth下拉列表的宽度 minListWidth下拉列表的最小宽度默认为70像素 loadingText当下拉框加载数据时显示的提示信息只有当moderemote时才会生效 maxHeight下拉列表框的最大高度默认为300像素 minChars下拉列表框自动选择前用户需要输入的最小字符数量。moderemote默认为4modelocal默认为0 mode下拉列表框的数据读取模式。remote读取远程数据local读取本地数据 pageSize下拉列表框的分页大小。该项设置只在moderemote时生效 queryParam查询的名字默认为query将被传递到查询字符串中 allQuery一个发往服务器用来查询全部信息的查询字符串默认为空字符串 selectOnFocus当获得焦点时立刻选择一个已存在的列表项。默认为false此项只有在editabletrue时才会生效 store列表框绑定的数据源 transform将页面中已存在的元素转换为组合框 lazyInit延时初始化下拉列表默认为true lazyRender延时渲染默认为false triggerAction设置单击触发按钮时执行的默认操作有效值包括all和query默认为query如果设置为all则会执行allQuery中设置的查询 typeAhead设置在输入过程中是否自动选择匹配的剩余部分文本选择第一个满足条件的默认为false value初始化组合框中的值 valueField组合框的值字段 valueNotFoundText值不存在时的提示信息 tplExt模板字符串或模板对象可以通过该配置项自定义下拉列表的显示方式 方法 clearValue()清空字段当前值 doQuery( String query, Boolean forceAll ) getValue() getStore() setValue( String value ) Ext.from.RadioGroup allowBlank blankText Ext.form.Radio; getGroupValue() setValue( value {String/Boolean} ) Ext.form.CheckboxGroup allowBlank是否允许不选择默认为true blankText columns显示的列数可选值包括固定值auto、数值、数组整数、小数 items对象数组 vertical是否垂直方向显示对象默认为false Ext.form.Checkbox boxLabel复选框的文字描述 checked复选框是否被选择默认为false handler当checked值改变时触发的函数函数包含两个参数checkbox、checked inputValue 方法 getValue()返回复选框的checked状态 setValue( Boolean/String checked ) Ext.form.NumberField allowDecimals是否允许输入小数默认为true allowNegative是否允许输入负数默认为true baseChars输入的有效数字集合默认为0123456789 decimalPrecision数字的精度默认保留小数点后2位 decimalSeparator十进制分隔符默认为. maxValue允许输入的最大数值 maxText超过最大值之后的提示信息 minValue允许输入的最小数值 minText超过最小值之后的提示信息 nanText输入非有效数值之后的提示信息 Ext.form.TextArea preventScrollbars是否禁止出现滚动条默认为false Ext.form.TextField allowBlank是否允许为空默认为true blankText空验证失败后显示的提示信息 emptyText在一个空字段中默认显示的信息 grow字段是否自动伸展和收缩默认为false growMin收缩的最小宽度 growMax伸展的最大宽度 inputType字段类型默认为text maskRe用于过滤不匹配字符输入的正则表达式 maxLength字段允许输入的最大长度 maxLengthText最大长度验证失败后显示的提示信息 minLength字段允许输入的最小长度 minLengthText最小长度验证失败后显示的提示信息 regex正则表达式 regexText正则表达式验证失败后显示的提示信息 vtype验证类型的名字 alpha限制只能输入字母 alphanum限制只能输入字母和数字 email url vtypeText验证失败时的提示信息 validator自定义验证函数 selectOnFocus当字段得到焦点时自动选择已存在的文本默认为false Ext.form.Field name字段名 value字段的初始化值 disabled字段是否不可用默认为false fieldLabel字段标签说明 hideLabel隐藏字段标签默认为false labelSeparator字段标签与字段之间的分隔符默认为: labelStyle字段标签样式 inputType默认为text invalidClass默认为x-form-invalid invalidText字段非法文本提示 msgTarget错误信息显示的位置默认为qtip qtip显示一个浮动的提示信息 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() Ext.form.FormPanel items一个元素或元素数组 buttons一个按钮配置对象的数组按钮将被添加到表单页脚中 buttonAlign按钮的对齐方式可选值有left、center、right默认为center labelWidth表单标签的宽度 labelAlign表单标签的对齐方式可选值有left、top、right默认为left labelSeparator字段标签与字段之间的分隔符默认为: minButtonWidth按钮的最小宽度默认为75 方法 getForm() : Ext.form.BasicForm load( Object options ) startMonitoring() stopMonitoring() Ext.form.BaseicForm baseParams传递到请求中的参数 method表单的提交方式有效值包括GET、POST url表单默认的提交路径 fileUpload表单是否进行文件上传 timeout表单动作的超时时间默认为30秒 trackResetOnLoad是否在表单初次创建时清楚数据 方法 doAction( String/Object actionName, [Object options] )执行一个预订的动作可用选项包括 url动作提交的路径 method表单的提交方式有效值包括GET、POST params传递到请求中的参数 headers success执行成功后回调的函数包括两个参数form和action failure执行失败后回调的函数包括两个参数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 )持久化表单数据到记录集中 Ext.form.Action success执行成功后回调的函数包括两个参数form和action failure执行失败后回调的函数包括两个参数form和action method表单的提交方式有效值包括GET、POST params传递到请求中的参数 url动作提交的路径 waitMsg动作执行时显示的等待信息 属性 Action.CLIENT_INVALID客户端验证错误 Action.CONNECT_FAILURE通信错误 Action.LOAD_FAILURE加载数据时没有包含data属性的字段被返回 Action.SERVER_INVALID服务端验证错误 failureType错误类型 result包含布尔类型的success属性和其他属性如{success: true, msg: ok} type动作类型可选值有submit和load Ext.form.Action.Submit返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性 Ext.form.Action.Load返回的信息中要包含一个布尔类型的success属性和一个data属性 Ext.grid.EditorGridPanel clicksToEdit设置点击单元格进入编辑模式的点击次数默认为2 autoEncode是否自动编码/解码HTML内容默认为false selModel默认为Ext.grid.CellSelectionModel 主要方法 startEditing( Number rowIndex, Number colIndex )开始编辑指定单元格 stopEditing( [Boolean cancel] )结束编辑操作 Ext.grid.GroupinView enableGroupingMenu是否在表头菜单中进行分组控制默认为true groupByText表头菜单中分组控制的菜单文字默认为Group By This Field enableNoGroups是否允许用户关闭分组功能默认为true showGroupsText在表头菜单中启用分组和禁用分组的菜单文字默认为Show in Groups groupTextTpl用于渲染分组信息的模板默认为{text}常用的可选值有 text列标题:组字段值 gvalue组字段的值 startRow组行索引 enableGrouping是否对数据分组默认为true hideGroupedColumn是否隐藏分组列默认为false ignoreAdd在向表格中添加数据时是否刷新表格默认为false showGroupName是否在分组行上显示分组字段的名字默认为true startCollapsed初次显示时分组是否处于收缩状态默认为false 主要方法 collapseAllGroups()收缩所有分组行 expandAllGroups()展开所有分组行 getGroupId( String value )根据分组字段值取得组id toggleAllGroups( [Boolean expanded] )切换所有分组行的展开或收缩状态 toggleGroup( String groupId, [Boolean expanded] )切换指定分组行的展开或收缩状态 2、Ext.data.GroupingStore groupField分组字段 groupOnSort是否在分组字段上排序默认为false remoteGroup是否远程分组数据默认为false。如果是远程分组数据则通过groupBy参数发送分组字段名 3、范例源码 var datas [[1,张三,24,男,new Date(1986,06,09)], [2,李四,30,女,new Date(1980,09,13)], [3,王五,28,男,new Date(1982,01,10)]]; var person Ext.data.Record.create([ {name: personId, mapping: 0}, {name: personName, mapping: 1}, {name: personAge, mapping: 2}, {name: personGender, mapping: 3}, {name: personBirth, mapping: 4}
]); var grid new Ext.grid.GridPanel({ title: GroupingView实例, renderTo: div1, width: 500, height: 300, frame: true, tbar: [ { text: 展开/收缩, iconCls: search, handler: function(){ var view grid.getView(); //var groupId view.getGroupId(男); //view.toggleGroup(groupId); view.toggleAllGroups(); } } ], store: new Ext.data.GroupingStore({ reader: new Ext.data.ArrayReader({id:0}, person), data: datas, sortInfo: {field:personId, direction:ASC}, //数据排序 groupField: personGender //分组字段 }), view: new Ext.grid.GroupingView({ sortAscText: 升序, sortDescText: 降序, columnsText: 表格字段, groupByText: 使用当前字段进行分组, showGroupsText: 表格分组, groupTextTpl: {text}(共{[values.rs.length]}条) }), columns: [ {id:personId, header:编号, width:50, dataIndex:personId}, {id:personName, header:姓名, width:70, dataIndex:personName}, {id:personAge, header:年龄, width:45, dataIndex:personAge}, {id:personGender, header:性别, width:45, dataIndex:personGender}, {id:personBirth, header:出生日期, width:120, dataIndex:personBirth, renderer:Ext.util.Format.dateRenderer(Y年m月d日)} ]
}); Ext.grid.GridPanel: store表格的数据集 columns表格列模式的配置数组可自动创建ColumnModel列模式 autoExpandColumn自动充满表格未用空间的列参数为列id该id不能为0 stripeRows表格是否隔行换色默认为false cm、colModel表格的列模式渲染表格时必须设置该配置项 sm、selModel表格的选择模式默认为Ext.grid.RowSelectionModel enableHdMenu是否显示表头的上下文菜单默认为true enableColumnHide是否允许通过标题中的上下文菜单隐藏列默认为true loadMask是否在加载数据时显示遮罩效果默认为false view表格视图默认为Ext.grid.GridView viewConfig表格视图的配置对象 autoExpandMax自动扩充列的最大宽度默认为1000 autoExpandMin自动扩充列的最小宽度默认为50 columnLines是否显示列分割线默认为false disableSelection是否禁止行选择默认为false enableColumnMove是否允许拖放列默认为true enableColumnResize是否允许改变列宽默认为true hideHeaders是否隐藏表头默认为false maxHeight最大高度 minColumnWidth最小列宽默认为25 trackMouseOver是否高亮显示鼠标所在的行默认为true 主要方法 getColumnModel()取得列模式 getSelectionModel()取得选择模式 getStore()取得数据集 getView()取得视图对象 reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel )使用一个新的数据集和列模式重新配置表格组件 2、Ext.grid.Column 主要配置项 id列id header表头文字 dataIndex设置列与数据集中数据记录的对应关系值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应 width列宽 align列数据的对齐方式 hidden是否隐藏列默认为false fixed是否固定列宽默认为false menuDisabled是否禁用列的上下文菜单默认为false resizable是否允许改变列宽默认为true sortable是否允许排序默认为true renderer设置列的自定义单元格渲染函数 传入函数的参数有 value数据的原始值 metadata元数据对象用于设置单元格的样式和属性该对象包含的属性有 css应用到单元格TD元素上的样式名称 attr一个HTML属性定义字符串例如stylecolor:blue record当前数据记录对象 rowIndex单元格的行索引 colIndex单元格的列索引 store数据集对象 xtype列渲染器类型默认为gridcolumn其它可选值有booleancolumn、numbercolumn、datecolumn、templatecolumn等 editable是否可编辑默认为true editor编辑器 groupName emptyGroupText groupable 3、Ext.grid.ColumnModel 主要配置项 columns字段数组 defaultSortable是否进行默认排序默认为false defaultWidth默认宽度 主要方法 findColumnIndex( String col )根据给定的dataIndex查找列索引 getColumnById( String id )取得指定id对应的列 getColumnCount( Boolean visibleOnly )取得列总数 getColumnHeader( Number col )取得列的表头 getColumnId( Number index )取得列id getDataIndex( Number col )取得列对应的数据字段名 getIndexById( String id )取得列索引 getTotalWidth( Boolean includeHidden ) isCellEditable( Number colIndex, Number rowIndex ) isFixed() isHidden( Number colIndex ) setColumnHeader( Number col, String header ) setColumnWidth( Number col, Number width, Boolean suppressEvent ) setDataIndex( Number col, String dataIndex ) setEditable( Number col, Boolean editable ) setEditor( Number col, Object editor ) setHidden( Number colIndex, Boolean hidden ) setRenderer( Number col, Function fn ) 4、Ext.grid.AbstractSelectionModel 主要方法 lock()锁定选择区域 unlock()解锁选择区域 isLocked()当前选择区域是否被锁定 5、Ext.grid.CellSelectionModel 主要方法 clearSelections( Boolean preventNotify )清除选择区域 getSelectedCell()取得当前选择的单元格返回一数组其格式[rowIndex, colIndex] hasSelection()当前是否有选择区域 select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] )选择指定单元格 6、Ext.grid.RowSelectionModel 主要配置项 singleSelect是否单选模式默认为false即可以选择多条数据 主要方法 clearSelections( [Boolean fast] )清除所有选择区域 deselectRange( Number startRow, Number endRow )取消范围内的行选择 deselectRow( Number row, [Boolean preventViewNotify] )取消指定行的选择状态 each( Function fn, [Object scope] )遍历所有选择行并调用指定函数。当前被选行将传入该函数中 getCount()得到选择的总行数 getSelected()得到第一个被选记录 getSelections()得到所有被选记录的数组 hasNext()判断当前被选行之后是否还有记录可以选择 hasPrevious()判断当前被选行之前是否还有记录可以选择 hasSelection()是否已选择了数据 isIdSelected( String id )判断指定id的记录是否被选择 isSelected( Number/Record index )判断指定记录或记录索引的数据是否被选择 selectAll()选择所有行 selectFirstRow()选择第一行 selectLastRow( [Boolean keepExisting] )选择最后行 keepExisting是否保持已有的选择 selectNext( [Boolean keepExisting] )选择当前选择行的下一行 selectPrevious( [Boolean keepExisting] )选择当前选择行的上一行 selectRange( Number startRow, Number endRow, [Boolean keepExisting] )选择范围内的所有行 selectRecords( Array records, [Boolean keepExisting] )选择一组指定记录 selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] )选择一行 row行索引 selectRows( Array rows, [Boolean keepExisting] )选择多行 rows行索引数组 7、Ext.grid.CheckboxSelectionModel 主要配置项 singleSelect是否单选模式默认为false即可以选择多条数据 checkOnly是否只能通过点击checkbox列进行选择默认为false sortable是否允许checkbox列排序默认为false widthcheckbox列的宽度默认为20 8、Ext.grid.RowNumberer 主要配置项 header行号列表头显示的内容 width列宽默认为239、Ext.grid.GridView 主要配置项 enableRowBody是否包含行体 sortAscText表格标题菜单中升序的文字描述 sortDescText表格标题菜单中降序的文字描述 columnsText表格标题菜单中列对应的文字描述 autoFill是否自动扩展列以充满整个表格默认为false forceFit是否强制调整表格列宽以适用表格的整体宽度防止出现水平滚动条默认为false 主要方法 focusCell( Number row, Number col )将焦点移到指定单元格 focusRow( Number row )将焦点移动指定行 getCell( Number row, Number col )取得指定单元格对应的td元素 getHeaderCell( Number index )取得指定表头对应的td元素 getRow( Number index )取得指定行对应的tr元素 getRowClass( Record record, Number index, Object rowParams, Store store )得到附加到表格行上的样式名 record当前行的数据记录对象 index当前行的索引 rowParams渲染时传入到行模板中的配置对象通过它可以为行体定制样式该对象只在enableRowBody为true时才生效可能的属性如下 body渲染到行体中的HTML代码片段 bodyStyle应用到行体tr元素style属性的字符串 cols应用到行体td元素colspan属性的值默认为总列数 store表格数据集 refresh( [Boolean headersToo] )刷新表格组件 scrollToTop()滚动表格到顶端 Ext.TabPanel: activeTab初始激活的tab索引或者id值默认为none autoTabs是否自动将带有x-tab样式类的div转成tabs添加到TabPanel中默认为false。 当该配置项设为true时需要设置deferredRender为false还必须使用applyTo。 deferredRender是否延迟渲染默认为true。 autoTabSelector默认为div.x-tab。 resizeTabs是否可以改变tab的尺寸默认为false。 minTabWidthtab的最小宽度默认为30。 tabWidth每个新增加的tab宽度默认为120。 tabTiptab的提示信息 tabPositiontab位置可选值有top、bottom默认为top。 enableTabScroll是否允许Tab溢出时可以滚动默认为false。 closabletab是否可关闭默认为false scrollDuration每次的滚动时长默认为0.35毫秒。 scrollIncrement每次的滚动步长默认为100像素。 wheelIncrement每次鼠标滑轮的滚动步长默认为20像素。 2、主要方法 activate( String/Panel tab ) getActiveTab()获取当前活动的tab get( String/Number key )根据组件id或者索引获取组件 getItem(String id)根据tab id获取tab setActiveTab( String/Number item ) remove( Component/String component, [Boolean autoDestroy] ) removeAll( [Boolean autoDestroy] ) 3、范例 new Ext.TabPanel({ id: mainTab, renderTo: div1, width: 500, height: 300, activeTab: 0, defaults: { autoScroll: true, autoHeight:true, style: padding:5 }, items:[ {title:normal, tabTip:mormal, html:tab1, iconCls:add}, {title:ajax1, autoLoad:messagebox.action, iconCls:delete}, {title:ajax2, autoLoad:{url:test.action, params:p1v1, nocache:true}, iconCls:search}, {title:event, iconCls:save, listeners:{activate:activateHandler}} ], enableTabScroll: true
}); function activateHandler(tab){ //alert(tab.title);
} var index 0;
function addTab(){ var tabs Ext.getCmp(mainTab); var t tabs.getItem(tabindex); if(t) tabs.remove(t); tabs.add({ id: tab (index), title: NewTab index, html: new tab index, closable: true }).show();
} //按钮渲染到div1元素之前
new Ext.Button({ text:add tab, handler:addTab, iconCls:add
}).render(document.body, div1); 在使用TabPanel时需要注意 1、在创建Ext.TabPanel时deferredRender配置项经常会被忽略。该配置项的默认值是true。true表示只有在用户第一次访问 选项卡时该选项卡的panel才会被渲染。 所以当我们有可能使用脚本操作选项卡时谨记将该配置项设置为false。 2、在FormPanel中使用TabPanel如果在TabPanel中不定义deferredRender的值为false那么当你使用 Load方法为Form加载数据或使用setValue为没有激活过的Panel的控件赋值时将会发生错误。原因是在默认设置下 deferredRender为trueTabPanel并不会渲染所有Panel上的控件只有在该Panel被激活时才渲染控件所以当你为这些控 件设置数据时将会找不到这些控件会出现错误。因而在FormPanel中使用TabPanel一定要在TabPanel中设置 deferredRender的值为false强制TabPanel在Layout渲染时同时渲染所有Panel上的控件。 转载于:https://www.cnblogs.com/forgeting/p/4380652.html
