EXTJS API属性随手笔记

1. templatecolumn

  一个用于简化列定义的子类，可以通过配置tpl（XTemplate）来把Model`s data转换为需显示的值。

  {
    text: '二维码', xtype: 'templatecolumn', dataIndex:'PRD_QRCODE', minWidth: 120,sortable: true,
    tpl: "<a href=javascript:Ext.create('vapp.view.Report.WIN_PRD_View',{PRD_ID:'{PRD_ID}'}).show(){PRD_QRCODE}</a>", 
    flex: 2
  }

 tpl 列值是一个二维码数字链接

      

 2. emptyText

        放置到空表单项中的默认文本（默认为null）

{
     xtype: 'textfield',
     fieldLabel: '单据编号',
     emptyText: '留空则系统自动生成',
     name: 'BILL_CODE'
} 

     

3. labelAlign 

     控制fieldLabel的位置和对齐方式。

       labelAlign: 'left'  默认，标签位于域的左边，其文本左对齐。其宽度由labelWidth配置决定。

       labelAlign: 'top'   标签位于域的顶端。

       labelAlign: 'right'  标签位于域的右边，其文本右对齐。其宽度由labelWidth配置决定。

labelAlign: 'right'	labelAlign: 'left'	labelAlign: 'top'

4.split

       split:Boolean 此配置项会应用到当前布局管理下的子项（‘items’）中。除中心区域外，所有含split:true属性的区域都将得到一个Splitter并允许手动调整大小。

        

 5.rootVisible

     rootVisible:false     隐藏根节点

rootVisible:false	rootVisible:rue

6. maximized

    maximized: Bollean  为真时初始化以最大状态显示窗体（ maximize 美 [ˈmæksɪˌmaɪz] 使...增加到最大限度 ，最大化）

    maximizable: Boolean  为真时显示‘maximized’工具按钮并且允许用户最大化窗口，为假时隐藏最大化按钮并且不允许最大化窗口。

7.modal

  modal: true   为真 当显示时，制作窗口模板并且掩饰它背后的一切，为假时显示它除了限制访问其他UI元素。

modal: false	modal: true

8. tabpanel 

     xtype: 'tabpanel'  选项卡面板是允许用户在几个全面屏之间切换的好方法。选项卡面版中的每个组件都有自己的选项卡，点击时会显示该组件。

 

 9.columnWidth   列宽度

columnWidth: .8	columnWidth: 1

10. 

layout{
      type: 'vbox',       
      pack: 'start',    
      align: 'stretch'   
}

   vbox    所有子组件在容器中垂直排列 

   pack     控制子组件如何被打包在一起。其属性值为：start 子组件被包在一起放在容器的左边（默认）；center 放在容器中间；end 放在容器右边 

   align   控制子组件在容器中的对齐方式。其参数的有效值为：top默认值 各子组件在容器顶部水平对齐；middle 在容器中间水平对齐；stretch 各子组件的高度拉伸至与容器高度相等

11. fieldset

  xtype: 'fieldset'

FieldSet 一般是一个 Containers, 用来包含一组简单的 表单域, 默认 子项的布局方式 layout 是 'anchor'

FieldSet 可以配置为可展开/收缩的; 有两种可选的方式:

1. 设置 collapsible 为 true; 将会在 组头标题 后面创建收缩按钮,或者:
2. 设置 checkboxToggle 为 true; 和使用 collapsible 类似, 但创建的不是收缩按钮, 而是 checkbox. 当勾选 checkbox 时 控件组展开, 取消选中则收缩. 而 checkbox 也会包含在 表单提交参数 中,使用 checkboxName 作为参数名.

 12 常见属性

  maximized: true       // 为真时初始化以最大化状态显示窗体

  maximizable: true      // 为真时显示'maximized'工具按钮并且允许用户最大化窗口，为假时隐藏最大化按钮并且不允许最大化窗口。

  modal: true                // 为真 当显示时，制作窗口模板并且掩饰他背后的一切，为假时显示它除了限制访问其他UI元素。

  xtype: 'tabpanel'        // 选项卡面板是允许用户在几个全面屏页面之间切换的好方法，选项卡面板中的每个组件都有自己的选项卡，点击时会显示该组件。

  autoScroll: true         // 自动显示滚动条， false 禁止滚动条 ，默认设置

  columnWidth: 1        // 列宽度 值为1时，行充满整个窗体。

  readOnly: true          //只读 属性

  xtype: "label"            //一个简单的标签组件，允许使用html配置插入内容

  xtype: 'fieldset'         //用来包含一组简单的表单域

  collapsible:true        //折叠、伸缩

  displayField: "PRD_CATALOG_NAME"       // 将相关的数据域名称绑定到ComboBox中

  valueField: "PRD_CATALOG_CODE"         // 将相关的数据域值绑定到ComboBox中

  isValueDisplay: true     // 原样显示value 值

  outMapping: [["PRD_CATALOG_NAME","PRD_CATALOG_NAME"],["GUIGE","GUIGE"]]        // 带出中括号中其他显示值

  lock: true             //锁

 limitCount: 1       //只能选1个

  decimalPrecision: 2     // 英[ˈdesɪml prɪˈsɪʒn] 小数点后允许的最大精度

（decimalPrecision: Number/Boolean //滑动条的值，在小数点后面的位数精度。要禁止四舍五入，请配置为false）

  stripeRows: true      // 美[straip] 隔行换色 True 实现隔行换颜色的效果

  ellipsis(String value, Number length, Boolean word): String      对大于指定长度的字符串，进行裁剪，增加省略号('...')的显示 （英音 [ɪˈlɪpsɪs] 省略的意思）

  xtype: 'combo'        // ComboBox 控件支持自动完成、远程加载、和许多其它特性。就像是传统的HTML文本<input>域和<select>域的综合，用户可以自由在域中键入或者从下拉列表中选择值。

  typeAhead: true         // 为true时，配置了延迟后，如果匹配到已知的值将填充和自动选择键入的文本其余部分。默认false

  triggerAction: 'all'         // 触发器被点击时执行的操作。‘all’指定allQuery配置项执行查询。‘query’使用原始值执行查询。

  emptyText: "请输入二维码或物料单号关键字"     //放入到空表单项中的默认文本

 13.

layout: {
     type: 'vbox',      // 所有子组件在容器中垂直排列
     pack: 'start',     // 控制子组件如何被打包在一起。此属性有效值为:start 左边 center居中 end 右边
     align: 'stretch'   // 控制子组件在容器中的对齐方式。stretch 子组件的高度拉伸至与容器的高度相等。
}

{     // 日期时间显示
   text: '时间',dataIndex: 'SUBMIT_TIME', width:120, 
   renderer: function(val){
       if(val !=null)  return new Date(val).format("YYYY-MM-DD hh:mm");
   }
}