zoukankan      html  css  js  c++  java
  • extjs的相关属性

    通用属性:

        labelSeparator:''//表示fieldLabel后不会显示冒号“:”
    
        readOnly:true//仅仅读
    
        focusCls: 'txtHalfInput'//有焦点时的样式
    
        maxLength:3, enforceMaxLength:true//输入位数check
    
        fieldStyle: 'margin-top:3px;'//display上下不正确齐解决的方法

    Ext.button.Button

    属性:

    enableToggle:true//设置button为开关状态
    
    pressed:true//开关没被按下状态
    
    disabled: true//使button不可用,false可用

    方法:

    var pressed = Ext.getCmp('buttonGuard').pressed;//是否是被按下的状态

    Ext.form.field.Text

    属性:

        fieldStyle: 'ime-mode:disabled',//设置text的样式
    
        fieldCls: 'txtHalfInput',//设置text的class

    方法:

            focus(true,600);//设置焦点,true表选中内容,false表仅仅设焦点;600表页面载入完成0.6秒后运行
    
    

    Ext.form.field.ComboBox

    属性:

        valueField:'ID'  //下拉里的key值
    
        displayField: 'NAME'//下拉里显示的内容
    
        editable: false//false不可手动改值,true能够手动改
    
        validator: function (v) {//表单项自己定义check
    
               return 'unvalidator';//返回true表示合法,否则为表单错误提示信息
    
        }


    方法:

    get/setRawValue//得到或设置combo所选值


    Ext.form.NumberField

    属性:

    hideTrigger: true,//不显示控件右边的上下箭头
    
    //实现焦点一离开后。1.00直接变成1
    
    Ext.form.GNumberField = Ext.extend(Ext.form.NumberField, {
    
       setValue: function (v) {
    
           v = typeof v == 'number' ?

    v : String(v).replace(this.decimalSeparator, "."); v = isNaN(v) ?

    '' : String(v).replace(".", this.decimalSeparator); //this.replaceDecimalVal(v); // if you want to ensure that the values being set on the field is also forced to the required number of decimal places. // (not extensively tested) v = isNaN(v) ? '' : this.fixPrecision(String(v).replace(".", this.decimalSeparator)); var ret = Ext.form.NumberField.superclass.setValue.call(this, v); this.setRawValue(v);//没有这句则控件上不显示1.00 return ret; }, fixPrecision: function (value) { var nan = isNaN(value); if (!this.allowDecimals || this.decimalPrecision == -1 || nan || !value) { return nan ? '' : value; } value = this.replaceDecimalVal(value); return parseFloat(value).toFixed(this.decimalPrecision); }, //防止四舍五入 replaceDecimalVal: function (v) { var vArr = v.toString().split('.'); if (vArr.length > 1) { if (vArr[1] > this.decimalPrecision) { var dec = vArr[1].substring(0, this.decimalPrecision); v = vArr[0] + '.' + dec; } } return v; } }


    Ext.tree.Panel

    属性:

        rootVisible: true//显示树的根结点,false不显示
    
        collapsible: true//true能够点左箭头折叠,false不可折叠
    
        leaf: true//true表示是子结点,而且不能再有子结点
    
        expanded: true//设置结点自己主动展开
    
        root: {//树结点
    
                   text: '$',//结点显示内容
    
                   expanded: true,//展开结点
    
                   children: [//子结点
    
                       {
    
                           text: '部门1',
    
                           expanded: true,
    
                           children: [
    
                               { id: '1', text: 'power1', leaf: true }
    
                           ]
    
                       },
    
                       { text: '部门2', expanded: true },
    
                       {
    
                           text: '部门3',
    
                           expanded: true,
    
                           children: [
    
                               { text: 'power1', leaf: true },
    
                               { text: 'power2', leaf: true },
    
                               { text: 'power3', leaf: true }
    
                           ]
    
                       }
    
                   ]
    
               }
    
        listeners: {
    
        itemclick: function (treePnl, record, item, index, e) {//树结点的click事件
    
        //record.data.root=true 表示该结点是根结点
    
        //record.data.parentId = 'root' 表示该结点的父结点为根结点,也表示父结点的ID
    
               if (!record.data.root && record.data.parentId != 'root') {
    
                   var parentText = record.parentNode.data.text;//父结点的显示内容
    
                   var text = item.innerText;//当前结点的显示内容
    
                   Ext.getCmp('displayPSTGroupName').setValue(parentText);
    
                   Ext.getCmp('displayPSTName').setValue(text);
    
               } else {
    
                   Ext.getCmp('displayPSTGroupName').setValue('');
    
                   Ext.getCmp('displayPSTName').setValue('');
    
               }
    
        }
    
        cellclick: function (view, e, columnIndex, rowItem) {
        
    
            //view:
    
            //e:
    
            //columnIndex:所点列的索引,0開始
    
            //rowItem: rowItem.data表示选中行的数据
        
    
        }
    
        }


    方法:

        setNodeFocus(结点ID)//设置某结点为选中状态
    
        collapse()//让整个树折叠起来
    
        Ext.getCmp('treePnl').collapseAll();//收起全部的结点
    
        Ext.getCmp('treePnl').getStore().getNodeById('root').expand();//展开根结点


    Ext.GridStore

    属性:

        autoLoad: true//自己主动载入数据
    
        dataFields:[{name:EVENT_ID}]//字段名

    方法:


    var minGenTime = store.min('EVENT_GEN_TIME');//获取字段EVENT_GEN_TIME最小值
    
    var r = {};
    
    store.each(function (record) {//遍历数据
    
               if (record.get('EVENT_GEN_TIME') == minGenTime) {
    
                   r = record.raw;//获取一条数据
    
                   return;
    
               }
    
    });

    事件:


    beforeload:function(store, operation, options){}//数据载入前发生的事件
    
    datachanged:function(store, options){}//数据发生改变后发生的事件


    Ext.grid.Panel

    属性:

        multiSelect: true//同意item项能够多选,false不可
    
        selType: 'cellmodel'//表示点选cell,无该属性则点选行
    
        plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})]//该属性配合selType:'cellmodel'可实现编辑cell效果
    
        columns:[new Ext.grid.RowNumberer({  30, locked: false, header: " " })]//自己主动升番番号

    方法:

        Ext.getCmp('gridEvent').getStore().removeAll();//清除grid里的记录
    
        Ext.getCmp('grid').plugins[0].completeEdit();//当cellEditing时,编辑完不直接离开焦点而是直接点submit。此时会出现edit里仍然是原值的情况。解决的方法是调一下completeEdit方法
    
        treePnl.fireEvent('itemclick', treePnl, treePnl.getSelectionModel().getLastSelected());//触发treeNode的单击事件
    
        //加入事件
    
        Ext.getCmp('xxxxx').on('事件名', function(){})
    
        //JS日期控件要格式化日期后再往后台传值
    
        CREATE_TIME: !Ext.isEmpty() ? '' : Ext.util.Format.date(Ext.getCmp('datefieldLoginBegin').getValue(), 'Y/m/d')
    
        //日期控件check
    
        Ext.getCmp('datefieldStartDate').isValid()
    
        //tabPanel子项加入关闭事件
    
        contentPanel.add({
    
              id: nodeId,
    
              title: nodeText,
    
              closable: true,
    
              header: false,
    
               listeners: { 'beforedestroy': function () { callDestroy(nodeId); } },//加入tab项的关闭事件
    
               html: '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src= "' + node.attributes.actionPath + '"></iframe>'
    
        });
    
        //title居中
    
        title: '数据总览',
    
        titleAlign: 'center',
    
        style: 'text-align:center',
    
        //解决双击treeNode后变成目录
    
        treeItemClick: function (treePnl, record, item, index, e) {
    
                record.data.leaf = true;//在treeclick方法最后一行加上这句
    
        },



  • 相关阅读:
    【数据结构】郝斌数据结构——笔记04
    【数据结构】郝斌数据结构——笔记03
    【数据结构】郝斌数据结构——笔记02
    【JavaScript】下拉联动回显问题
    【数据结构】郝斌数据结构——笔记01
    【JavaScript】Jquery事件绑定问题
    【Java-GUI】12 Swing07 JList
    【Java-GUI】11 Swing06 JTable
    【Java-GUI】10 Swing05 JTree
    【JavaScript】下滑线命名转驼峰命名处理
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/5080539.html
Copyright © 2011-2022 走看看