在Custom borad中，尝试创建一个约有8列的Tree网格，其中三列是rally.grid.column，另外4列是使用'Ext.grid.column.Template'创建的自定义列。 前3列（'rally.grid.column'）是可排序的，而其他4列（'Ext.grid.column.Template'）无法排序。
附加代码，有人可以引导我到一个链接，在其中我可以了解如何向自定义列添加排序功能
=====下面的代码===== 1个模板列
Ext.define('AncestorTemplateColumn', {
extend: 'Ext.grid.column.Template',
alias: ['widget.ancestortemplatecolumn'],
//align: 'center',
sortable: true,
width: '15%',
config: {
// align: 'end',
},
initComponent: function() {
var me = this;
me.sortable = true;
me.align = 'center';
me.tpl = new Ext.XTemplate('<tpl><div style="text-align:left;">{[this.getAncestorString(values)]}</div></tpl>', {
ancestorName: me.ancestorName,
// dataIndex: 'FormattedId',
getAncestorString: function(values) {
if (values.FormattedID) {
return Ext.String.format("<a href=\"{0}\" target=\"blank\">{1}</a>: {2}", Rally.util.Navigation.getDetailUrl(values), values.FormattedID, values.Name);
}
return '';
}
});
// me.hasCustomRenderer = true;
me.callParent(arguments);
console.log("what is me ", me);
console.log("Columns", me.getColumns);
},
getValue: function() {
return values[this.dataIndex] || 0;
},
defaultRenderer: function(value, meta, record) {
var data = Ext.apply({}, record.get(this.ancestorName)); //, record.getAssociatedData());
return this.tpl.apply(data);
}'
});
2。 OverRide.js
Ext.override(Rally.ui.grid.TreeGrid, {
_mergeColumnConfigs: function(newColumns, oldColumns) {
console.log('calling _mergeColumnConfigs ....');
var mergedColumns = _.map(newColumns, function(newColumn) {
var oldColumn = _.find(oldColumns, { dataIndex: this._getColumnName(newColumn) });
if (oldColumn) {
return this._getColumnConfigFromColumn(oldColumn);
}
return newColumn;
}, this);
mergedColumns = mergedColumns.concat(this.config.derivedColumns);
return mergedColumns;
},
_getColumnConfigsBasedOnCurrentOrder: function(columnConfigs) {
console.log('calling _getColumnConfigsBasedOnCurrentOrder ....');
return _(this.headerCt.items.getRange()).map(function(column) {
//override: Added additional search for column.text
return _.contains(columnConfigs, column.dataIndex) ? column.dataIndex : _.find(columnConfigs, { dataIndex: column.dataIndex, text: column.text, sortable: 'true' });
}).compact().value();
},
_restoreColumnOrder: function(columnConfigs) {
console.log('calling _restoreColumnOrder ....');
var currentColumns = this._getColumnConfigsBasedOnCurrentOrder(columnConfigs);
var addedColumns = _.filter(columnConfigs, function(config) {
return !_.find(currentColumns, { dataIndex: config.dataIndex }) || Ext.isString(config);
});
return currentColumns.concat(addedColumns);
},
_applyStatefulColumns: function(_columns) {
console.log("******* _applyStatefulColumns Called 1**********", this);
console.log("******* _applyStatefulColumns Called 2 **********", this.alwaysShowDefaultColumns);
console.log("******* _applyStatefulColumns Called 3 **********", this.config.derivedColumns);
// this.alwaysShowDefaultColumns = true;
if (this.alwaysShowDefaultColumns) {
_.each(this.columnCfgs, function(columnCfg) {
if (!_.any(_columns, { dataIndex: this._getColumnName(columnCfg), sortable: true })) {
_columns.push(columnCfg);
}
}, this);
}
/*
console.log("Call now ..");
if (this.config && this.config.derivedColumns) {
// Merge the derived column config with the stateful column if the dataIndex is the same,
// Otherwise add the derived columns if they aren't present.
//this.columnCfgs = columns.concat(this.config.derivedColumnCfgs);
console.log("Call me ..");
_.each(this.config.derivedColumns, function(derivedColumns) {
// Search by dataIndex or text
var columnName = this._getColumnName(derivedColumns);
var columnState = _.find(columns, function(value) {
console.log("Value ==>", value);
return (value.dataIndex === columnName || value.text === columnName);
});
if (columnState) {
// merge them (add renderer)
_.merge(columnState, derivedColumns);
} else {
// insert the derived column at the end
columns.push(derivedColumns);
}
}, this);
}
*/
if (this.config && this.config.derivedColumns) {
console.log("++++++++++++++++++++++++++++++++++++++++++++ Somebody Calle me ... ", this.config);
console.log("Columns before: ", _columns, "To be appended: ", this.config.derivedColumns, "this.columnConfigs: ", this.columnCfgs);
for (var i = 0; i < this.config.derivedColumns.length; i++) {
this.config.derivedColumns[i]['sortable'] = true;
}
this.columnCfgs = _columns.concat(this.config.derivedColumns);
} else {
this.columnCfgs = _columns;
}
console.log("*+* Column Config ===> ", this.columnCfgs);
console.log("*+* Column Config 2 ===> ", this.columns);
this.enableSort
var cols = this.columns;
console.log("++++++ Cols", cols);
/*
for (var i = 0; i < this.cols.length; i++) {
// console.log("*+* Column Config 2 ===> ", this.columns[i]);
}
*/
this.sortableColumns = true;
console.log("*+* Column Config 1 ===> ", this);
}
});
Ext.override(Rally.ui.inlinefilter.AdvancedFilterRows, {
_getRowConfig: function() {
console.log("Overiding Advance Filters ......");
rowconfig = Ext.merge({
xtype: 'rallyancestorfilterrow',
autoExpand: this.autoExpand,
model: this.model,
context: this.context,
focusPropertyField: false,
operatorFieldConfig: this.operatorFieldConfig,
propertyFieldConfig: this.propertyFieldConfig,
listeners: {
addrow: function() {
this._addRow(true);
},
removerow: this._removeRow,
scope: this
}
}, this.rowConfig);
console.log("rowconfig ", rowconfig);
return rowconfig;
}
});
CustmApp.js
getColumnConfigs: function() {
this.logger.log('getColumnConfigs');
var cols = [{
dataIndex: 'Name',
text: 'Name',
sortable: 'false'
}, {
dataIndex: 'ScheduleState',
text: 'Schedule State',
sortable: 'false'
}
/*
, {
dataIndex: this.getFeatureName(),
text: 'Hello'
//this.getFeatureName()
}
*/
].concat(this.getDerivedColumns());
this.logger.log('getColumnConfigs cols', cols);
return cols;
}，
getDerivedColumns：function（）{
this.logger.log（“ ==============正在输入getDerivedColumns ...”，this.portfolioItemTypeDefs）;
var cols = [];
//Ext.Array.each(this.portfolioItemTypeDefs，function（p）{
for（var i = 0; i }， var name = this.portfolioItemTypeDefs[i].TypePath.toLowerCase().replace('portfolioitem/', '');
console.log("============== this.portfolioItemTypeDefs[i].Name", this.portfolioItemTypeDefs[i].Name)
cols.push({
// dataIndex: ScheduleState,
ancestorName: name,
// align: 'centre',
// sortable: 'true',
// width: '200',
xtype: 'ancestortemplatecolumn',
text: this.portfolioItemTypeDefs[i].Name
});
}
this.logger.log("Exiting the getDerivedColumns :: ", cols);
return cols;