Extjs 备忘录

今天改点老程序，用到了Extjs，记录一下遇到的问题和解决办法。

JavaScript字符串替换

根据Ext文档，有多种替换方式。我想要不区分大小写的替换，而目前Extjs文档中提供的方法无效。

//Extjs文档：
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace("apples", "oranges", "gi");
print(newstr);
//！文档说结果为： "oranges are round, and oranges are juicy."， 

但上面的代码并没有产生预期的效果，第一个Apples并没有被替换。改用以下方法实现：

replaceIgnoreCase : function(str, searchStr, replaceStr) {
        var regEx = new RegExp(searchStr, "ig");
        var str = str.replace(regEx, replaceStr);

        return str;
}

var result = this._replaceIgnoreCase('This iS IIS', 'is', 'as'); 

//result为：Thas as Ias

设置Extjs Grid Panel的行高

//gridPanel的定义中：

viewConfig: {                               
  getRowClass: function (record, rowIndex, rp, store) {
    return "grid-row-height";
  }
},

//CSS定义：
.grid-row-height {
    height: 35px;
}

设置Extjs Grid 单元格中的文字自动换行

Extjs gridPanel单元格的内容如果超出，默认是显示三个点，要想让它换行，其实很简单：

//gridPanel的定义，注意tdCls
columns: [
            {
                header: 'Sentence',
                dataIndex: 'sentence',
                flex: 2,
                renderer: this.sentenceRenderer,
                tdCls:'wrap-text'
            },    


//CSS定义
td.wrap-text div {
    white-space: normal;
}

设置Extjs Grid 单元格中的文字换行后的行高

Extjs gridPanel单元格的内容自动换行号，默认行高太小，只需将上面的CSS修改为：

//CSS定义
td.wrap-text div {
    white-space: normal;
    line-height: 130%;
}

//130%表示1.3倍行高。