• Extjs 控件属性(部分)


    1. Ext.form.TimeField:   
    2.   
    3.    
    4.   
    5.   配置项:   
    6.            maxValue:列表中允许的最大时间   
    7.            maxText:当时间大于最大值时的错误提示信息   
    8.            minValue:列表中允许的最小时间   
    9.            minText:当时间小于最小值时的错误提示信息   
    10.            increment:两个相邻选项间的时间间隔,默认为15分钟   
    11.            format:显示格式,默认为“g:i A”。一般使用“H:i:s”   
    12.                 H:带前缀0的24小时   
    13.                 i:带前缀0的分钟   
    14.                 s:带前缀0的秒   
    15.            invalidText:当时间值非法时显示的提示信息   
    16.            altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割  
    17.   
    18.    
    19.   
    20.    
    21.   
    22. Ext.form.FieldSet  
    23.   
    24.    
    25.   
    26. animCollapse:动画折叠,默认为false   
    27.            checkboxToggle:设置是否显示字段集的checkbox选择框,默认为false   
    28.            checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效   
    29.            labelWidth:字段标签的宽度,可以级联到子容器   
    30.            layout:布局,默认为form  
    31.   
    32.    
    33.   
    34. Ext.form.DateFied  
    35.   
    36.    
    37.   
    38. maxValue:允许选择的最大日期   
    39.            maxText:当日期大于最大值时的错误提示信息   
    40.            minValue:允许选择的最小时间   
    41.            minText:当日期小于最小值时的错误提示信息   
    42.            format:日期显示格式,默认为“m/d/y”,一般使用“Y-m-d”   
    43.                Y:四位年份   
    44.                m:带前缀0的月份   
    45.                d:带前缀0的日期   
    46.                y:两位年份   
    47.                n:不带前缀0的月份   
    48.                j:不带前缀0的日期   
    49.                w:星期的数字,0表示星期日,1代表星期一   
    50.            showToday:是否显示今天按钮,默认为true   
    51.            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'   
    52.            disabledDates:禁止选择的日期组成的数组   
    53.            disabledDatesText:选择禁选日期时显示的提示信息   
    54.            disabledDays:禁止选择的星期组成的数组,0代表星期日,1代表星期一   
    55.            disabledDaysText:选择禁选星期时显示的提示信息   
    56.            invalidText:当日期值非法时显示的提示信息   
    57.      方法:   
    58.            getValue():取得日期值  
    59.   
    60.    
    61.   
    62.    
    63.   
    64.    
    65.   
    66. Ext.form.ComboBox  
    67.   
    68.    
    69.   
    70. displayField:被显示在下拉框中的字段名   
    71.            editable:是否可编辑,默认为true   
    72.            forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择第一个最接近的值。   
    73.            hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,当表单提交时在服务器端可以通过该名字取得列表中的所选值   
    74.            listWidth:下拉列表的宽度   
    75.            minListWidth:下拉列表的最小宽度,默认为70像素   
    76.            loadingText:当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效   
    77.            maxHeight:下拉列表框的最大高度,默认为300像素   
    78.            minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4,mode='local'默认为0   
    79.            mode:下拉列表框的数据读取模式。remote读取远程数据,local读取本地数据   
    80.            pageSize:下拉列表框的分页大小。该项设置只在mode='remote'时生效   
    81.            queryParam:查询的名字,默认为'query',将被传递到查询字符串中   
    82.            allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串''   
    83.            selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在editable=true时才会生效   
    84.            store:列表框绑定的数据源   
    85.            transform:将页面中已存在的元素转换为组合框   
    86.            lazyInit:延时初始化下拉列表,默认为true   
    87.            lazyRender:延时渲染,默认为false   
    88.            triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all和query,默认为query,如果设置为all则会执行allQuery中设置的查询   
    89.            typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),默认为false   
    90.            value:初始化组合框中的值   
    91.            valueField:组合框的值字段   
    92.            valueNotFoundText:值不存在时的提示信息   
    93.            tpl:Ext模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式   
    94.   
    95.      方法:   
    96.            clearValue():清空字段当前值   
    97.            doQuery( String query, Boolean forceAll ):   
    98.            getValue():   
    99.            getStore():   
    100.            setValue( String value ):  
    101.   
    102.    
    103.   
    104.    
    105.   
    106.    
    107.   
    108. Ext.from.RadioGroup  
    109.   
    110.    
    111.   
    112. allowBlank:   
    113.            blankText:  
    114.   
    115.    
    116.   
    117.    
    118.   
    119.    
    120.   
    121. Ext.form.Radio;  
    122.   
    123.    
    124.   
    125. getGroupValue():   
    126.            setValue( value {String/Boolean} ):  
    127.   
    128.    
    129.   
    130. Ext.form.CheckboxGroup  
    131.   
    132.    
    133.   
    134.   allowBlank:是否允许不选择,默认为true   
    135.            blankText:   
    136.            columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)   
    137.            items:对象数组   
    138.            vertical:是否垂直方向显示对象,默认为false  
    139.   
    140.    
    141.   
    142.    
    143.   
    144. Ext.form.Checkbox  
    145.   
    146.    
    147.   
    148.   boxLabel:复选框的文字描述   
    149.            checked:复选框是否被选择,默认为false   
    150.            handler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checked   
    151.            inputValue:   
    152.      方法:   
    153.            getValue():返回复选框的checked状态   
    154.            setValue( Boolean/String checked ):  
    155.   
    156.    
    157.   
    158. Ext.form.NumberField  
    159.   
    160.    
    161.   
    162.   allowDecimals:是否允许输入小数,默认为true   
    163.            allowNegative:是否允许输入负数,默认为true   
    164.            baseChars:输入的有效数字集合,默认为'0123456789'   
    165.            decimalPrecision:数字的精度,默认保留小数点后2位   
    166.            decimalSeparator:十进制分隔符,默认为'.'   
    167.            maxValue:允许输入的最大数值   
    168.            maxText:超过最大值之后的提示信息   
    169.            minValue:允许输入的最小数值   
    170.            minText:超过最小值之后的提示信息   
    171.            nanText:输入非有效数值之后的提示信息  
    172.   
    173.    
    174.   
    175.    
    176.   
    177. Ext.form.TextArea  
    178.   
    179.    
    180.   
    181. preventScrollbars:是否禁止出现滚动条,默认为false  
    182.   
    183.    
    184.   
    185.    
    186.   
    187. Ext.form.TextField  
    188.   
    189.    
    190.   
    191. allowBlank:是否允许为空,默认为true   
    192.           blankText:空验证失败后显示的提示信息   
    193.           emptyText:在一个空字段中默认显示的信息   
    194.           grow:字段是否自动伸展和收缩,默认为false   
    195.           growMin:收缩的最小宽度   
    196.           growMax:伸展的最大宽度   
    197.           inputType:字段类型:默认为text   
    198.           maskRe:用于过滤不匹配字符输入的正则表达式   
    199.           maxLength:字段允许输入的最大长度   
    200.           maxLengthText:最大长度验证失败后显示的提示信息   
    201.           minLength:字段允许输入的最小长度   
    202.           minLengthText:最小长度验证失败后显示的提示信息   
    203.           regex:正则表达式   
    204.           regexText:正则表达式验证失败后显示的提示信息   
    205.           vtype:验证类型的名字   
    206.                alpha:限制只能输入字母   
    207.                alphanum:限制只能输入字母和数字   
    208.                email   
    209.                url   
    210.           vtypeText:验证失败时的提示信息   
    211.           validator:自定义验证函数   
    212.           selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false  
    213.   
    214.    
    215.   
    216. Ext.form.Field  
    217.   
    218.    
    219.   
    220. name:字段名   
    221.           value:字段的初始化值   
    222.           disabled:字段是否不可用,默认为false   
    223.           fieldLabel:字段标签说明   
    224.           hideLabel:隐藏字段标签,默认为false   
    225.           labelSeparator:字段标签与字段之间的分隔符,默认为':'   
    226.           labelStyle:字段标签样式   
    227.           inputType:默认为text   
    228.           invalidClass:默认为x-form-invalid   
    229.           invalidText:字段非法文本提示   
    230.           msgTarget:错误信息显示的位置,默认为qtip   
    231.               qtip:显示一个浮动的提示信息   
    232.               title:显示一个浏览器的浮动提示信息   
    233.               under:在字段下方显示一个提示信息   
    234.               side:在字段右边显示一个提示信息   
    235.           readOnly:字段是否只读,默认为false   
    236.           validateOnBlur:字段在失去焦点时被验证,默认为true   
    237.      方法:   
    238.           clearInvalid():   
    239.           getRawValue()   
    240.           setRawValue( Mixed value )   
    241.           getValue()   
    242.           setValue( Mixed value )   
    243.           isDirty():字段值在装载后是否被修改过   
    244.           isValid( Boolean preventMark ):当前字段值是否合法   
    245.           markInvalid( [String msg] )   
    246.           validate()   
    247.           reset()  
    248.   
    249.    
    250.   
    251.    
    252.   
    253.    
    254.   
    255. Ext.form.FormPanel  
    256.   
    257.    
    258.   
    259. items:一个元素或元素数组   
    260.           buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中   
    261.           buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center   
    262.           labelWidth:表单标签的宽度   
    263.           labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为left   
    264.           labelSeparator:字段标签与字段之间的分隔符,默认为':'   
    265.           minButtonWidth:按钮的最小宽度,默认为75   
    266.      方法:   
    267.           getForm() : Ext.form.BasicForm   
    268.           load( Object options )   
    269.           startMonitoring()   
    270.           stopMonitoring()  
    271.   
    272.    
    273.   
    274. Ext.form.BaseicForm  
    275.   
    276.    
    277.   
    278. baseParams:传递到请求中的参数   
    279.           method:表单的提交方式,有效值包括GET、POST   
    280.           url:表单默认的提交路径   
    281.           fileUpload:表单是否进行文件上传   
    282.           timeout:表单动作的超时时间,默认为30秒   
    283.           trackResetOnLoad:是否在表单初次创建时清楚数据   
    284.     方法:   
    285.           doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选项包括:   
    286.               url:动作提交的路径   
    287.               method:表单的提交方式,有效值包括GET、POST   
    288.               params:传递到请求中的参数   
    289.               headers:   
    290.               success:执行成功后回调的函数,包括两个参数:form和action   
    291.               failure:执行失败后回调的函数,包括两个参数:form和action   
    292.               clientValidation:是否客户端验证   
    293.           clearInvalid():清除表单中所有的无效验证信息   
    294.           findField( String id ):查找表单字段   
    295.           getValues( [Boolean asString] ):   
    296.           isDirty():表单数据是否被更改过   
    297.           isValid():客户端验证是否成功   
    298.           load( Object options ):执行表单读取动作   
    299.           loadRecord( Record record ):从一个数据记录中读取数据到表单中   
    300.           markInvalid( Array/Object errors ):成批设置表单字段为验证无效   
    301.           reset():重置表单   
    302.           setValues( Array/Object values ):成批设置表单字段值   
    303.           submit( Object options ):执行表单提交动作   
    304.           updateRecord( Record record ):持久化表单数据到记录集中  
    305.   
    306.    
    307.   
    308.    
    309.   
    310.    
    311.   
    312. Ext.form.Action  
    313.   
    314.    
    315.   
    316. success:执行成功后回调的函数,包括两个参数:form和action   
    317.           failure:执行失败后回调的函数,包括两个参数:form和action   
    318.           method:表单的提交方式,有效值包括GET、POST   
    319.           params:传递到请求中的参数   
    320.           url:动作提交的路径   
    321.           waitMsg:动作执行时显示的等待信息   
    322.      属性:   
    323.           Action.CLIENT_INVALID:客户端验证错误   
    324.           Action.CONNECT_FAILURE:通信错误   
    325.           Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回   
    326.           Action.SERVER_INVALID:服务端验证错误   
    327.           failureType:错误类型   
    328.           result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'}   
    329.           type:动作类型,可选值有submit和load   
    330.                Ext.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性   
    331.                Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data属性  
    332.   
    333.    
    334.   
    335.    
    336.   
    337.    
    338.   
    339.    
    340.   
    341.    
    342.   
    343. Ext.grid.EditorGridPanel  
    344.   
    345.    
    346.   
    347. clicksToEdit:设置点击单元格进入编辑模式的点击次数,默认为2   
    348.             autoEncode:是否自动编码/解码HTML内容,默认为false   
    349.             selModel:默认为Ext.grid.CellSelectionModel   
    350.     
    351.       主要方法:   
    352.             startEditing( Number rowIndex, Number colIndex ):开始编辑指定单元格   
    353.             stopEditing( [Boolean cancel] ):结束编辑操作  
    354.   
    355.    
    356.   
    357.    
    358.   
    359.    
    360.   
    361.    
    362.   
    363. Ext.grid.GroupinView  
    364.   
    365.    
    366.   
    367. enableGroupingMenu:是否在表头菜单中进行分组控制,默认为true   
    368.             groupByText:表头菜单中分组控制的菜单文字,默认为'Group By This Field'   
    369.     
    370.             enableNoGroups:是否允许用户关闭分组功能,默认为true   
    371.             showGroupsText:在表头菜单中启用分组和禁用分组的菜单文字,默认为'Show in Groups'   
    372.     
    373.             groupTextTpl:用于渲染分组信息的模板,默认为'{text}',常用的可选值有:   
    374.                   text:列标题:组字段值   
    375.                   gvalue:组字段的值   
    376.                   startRow:组行索引   
    377.     
    378.             enableGrouping:是否对数据分组,默认为true   
    379.             hideGroupedColumn:是否隐藏分组列,默认为false   
    380.             ignoreAdd:在向表格中添加数据时是否刷新表格,默认为false   
    381.             showGroupName:是否在分组行上显示分组字段的名字,默认为true   
    382.             startCollapsed:初次显示时分组是否处于收缩状态,默认为false   
    383.     
    384.       主要方法:   
    385.             collapseAllGroups():收缩所有分组行   
    386.             expandAllGroups():展开所有分组行   
    387.             getGroupId( String value ):根据分组字段值取得组id   
    388.             toggleAllGroups( [Boolean expanded] ):切换所有分组行的展开或收缩状态   
    389.             toggleGroup( String groupId, [Boolean expanded] ):切换指定分组行的展开或收缩状态   
    390.   
    391.   
    392.   
    393.   
    394.   
    395. 2、Ext.data.GroupingStore   
    396.       groupField:分组字段   
    397.   
    398.       groupOnSort:是否在分组字段上排序,默认为false   
    399.       remoteGroup:是否远程分组数据,默认为false。如果是远程分组数据,则通过groupBy参数发送分组字段名   
    400.   
    401.   
    402.   
    403.   
    404.   
    405. 3、范例源码   
    406.   
    407. var datas = [[1,"张三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]];     
    408.                  
    409. var person = Ext.data.Record.create([     
    410.     {name: "personId", mapping: 0},     
    411.     {name: "personName", mapping: 1},     
    412.     {name: "personAge", mapping: 2},     
    413.     {name: "personGender", mapping: 3},     
    414.     {name: "personBirth", mapping: 4}     
    415. ]);     
    416.     
    417. var grid = new Ext.grid.GridPanel({     
    418.     title: "GroupingView实例",     
    419.     renderTo: "div1",     
    420.      500,     
    421.     height: 300,     
    422.     frame: true,     
    423.     tbar: [     
    424.         {     
    425.             text: "展开/收缩",     
    426.             iconCls: "search",     
    427.             handler: function(){     
    428.                 var view = grid.getView();     
    429.                 //var groupId = view.getGroupId("男");     
    430.                 //view.toggleGroup(groupId);     
    431.                 view.toggleAllGroups();     
    432.             }     
    433.         }     
    434.     ],     
    435.          
    436.     store: new Ext.data.GroupingStore({     
    437.         reader: new Ext.data.ArrayReader({id:0}, person),     
    438.         data: datas,     
    439.         sortInfo: {field:"personId", direction:"ASC"}, //数据排序     
    440.         groupField: "personGender" //分组字段     
    441.     }),     
    442.     view: new Ext.grid.GroupingView({     
    443.         sortAscText: "升序",     
    444.         sortDescText: "降序",     
    445.         columnsText: "表格字段",     
    446.         groupByText: "使用当前字段进行分组",     
    447.         showGroupsText: "表格分组",     
    448.         groupTextTpl: "{text}(共{[values.rs.length]}条)"    
    449.     }),     
    450.          
    451.     columns: [     
    452.         {id:"personId", header:"编号", 50, dataIndex:"personId"},     
    453.         {id:"personName", header:"姓名", 70, dataIndex:"personName"},     
    454.         {id:"personAge", header:"年龄", 45, dataIndex:"personAge"},     
    455.         {id:"personGender", header:"性别", 45, dataIndex:"personGender"},     
    456.         {id:"personBirth", header:"出生日期", 120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")}     
    457.     ]     
    458. });   
    459.   
    460.    
    461.   
    462.    
    463.   
    464.    
    465.   
    466.    
    467.   
    468.    
    469.   
    470.   
    471.   
    472. Ext.grid.GridPanel:  
    473.   
    474.    
    475.   
    476. store:表格的数据集   
    477.           columns:表格列模式的配置数组,可自动创建ColumnModel列模式   
    478.           autoExpandColumn:自动充满表格未用空间的列,参数为列id,该id不能为0   
    479.           stripeRows:表格是否隔行换色,默认为false   
    480.     
    481.           cm、colModel:表格的列模式,渲染表格时必须设置该配置项   
    482.           sm、selModel:表格的选择模式,默认为Ext.grid.RowSelectionModel   
    483.           enableHdMenu:是否显示表头的上下文菜单,默认为true   
    484.           enableColumnHide:是否允许通过标题中的上下文菜单隐藏列,默认为true   
    485.           loadMask:是否在加载数据时显示遮罩效果,默认为false   
    486.           view:表格视图,默认为Ext.grid.GridView   
    487.           viewConfig:表格视图的配置对象   
    488.     
    489.           autoExpandMax:自动扩充列的最大宽度,默认为1000   
    490.           autoExpandMin:自动扩充列的最小宽度,默认为50   
    491.           columnLines:是否显示列分割线,默认为false   
    492.           disableSelection:是否禁止行选择,默认为false   
    493.           enableColumnMove:是否允许拖放列,默认为true   
    494.           enableColumnResize:是否允许改变列宽,默认为true   
    495.           hideHeaders:是否隐藏表头,默认为false   
    496.           maxHeight:最大高度   
    497.           minColumnWidth:最小列宽,默认为25   
    498.           trackMouseOver:是否高亮显示鼠标所在的行,默认为true   
    499.     
    500.       主要方法:   
    501.           getColumnModel():取得列模式   
    502.           getSelectionModel():取得选择模式   
    503.           getStore():取得数据集   
    504.           getView():取得视图对象   
    505.           reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ):使用一个新的数据集和列模式重新配置表格组件   
    506.   
    507.   
    508.   
    509.   
    510.   
    511. 2、Ext.grid.Column   
    512.       主要配置项:   
    513.           id:列id   
    514.           header:表头文字   
    515.           dataIndex:设置列与数据集中数据记录的对应关系,值为数据记录中的字段名称。如果没有设置该项则使用列索引与数据记录中字段的索引进行对应   
    516.           width:列宽   
    517.           align:列数据的对齐方式   
    518.     
    519.           hidden:是否隐藏列,默认为false   
    520.           fixed:是否固定列宽,默认为false   
    521.           menuDisabled:是否禁用列的上下文菜单,默认为false   
    522.           resizable:是否允许改变列宽,默认为true   
    523.           sortable:是否允许排序,默认为true   
    524.           renderer:设置列的自定义单元格渲染函数   
    525.                 传入函数的参数有:   
    526.                     value:数据的原始值   
    527.                     metadata:元数据对象,用于设置单元格的样式和属性,该对象包含的属性有:   
    528.                           css:应用到单元格TD元素上的样式名称   
    529.                           attr:一个HTML属性定义字符串,例如'style="color:blue"'   
    530.                     record:当前数据记录对象   
    531.                     rowIndex:单元格的行索引   
    532.                     colIndex:单元格的列索引   
    533.                     store:数据集对象   
    534.       
    535.           xtype:列渲染器类型,默认为gridcolumn,其它可选值有booleancolumn、numbercolumn、datecolumn、templatecolumn等   
    536.     
    537.           editable:是否可编辑,默认为true   
    538.           editor:编辑器   
    539.     
    540.           groupName:   
    541.           emptyGroupText:   
    542.           groupable:   
    543.   
    544.   
    545.   
    546.   
    547.   
    548. 3、Ext.grid.ColumnModel   
    549.       主要配置项:   
    550.           columns:字段数组   
    551.           defaultSortable:是否进行默认排序,默认为false   
    552.           defaultWidth:默认宽度   
    553.     
    554.       主要方法:   
    555.           findColumnIndex( String col ):根据给定的dataIndex查找列索引   
    556.           getColumnById( String id ):取得指定id对应的列   
    557.           getColumnCount( Boolean visibleOnly ):取得列总数   
    558.           getColumnHeader( Number col ):取得列的表头   
    559.           getColumnId( Number index ):取得列id   
    560.           getDataIndex( Number col ):取得列对应的数据字段名   
    561.           getIndexById( String id ):取得列索引   
    562.           getTotalWidth( Boolean includeHidden )   
    563.           isCellEditable( Number colIndex, Number rowIndex )   
    564.           isFixed()   
    565.           isHidden( Number colIndex )   
    566.           setColumnHeader( Number col, String header )   
    567.           setColumnWidth( Number col, Number width, Boolean suppressEvent )   
    568.           setDataIndex( Number col, String dataIndex )   
    569.           setEditable( Number col, Boolean editable )   
    570.           setEditor( Number col, Object editor )   
    571.           setHidden( Number colIndex, Boolean hidden )   
    572.           setRenderer( Number col, Function fn )   
    573.   
    574.   
    575.   
    576.   
    577.   
    578. 4、Ext.grid.AbstractSelectionModel   
    579.       主要方法:   
    580.             lock():锁定选择区域   
    581.             unlock():解锁选择区域   
    582.             isLocked():当前选择区域是否被锁定   
    583.     
    584.   
    585.   
    586. 5、Ext.grid.CellSelectionModel   
    587.       主要方法:   
    588.             clearSelections( Boolean preventNotify ):清除选择区域   
    589.             getSelectedCell():取得当前选择的单元格,返回一数组,其格式:[rowIndex, colIndex]   
    590.             hasSelection():当前是否有选择区域   
    591.             select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] ):选择指定单元格   
    592.       
    593.   
    594.   
    595.   
    596. 6、Ext.grid.RowSelectionModel   
    597.       主要配置项:   
    598.             singleSelect:是否单选模式,默认为false,即可以选择多条数据   
    599.   
    600.       主要方法:   
    601.             clearSelections( [Boolean fast] ):清除所有选择区域   
    602.             deselectRange( Number startRow, Number endRow ):取消范围内的行选择   
    603.             deselectRow( Number row, [Boolean preventViewNotify] ):取消指定行的选择状态   
    604.             each( Function fn, [Object scope] ):遍历所有选择行,并调用指定函数。当前被选行将传入该函数中   
    605.             getCount():得到选择的总行数   
    606.             getSelected():得到第一个被选记录   
    607.             getSelections():得到所有被选记录的数组   
    608.             hasNext():判断当前被选行之后是否还有记录可以选择   
    609.             hasPrevious():判断当前被选行之前是否还有记录可以选择   
    610.             hasSelection():是否已选择了数据   
    611.             isIdSelected( String id ):判断指定id的记录是否被选择   
    612.             isSelected( Number/Record index ):判断指定记录或记录索引的数据是否被选择   
    613.             selectAll():选择所有行   
    614.             selectFirstRow():选择第一行   
    615.             selectLastRow( [Boolean keepExisting] ):选择最后行   
    616.                   keepExisting:是否保持已有的选择   
    617.             selectNext( [Boolean keepExisting] ):选择当前选择行的下一行   
    618.             selectPrevious( [Boolean keepExisting] ):选择当前选择行的上一行   
    619.             selectRange( Number startRow, Number endRow, [Boolean keepExisting] ):选择范围内的所有行   
    620.             selectRecords( Array records, [Boolean keepExisting] ):选择一组指定记录   
    621.             selectRow( Number row, [Boolean keepExisting], [Boolean preventViewNotify] ):选择一行   
    622.                   row:行索引   
    623.             selectRows( Array rows, [Boolean keepExisting] ):选择多行   
    624.                   rows:行索引数组   
    625.   
    626.   
    627.   
    628.   
    629.   
    630. 7、Ext.grid.CheckboxSelectionModel   
    631.       主要配置项:   
    632.             singleSelect:是否单选模式,默认为false,即可以选择多条数据   
    633.             checkOnly:是否只能通过点击checkbox列进行选择,默认为false   
    634.             sortable:是否允许checkbox列排序,默认为false   
    635.             width:checkbox列的宽度,默认为20   
    636.     
    637.   
    638.   
    639. 8、Ext.grid.RowNumberer   
    640.       主要配置项:   
    641.             header:行号列表头显示的内容   
    642.             width:列宽,默认为23   
    643.   
    644.   
    645.   
    646.   
    647.   
    648. 9、Ext.grid.GridView   
    649.       主要配置项:   
    650.             enableRowBody:是否包含行体   
    651.             sortAscText:表格标题菜单中升序的文字描述   
    652.             sortDescText:表格标题菜单中降序的文字描述   
    653.             columnsText:表格标题菜单中列对应的文字描述   
    654.             autoFill:是否自动扩展列以充满整个表格,默认为false   
    655.             forceFit:是否强制调整表格列宽以适用表格的整体宽度,防止出现水平滚动条,默认为false   
    656.   
    657.       主要方法:   
    658.             focusCell( Number row, Number col ):将焦点移到指定单元格   
    659.             focusRow( Number row ):将焦点移动指定行   
    660.             getCell( Number row, Number col ):取得指定单元格对应的td元素   
    661.             getHeaderCell( Number index ):取得指定表头对应的td元素   
    662.             getRow( Number index ):取得指定行对应的tr元素   
    663.             getRowClass( Record record, Number index, Object rowParams, Store store ):得到附加到表格行上的样式名   
    664.                   record:当前行的数据记录对象   
    665.                   index:当前行的索引   
    666.                   rowParams:渲染时传入到行模板中的配置对象,通过它可以为行体定制样式,该对象只在enableRowBody为true时才生效,可能的属性如下:   
    667.                         body:渲染到行体中的HTML代码片段   
    668.                         bodyStyle:应用到行体tr元素style属性的字符串   
    669.                         cols:应用到行体td元素colspan属性的值,默认为总列数   
    670.                   store:表格数据集   
    671.             refresh( [Boolean headersToo] ):刷新表格组件   
    672.             scrollToTop():滚动表格到顶端  
    673.   
    674.    
    675.   
    676.    
    677.   
    678.    
    679.   
    680. Ext.TabPanel:  
    681.   
    682. activeTab:初始激活的tab,索引或者id值,默认为none   
    683.   
    684.       autoTabs:是否自动将带有'x-tab'样式类的div转成tabs添加到TabPanel中,默认为false。   
    685.             当该配置项设为true时,需要设置deferredRender为false,还必须使用applyTo。   
    686.       deferredRender:是否延迟渲染,默认为true。   
    687.       autoTabSelector:默认为'div.x-tab'。   
    688.   
    689.       resizeTabs:是否可以改变tab的尺寸,默认为false。   
    690.       minTabWidth:tab的最小宽度,默认为30。   
    691.       tabWidth:每个新增加的tab宽度,默认为120。   
    692.       tabTip:tab的提示信息   
    693.   
    694.       tabPosition:tab位置,可选值有top、bottom,默认为top。   
    695.       enableTabScroll:是否允许Tab溢出时可以滚动,默认为false。   
    696.       closable:tab是否可关闭,默认为false   
    697.   
    698.       scrollDuration:每次的滚动时长,默认为0.35毫秒。   
    699.       scrollIncrement:每次的滚动步长,默认为100像素。   
    700.       wheelIncrement:每次鼠标滑轮的滚动步长,默认为20像素。   
    701.   
    702.   
    703.   
    704. 2、主要方法:   
    705.       activate( String/Panel tab )   
    706.       getActiveTab():获取当前活动的tab   
    707.       get( String/Number key ):根据组件id或者索引获取组件   
    708.       getItem(String id):根据tab id获取tab   
    709.       setActiveTab( String/Number item )   
    710.       remove( Component/String component, [Boolean autoDestroy] )   
    711.       removeAll( [Boolean autoDestroy] )   
    712.   
    713.   
    714.   
    715. 3、范例   
    716.   
    717. new Ext.TabPanel({     
    718.     id: "mainTab",     
    719.     renderTo: "div1",     
    720.      500,     
    721.     height: 300,     
    722.     activeTab: 0,     
    723.     defaults: {     
    724.         autoScroll: true,     
    725.         autoHeight:true,     
    726.         style: "padding:5"    
    727.     },     
    728.     items:[     
    729.         {title:"normal", tabTip:"mormal", html:"tab1", iconCls:"add"},     
    730.         {title:"ajax1", autoLoad:"messagebox.action", iconCls:"delete"},     
    731.         {title:"ajax2", autoLoad:{url:"test.action", params:"p1=v1", nocache:true}, iconCls:"search"},     
    732.         {title:"event", iconCls:"save", listeners:{activate:activateHandler}}     
    733.     ],     
    734.     enableTabScroll: true    
    735. });     
    736.     
    737. function activateHandler(tab){     
    738.     //alert(tab.title);     
    739. }     
    740.     
    741. var index = 0;     
    742. function addTab(){     
    743.     var tabs = Ext.getCmp("mainTab");     
    744.          
    745.     var t = tabs.getItem("tab"+index);     
    746.     if(t) tabs.remove(t);     
    747.          
    748.     tabs.add({     
    749.         id: "tab" + (++index),     
    750.         title: "NewTab" + index,     
    751.         html: "new tab" + index,     
    752.         closable: true    
    753.     }).show();     
    754. }     
    755.     
    756. //按钮渲染到div1元素之前     
    757. new Ext.Button({     
    758.     text:"add tab",     
    759.     handler:addTab,     
    760.     iconCls:"add"    
    761. }).render(document.body, "div1");    
    762. 在使用TabPanel时需要注意:   
    763.   
    764.        1、在创建Ext.TabPanel时deferredRender配置项经常会被忽略。该配置项的默认值是true。true表示只有在用户第一次访问 选项卡时,该选项卡的panel才会被渲染。 所以当我们有可能使用脚本操作选项卡时,谨记将该配置项设置为false。   
    765.   
    766.   
    767.   
    768.        2、在FormPanel中使用TabPanel,如果在TabPanel中不定义deferredRender的值为false,那么,当你使用 Load方法为Form加载数据,或使用setValue为没有激活过的Panel的控件赋值时,将会发生错误。原因是,在默认设置下 deferredRender为true,TabPanel并不会渲染所有Panel上的控件,只有在该Panel被激活时才渲染控件,所以当你为这些控 件设置数据时,将会找不到这些控件,会出现错误。因而,在FormPanel中使用TabPanel,一定要在TabPanel中设置 deferredRender的值为false,强制TabPanel在Layout渲染时同时渲染所有Panel上的控件。  
  • 相关阅读:
    Comet OJ CCPC-Wannafly Winter Camp Day1 (Div2, online mirror) F.爬爬爬山-最短路(Dijkstra)(两个板子)+思维(mdzz...) zhixincode
    Codeforces 1104 D. Game with modulo-交互题-二分-woshizhizhang(Codeforces Round #534 (Div. 2))
    POJ 1655.Balancing Act-树的重心(DFS) 模板(vector存图)
    Codeforces gym102058 J. Rising Sun-简单的计算几何+二分 (2018-2019 XIX Open Cup, Grand Prix of Korea (Division 2))
    BZOJ 3261: 最大异或和位置-贪心+可持久化01Trie树
    51nod 1295 XOR key-区间异或最大值-可持久化01Trie树(模板)
    BZOJ 2588: Spoj 10628. Count on a tree-可持久化线段树+LCA(点权)(树上的操作) 无语(为什么我的LCA的板子不对)
    Codeforces 1099 D. Sum in the tree-构造最小点权和有根树 贪心+DFS(Codeforces Round #530 (Div. 2))
    Codeforces 586D. Phillip and Trains 搜索
    Codeforces 734E. Anton and Tree 搜索
  • 原文地址:https://www.cnblogs.com/dingjiaoyang/p/5133141.html
Copyright © 2020-2023  润新知