zoukankan      html  css  js  c++  java
  • 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] ):

         隐藏窗口。
          center():窗口居中显示。
          close():关闭窗口,相当于closeAction值为close的情形。
          maximize():最大化窗口。
          restore():还原窗口大小。
          toggleMaximize():在最大化和还原之间切换。 
          minimize():最小化窗口。
          setActive( Boolean active ):激活窗口。
          focus():窗口获得焦点。
          toBack():后置窗口。
          toFront( [Boolean e] ):前置窗口。
          resize( Ext.Window this, Number width, Number height ):改变大小。



    Ext.grid属性详细信息

    1Ext.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 ):使用一个新的数据集和列模式重新配置表格组件 

    2Ext.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属性定义字符串,例如'style="color:blue"'
    record:当前数据记录对象
    rowIndex:单元格的行索引
    colIndex:单元格的列索引
    store:数据集对象
    xtype:列渲染器类型,默认为gridcolumn,其它可选值有booleancolumn、numbercolumn、datecolumn、 templatecolumn等
    editable:是否可编辑,默认为true
    editor:编辑器
    groupName:
    emptyGroupText:
    groupable: 

    3Ext.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 ) 

    4Ext.grid.AbstractSelectionModel
    主要方法:
    lock():锁定选择区域
    unlock():解锁选择区域
    isLocked():当前选择区域是否被锁定 

    5Ext.grid.CellSelectionModel
    主要方法:
    clearSelections( Boolean preventNotify ):清除选择区域
    getSelectedCell():取得当前选择的单元格,返回一数组,其格式:[rowIndex, colIndex]
    hasSelection():当前是否有选择区域
    select( Number rowIndex, Number colIndex, [Boolean preventViewNotify], [Boolean preventFocus], [Ext.data.Record r] ):选择指定单元格 

    6Ext.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:行索引数组 

    7Ext.grid.CheckboxSelectionModel
    主要配置项:
    singleSelect:是否单选模式,默认为false,即可以选择多条数据
    checkOnly:是否只能通过点击checkbox列进行选择,默认为false
    sortable:是否允许checkbox列排序,默认为false
    width:checkbox列的宽度,默认为20 

    8Ext.grid.RowNumberer
    主要配置项:
    header:行号列表头显示的内容
    width:列宽,默认为23 

    9Ext.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():滚动表格到顶端 

    实战1: 

    让gridpanel的滚动条自动滚动到最后一条记录(动态插入数据): 

    grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount()-1); 

    2:清除gridpanel中有行被选择的状态: 

    grid.getSelectionModel().clearSelections(); 




    Ext.form属性详细信息

    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 属性


    2Ext.form.BasicForm
    配置项:
    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 ):持久化表单数据到记录集中


    3Ext.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()


    4Ext.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()


    5Ext.form.Hidden
    6
    Ext.form.Label
    配置项:
    html:
    text:


    7Ext.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


    8Ext.form.TextArea
    配置项:
    preventScrollbars:是否禁止出现滚动条,默认为false


    9Ext.form.NumberField
    配置项:
    allowDecimals:是否允许输入小数,默认为true
    allowNegative:是否允许输入负数,默认为true
    baseChars:输入的有效数字集合,默认为'0123456789'
    decimalPrecision:数字的精度,默认保留小数点后2 位
    decimalSeparator:十进制分隔符,默认为'.'
    maxValue:允许输入的最大数值
    maxText:超过最大值之后的提示信息
    minValue:允许输入的最小数值
    minText:超过最小值之后的提示信息
    nanText:输入非有效数值之后的提示信息


    10Ext.form.Checkbox
    配置项:
    boxLabel:复选框的文字描述
    checked:复选框是否被选择,默认为false
    handler:当checked 值改变时触发的函数,函数包含两个参数:checkbox、checked
    inputValue:
    方法:
    getValue():返回复选框的checked 状态
    setValue( Boolean/String checked ):


    11Ext.form.CheckboxGroup
    配置项:
    allowBlank:是否允许不选择,默认为true
    blankText:
    columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)
    items:对象数组
    vertical:是否垂直方向显示对象,默认为false


    12Ext.form.Radio
    方法:
    getGroupValue():
    setValue( value {String/Boolean} ):


    13Ext.form.RadioGroup
    配置项:
    allowBlank:
    blankText:


    14Ext.form.ComboBox
    配置项:
    displayField:被显示在下拉框中的字段名
    editable:是否可编辑,默认为true
    forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择
    第一个最接近的值。
    hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,
    当表单提交时在服务器端可以通过该名字取得列表中的所选值
    listWidth:下拉列表的宽度
    minListWidth:下拉列表的最小宽度,默认为70 像素
    loadingText:当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效
    maxHeight:下拉列表框的最大高度,默认为300 像素
    minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4,
    mode='local'默认为0
    mode:下拉列表框的数据读取模式。remote 读取远程数据,local 读取本地数据
    pageSize:下拉列表框的分页大小。该项设置只在mode='remote'时生效
    queryParam:查询的名字,默认为'query',将被传递到查询字符串中
    allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串''
    selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在
    editable=true 时才会生效
    store:列表框绑定的数据源
    transform:将页面中已存在的元素转换为组合框
    lazyInit:延时初始化下拉列表,默认为true
    lazyRender:延时渲染,默认为false
    triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all 和query,默认为query,
    如果设置为all 则会执行allQuery 中设置的查询
    typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),
    默认为false
    value:初始化组合框中的值
    valueField:组合框的值字段
    valueNotFoundText:值不存在时的提示信息
    tpl:Ext 模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式
    方法:
    clearValue():清空字段当前值
    doQuery( String query, Boolean forceAll ):
    getValue():
    getStore():
    setValue( String value ):


    15Ext.form.DateField
    配置项:
    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():取得日期值


    16Ext.form.FieldSet
    配置项:
    animCollapse:动画折叠,默认为false
    checkboxToggle:设置是否显示字段集的checkbox 选择框,默认为false
    checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox 的名字,该属性只有在
    checkboxToggle 为true 时生效
    labelWidth:字段标签的宽度,可以级联到子容器
    layout:布局,默认为form


    17Ext.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.layout属性详细信息

    1Border布局__边界布局

    border布局也称边界布局,他将页面分隔为west,east,south,north,center这五个部分,我们需要在其items中指定使用region参数为其子元素指定具体位置。 

    注意:north和south部分只能设置高度(height),west和east部分只能设置宽度(width)。north south west east区域变大,center区域就变小了。

        参数 split:true 可以调整除了center四个区域的大小。

        参数 collapsible:true 将激活折叠功能。

    center 区域是必须使用的,Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中,当指定布局为border时,如果没有指定center区域时,会出现报错信息。


    2Accordion布局__手风琴布局

    在accordion布局下,在任何时间里,只有一个面板处于激活状态。其中每个面边都支持展开和折叠。

    注意:只有Ext.Panels 和所有Ext.panel.Panel 子项,才可以使用accordion布局。


    Card布局__类似向导

    Card布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。

     注意:由于此布局本身不提供分步导航功能,所以需要用户自己开发该功能。由于只有一个面板处于显示状态,那么在初始时,我们可以使用 setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候,我们可以使用getNext()或getPrev() 来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外,如果面板中显示的是FORM布局,我们在点击下一个面板的时候, 处理FORM中提交的元素,通过AJAX将表单中的内容保存到数据库中或者SESSION中。


    fit 布局

    在Fit布局中,子元素将自动填满整个父容器。

    注意:在fit布局下,对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件,则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变。


    Anchor布局

    anchor布局将使组件固定于父容器的某一个位置,使用anchor布局的子组件尺寸相对于容器的尺寸,即父容器容器的大小发生变化时,使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

    AnchorLayout布局没有任何的直接配置选项(继承的除外),然而在使用AnchorLayout布局时,其子组件都有一个anchor属性,用来配置此子组件在父容器中所处的位置。

    anchor属性为一组字符串,可以使用百分比或者是-数字来表示。配置字符串使用空格隔开,例如:

    anchor:'75% 25%',表示宽度为父容器的75%,高度为父容器的25%。

    anchor:'-295 -300',表示组件相对于父容器右边距为295,相对于父容器的底部位300。

    anchor:'-250 10%',混合模式,表示组件对于如容器右边为250,高度为父容器的10%。


    Absolute布局

    Absolute布局继承Ext.layout.container.Anchor 布局方式,并增加了X/Y配置选项对子组件进行定位,Absolute布局的目的是为了扩展布局的属性,使得布局更容易使用。


    Column布局__列布局

    Column布局一般被称为列布局,这种布局的目的是为了创建一个多列的格式。其中每列的宽度,可以为其指定一个百分比或者是一个固定的宽度。

    Column布局没有直接的配置选项(继承的除外),但Column布局支持一个columnWidth属性,在布局过程中,使用columnWidth指定每个面板的宽度。

    注意:使用Column布局布局时,其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。

    另外,如果任何子面板没有指定columnWidth值,那么它将占满剩余的空间。





    Ext.button属性详细信息

    配置:
    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("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();获取按钮上的文本
    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事件!');
            });



    Ext.tree属性详细信息

    Ext.tree.TreePanel
          主要配置项:
                root:树的根节点。
                rootVisible:是否显示根节点,默认为true。
                useArrows:是否在树中使用Vista样式箭头,默认为false。
                lines:是否显示树线,默认为true。
                loader:树节点的加载器,默认为Ext.tree.TreeLoader。
                selModel:树的选择模式,默认为Ext.tree.DefaultSelectionModel。
                pathSeparator:树节点路径的分隔符,默认为“/”。
                singleExpand:是否一次只展开树中的一个节点,默认为true。
                requestMethod:请求方法,可选值有POST、GET。
                containerScroll:是否将树形面板注册到滚动管理器ScrollManager中。

          主要方法:
                collapseAll():收缩所有树节点
                expandAll():展开所有树节点
                getRootNode():获取根节点
                getNodeById(String id):获取指定id的节点
                expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )
                expandPath( String path, [String attr], [Function callback] )
                getChecked( [String attribute], [TreeNode startNode] )
                selectPath( String path, [String attr], [Function callback] )
                getSelectionModel():

    Ext.data.Node
         主要配置项:
                id:节点id
                leaf:当前节点是否为叶子节点
          主要属性:
                id:节点id
                attributes:节点属性的集合
                parentNode:当前节点的父节点
                childNodes:当前节点所有子节点组成的数组
                firstChild:当前节点的第一个直接子节点,如果没有则为null值
                lastChild:当前节点的最后一个直接子节点,如果没有则为null值
                nextSibling:当前节点的下一个兄弟节点,如果没有则为null值
                previousSibling:当前节点的前一个兄弟节点,如果没有则为null值
          主要方法:
                appendChild( Node/Array node ):追加新的子节点
                bubble( Function fn, [Object scope], [Array args] ):从当前节点开始向上迭代调用指定函数,如果指定函数返回false则将终止迭代。
                      args:传入函数中的参数,默认为当前节点
                cascade( Function fn, [Object scope], [Array args] ):从当前节点开始向下迭代调用指定函数,如果指定函数返回false则将终止迭代。
                contains( Node node ):当前节点是否包含指定子节点。
                eachChild( Function fn, [Object scope], [Array args] ):迭代当前节点的所有子节点调用指定函数,如果指定函数返回false则将终止迭代。
                findChild( String attribute, Mixed value ):查找具有指定属性的第一个子节点。
                findChildBy( Function fn, [Object scope] ):根据自定义函数查找第一个符合要求的子节点,如果自定义函数返回true则说明匹配成功。
                getDepth():取得当前节点的深度,根节点的深度为0
                getOwnerTree():取得当前节点所在树。
                getPath( [String attr] ):取得当前节点对应的路径,这个路径在程序中可用于展开或者选择节点。
                       attr:用于查找路径的属性,默认为节点id
                hasChildNodes():是否有子节点
                indexOf( Node node ):取得指定子节点的索引值,未找到返回-1。
                insertBefore( Node node, Node refNode ):在当前节点的指定子节点之前插入一个新的子节点。
                 node:要插入的新节点
                isAncestor( Node node ):判断指定节点是否为当前节点的父节点(可以是任何一级中的父节点)。
                isFirst():是否为父节点的第一个子节点。
                isLast():是否为父节点的最后一个子节点。
                isLeaf():是否为叶子节点。
                item( Number index ):取得指定索引的子节点。
                remove():从父节点中删除当前节点。
                removeChild( Node node ):删除当前节点的指定子节点。
                replaceChild( Node newChild, Node oldChild ):用新的子节点替换当前节点的指定子节点。
                sort( Function fn, [Object scope] ):用指定的排序函数为当前节点的子节点进行排序。

    Ext.tree.TreeNode
          主要配置项:
                text:节点上的文本信息
                qtip:节点上的提示信息
                icon:节点图标对应的路径
                iconCls:应用到节点图标上的样式
                checked:当前节点的选择状态
                      true:在节点前显示一个选中状态的复选框
                      false:在节点前显示一个未选中状态的复选框
                      不指定该值:不显示任何复选框
                href:节点的连接属性,默认为#
                hrefTarget:显示节点连接的目标框架
                editable:是否允许编辑,默认为true
                expanded:是否展开节点,默认为false
                disabled:是否禁用节点,默认为false
                singleClickExpand:是否通过单击方式展开节点
                allowChildren:是否允许当前节点具有子节点,默认为true
                expandable:当不含子节点时,是否总显示一个加减图标,默认为false
                uiProvider:节点的UI类,默认为Ext.tree.TreeNodeUI
          主要属性:
                text:节点上的文本信息
                disabled:当前节点是否被禁用
          主要方法:
                collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):收缩当前节点
                deep:是否级联收缩全部子节点
                collapseChildNodes( [Boolean deep] ):收缩所有子节点
                disable():禁用当前节点
                enable():启用当前节点
                ensureVisible( [Function callback], [Object scope] ):确保所有父节点都是展开的
                expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):展开当前节点
                expandChildNodes( [Boolean deep] ):展开所有子节点
                isExpanded():当前节点是否展开
                isSelected():当前节点是否被选中
                select():选择当前节点
                setText( String text ):设置当前的文本
                toggle():切换当前节点的展开和收缩状态
                unselect():取消对当前节点的选择
                getUI():取得节点的UI对象

    Ext.tree.AsyncTreeNode
          主要配置项:
                loader:当前节点的树加载器,默认使用树中配置的树加载器
          主要方法:
                isLoaded():当前节点是否已经加载数据
                reload( Function callback, [Object scope] ):重新加载节点数据,并调用回调函数

    Ext.tree.TreeNodeUI
          主要方法:
                getAnchor():从节点的UI中获取焦点的<a>元素
                getIconEl():获取图标的<img>元素
                getTextEl():获取文本节点
                addClass( String/Array className ):
                removeClass( String/Array className ):
                hide():
                show():
                isChecked():取得节点的选择状态,如果当前节点没有复选框则函数返回false
                toggleCheck( Boolean (optional) ):设置节点复选框的选择状态

    Ext.tree.DefaultSelectionModel
          是TreePanel的默认选择模式,该模式一次只能选择树中的一个节点。
          主要方法:
                clearSelections():清除对树中所有节点的选择
                getSelectedNode():取得当前被选中的节点
                isSelected( TreeNode node ):节点是否被选中
                select( TreeNode node ):选中指定节点
                unselect( TreeNode node ):取消指定节点的选中状态
                selectNext():选择当前被选节点的下一个节点
                selectPrevious():选择当前被选节点的上一个节点

    Ext.tree.MultiSelectionModel
          是TreePanel的多选择模式,该模式一次可以选择树中的多个节点。
          主要方法:
                clearSelections():清除所有节点的选中状态
                getSelectedNodes():取得被选节点组成的数组
                isSelected( TreeNode node ):节点是否被选中
                select( TreeNode node, [EventObject e], Boolean keepExisting ):选中指定节点
                unselect( TreeNode node ):取消指定节点的选中状态

    Ext.tree.TreeLoader
          提供了对子节点的延时加载功能,请求指定的URL地址,返回子节点数据,返回的数据格式如下: 

    [{  id: 1,  text: "node1",   leaf: true,   check: false   }  

     {id: 2,  text: "node2",   children: [{  

                     id: 3,    text: "node3",  leaf: true  

                    }]  

    }]  
          树节点展开时,当前节点的id会作为请求参数被发送到服务器,在服务器可以通过node参数名进行获取。
          主要配置项:
                dataUrl:获取子节点的URL地址。
                baseAttrs:子节点的基本属性对象,该对象中的属性将被添加到树加载器创建的所有子节点上。优先服务器返回的同名属性值。
                baseParams:基本的请求参数,这些参数会被附加到每一个节点的请求中。
                clearOnLoad:在加载前是否移除已存在的子节点,默认为true。
                preloadChildren:在第一次加载子节点后是否递归加载所有子节点。
                requestMethod:请求方法,可选值有POST、GET。
                uiProviders:加载器创建子节点的UI实现类。
                url:与dataUrl作用相同。
          主要方法:
                load( Ext.tree.TreeNode node, Function callback, (Object) scope ):从指定的URL加载树节点。
                node:需要加载子节点的树节点。

    Ext.tree.TreeEditor
          主要配置项:
                alignment:对齐方式。
                editDelay:两次点击节点触发编辑操作的延时时间,默认为350毫秒。
                hideEl:在显示编辑器组件时是否隐藏绑定元素。
                maxWidth:编辑器的最大宽度,默认为250。

    Ext.tree.TreeSorter
          主要配置项:
                property:用于排序的节点属性名,默认为text。
                dir:排序方向,可选值有asc、desc,默认为asc。
                caseSensitive:是否区分大小写,默认为false。
                folderSort:叶节点是否排在非叶节点之下,默认为false。
                leafAttr:叶子节点在folder排序时的值,默认为leaf。
                sortType:一个自定义函数用于在排序前转换节点值。

    //可拖拽配置

    viewConfig:{

      plugins :{

        ptype:'treeviewdragdrop',

        appendOnly:true   

      },

      listeners:{

        drop:function(node,data,overModel,dropPosition,options){

        //ajax的操作把数据同步到后台数据库

        //alert("把:"+data.records[0].get('text')+" 移动到:"+overModel.get("text"));    

        }

      }

    }


    Ext.store属性详细信息

    store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表

    方法:不列举继承来的方法
    Store( Object config )
    构造,config定义为{
     autoLoad : Boolean/Object,    //自动载入
     baseParams : Object,    //只有使用httpproxy时才有意义
     data : Array,        //数据
     proxy : Ext.data.DataProxy,//数据代理
     pruneModifiedRecords : boolean,//清除修改信息
     reader : Ext.data.Reader,    //数据读取器
     remoteSort : boolean,    //远程排序?
     sortInfo : Object,    //{field: "fieldName", direction: "ASC|DESC"}这样的排序对象
     url : String,        //利用url构造HttpProxy
    }

    add( Ext.data.Record[] records ) : void
    增加记录records 到store

    addSorted( Ext.data.Record record ) : void
    增加record到store并排序(仅本地排序时有用)

    clearFilter( Boolean suppressEvent ) : void
    清除过滤器

    collect( String dataIndex, [Boolean allowNull], [Boolean bypassFilter] ) : Array
    收集由dataIndex指定字段的惟一值

    commitChanges() : void
    提交Store所有的变更,会引发Update事件


    filter( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : void
    设定过滤器
    field:String    //字段名
    value:String    //RegExp 如果是字符器,检查field是否以value开始,如果是正则,检查是否匹配
    anyMatch:Boolean //匹配任何部分而不仅令是开始
    caseSensitive:Boolean //大小写敏感?

    filterBy( Function fn, [Object scope] ) : void
    更强悍的过滤方法.fn接收两个参数record和id

    find( String property, String/RegExp value, [Number startIndex], [Boolean anyMatch], [Boolean caseSensitive] ) : Number
    找到符合条件的第一条记录,参数同filter

    findBy( Function fn, [Object scope], [Number startIndex] ) : Number
    参见filterBy

    getAt( Number index ) : Ext.data.Record
    getById( String id ) : Ext.data.Record
    依充号/id得到record对象

    getCount() : void
    得到记录数

    getModifiedRecords() : Ext.data.Record[]
    得到修改过的记录集

    getRange( [Number startIndex], [Number endIndex] ) : Ext.data.Record[]
    得到指定范围的记录集合

    getSortState() : void
    得到排序状态:显然不是void而是返回一个排序对象,同sortInfo一样的结构{field: "fieldName", direction: "ASC|DESC"}

    getTotalCount() : void
    这个对于翻页信息还是很有用的

    indexOf( Ext.data.Record record ) : Number
    indexOfId( String id ) : Number
    由记录或id得到序号

    insert( Number index, Ext.data.Record[] records ) : void
    在指定的位置插入记录,并引发add事件

    isFiltered() : Boolean
    当前设置了过滤器则返回真

    load( Object options ) : void
    由指定的Proxy使用指定的reader读取远程数据
    options定义为
    {
        params :Object,    //请求url需要附加的参数
        callback :Function//回叫方法,接收三个参数
          //r : Ext.data.Record[] //返回的record数组
          //options: Options load方法传入的options
          //success: Boolean //成功
        scope :Object, //范围.默认是store本身
        add :Boolean 追加还是更新
    }


    loadData( Object data, [Boolean append] ) : void
    用法比load简单一点,目的是一样的,只是这次数据由本地读取

    query( String field, String/RegExp value, [Boolean anyMatch], [Boolean caseSensitive] ) : MixedCollection
    queryBy( Function fn, [Object scope] ) : MixedCollection
    查询,参数和find类似,但返回所有符合条件的record,而不是第一个符合条件记录的序号

    rejectChanges() : void
    放弃所有的变更

    reload( [Object options] ) : void
    重新载入,相当于 load(options,false),如果连options都没有传入,则取最后一次load时使用的参数

    remove( Ext.data.Record record ) : void
    移除指定记录

    removeAll() : void
    移除所有记录

    setDefaultSort( String fieldName, [String dir] ) : void
    设置默认排序规则

    sort( String fieldName, [String dir] ) : void
    排序

    sum( String property, Number start, Number end ) : Number
    对property字段由start开始到end求和

    事件列表
    add : ( Store this, Ext.data.Record[] records, Number index )
    beforeload : ( Store this, Object options )
    clear : ( Store this )
    datachanged : ( Store this )
    load : ( Store this, Ext.data.Record[] records, Object options )
    loadexception : ()
    metachange : ( Store this, Object meta )
    remove : ( Store this, Ext.data.Record record, Number index )
    update : ( Store this, Ext.data.Record record, String operation )

  • 相关阅读:
    zabbix linux 客户端编译安装
    yum安装grafana
    zabbix 安装和配置
    安装PHP
    wrk压力测试
    新加坡地图
    shell中去除变量去除所有空格或者去除变量首尾空格的常用几种方法
    新鲜出炉!春招-面试-阿里钉钉、头条广告,美团面经分享,看我如何拿下offer!
    面试阿里,字节跳动90%会被问到的Java异常面试题集,史上最全系列!
    最新出炉,字节跳动一二三面面经,看我如何一步一步攻克面试官?
  • 原文地址:https://www.cnblogs.com/study121007/p/4592872.html
Copyright © 2011-2022 走看看