如何获取actioncolumn图标组件?
How to get actioncolumn icon component?
我搜索了两天,但找不到如何访问 rowselect 上的 actioncolumn
组件(不是 html)。我需要使用 Saki's component communication technique (source) 设置图标点击事件。
我的专栏看起来像:
我找到了如何 show/hide 按钮更改行选择的方法(此代码在 GridPanel
中使用):
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
beforerowselect: function(grid, rowIndex, record) {
// 7 is the last cell index
var cell = grid.grid.getView().getCell( rowIndex, 7 );
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Delete class that hides. Class 'x-hidden' also works
currentIcon.removeClass('x-hide-display'); //show icon
}
});
},
rowdeselect: function(grid, rowIndex, record) {
// 7 is the last cell index
var cell = grid.grid.getView().getCell( rowIndex, 7 );
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Delete class that hides. Class 'x-hidden' also works
currentIcon.addClass('x-hide-display'); //show icon
}
});
}
}
});
好的。下一个。我想在点击时显示另一个 window(设置点击事件)。但我不知道如何从 Window
/Viewport
:
获取访问权限
//get items
this.loanGrid = this.items.itemAt(0);
this.documentsGridWindow = this.items.itemAt(2);
//add events
this.loanGrid.on ({
scope: this,
afterrender: function() {
selModel = this.loanGrid.getSelectionModel();
selModel.on({
scope: this,
rowselect: function (grid, rowIndex, keepExisting, record) {
//HOW TO GET actioncolumn 2nd button here???
}
});
}
});
我还尝试在 beforerowselect
上将 id
设置为此图标,但在 rowselect
上此代码 Ext.getCmp('icon-id')
returns undefined
。
up()
和 down()
函数对我也没有帮助 =(
请帮助! =)
p.s。很遗憾,但是 Ext.ComponentQuery
仅适用于 ExtJS 4。
所以最后我重新编写了应用程序的某些部分。
首先我们需要给actioncolumn
添加一些选项:
dataIndex: 'action',
id: 'action',
网格行按钮 show/hide 现在独立于 actioncolumn
移动:
/**
* buildSelectionModel
*/
buildSelectionModel: function() {
var sm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
scope: this,
rowselect: function(grid, rowIndex, record) {
this.toggleFirstButtonShowState(grid.grid, rowIndex);
},
rowdeselect: function(grid, rowIndex, record) {
this.toggleFirstButtonShowState(grid.grid, rowIndex);
}
}
});
return sm;
},
/**
* toggleFirstButtonShowState
*/
toggleFirstButtonShowState: function(grid, rowIndex) {
//'action' is data index of
var colIndex = this.getColumnIndexByDataIndex(grid, 'action');
console.log(colIndex);
// 7 is the last cell index
var cell = grid.getView().getCell( rowIndex, colIndex);
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Show/delete class that hides. Class 'x-hidden' also works
currentIcon.toggleClass('x-hide-display'); //show/hide icon
}
});
},
getColumnIndexByDataIndex: function(grid, dataIndex) {
//columns
gridColumns = grid.getColumnModel().columns;
for (var i = 0; i < gridColumns.length; i++) {
if (gridColumns[i].dataIndex == dataIndex) {
return i;
}
}
Viewport
部分:
//get selection model
selModel = this.loanGrid.getSelectionModel();
selModel.on({
scope: this,
rowselect: function (grid, rowIndex, keepExisting, record) {
//get second icon in actioncolumn
var icon = grid.grid.getColumnModel().getColumnById('action').items[1];
//save context
var self = this;
//add handler by direct set
icon.handler = function(grid, rowIndex, colIndex) {
//open documents window
self.documentsGridWindow.show();
};
}
});
一切正常!
我搜索了两天,但找不到如何访问 rowselect 上的 actioncolumn
组件(不是 html)。我需要使用 Saki's component communication technique (source) 设置图标点击事件。
我的专栏看起来像:
我找到了如何 show/hide 按钮更改行选择的方法(此代码在 GridPanel
中使用):
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
beforerowselect: function(grid, rowIndex, record) {
// 7 is the last cell index
var cell = grid.grid.getView().getCell( rowIndex, 7 );
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Delete class that hides. Class 'x-hidden' also works
currentIcon.removeClass('x-hide-display'); //show icon
}
});
},
rowdeselect: function(grid, rowIndex, record) {
// 7 is the last cell index
var cell = grid.grid.getView().getCell( rowIndex, 7 );
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Delete class that hides. Class 'x-hidden' also works
currentIcon.addClass('x-hide-display'); //show icon
}
});
}
}
});
好的。下一个。我想在点击时显示另一个 window(设置点击事件)。但我不知道如何从 Window
/Viewport
:
//get items
this.loanGrid = this.items.itemAt(0);
this.documentsGridWindow = this.items.itemAt(2);
//add events
this.loanGrid.on ({
scope: this,
afterrender: function() {
selModel = this.loanGrid.getSelectionModel();
selModel.on({
scope: this,
rowselect: function (grid, rowIndex, keepExisting, record) {
//HOW TO GET actioncolumn 2nd button here???
}
});
}
});
我还尝试在 beforerowselect
上将 id
设置为此图标,但在 rowselect
上此代码 Ext.getCmp('icon-id')
returns undefined
。
up()
和 down()
函数对我也没有帮助 =(
请帮助! =)
p.s。很遗憾,但是 Ext.ComponentQuery
仅适用于 ExtJS 4。
所以最后我重新编写了应用程序的某些部分。
首先我们需要给actioncolumn
添加一些选项:
dataIndex: 'action',
id: 'action',
网格行按钮 show/hide 现在独立于 actioncolumn
移动:
/**
* buildSelectionModel
*/
buildSelectionModel: function() {
var sm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
scope: this,
rowselect: function(grid, rowIndex, record) {
this.toggleFirstButtonShowState(grid.grid, rowIndex);
},
rowdeselect: function(grid, rowIndex, record) {
this.toggleFirstButtonShowState(grid.grid, rowIndex);
}
}
});
return sm;
},
/**
* toggleFirstButtonShowState
*/
toggleFirstButtonShowState: function(grid, rowIndex) {
//'action' is data index of
var colIndex = this.getColumnIndexByDataIndex(grid, 'action');
console.log(colIndex);
// 7 is the last cell index
var cell = grid.getView().getCell( rowIndex, colIndex);
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Show/delete class that hides. Class 'x-hidden' also works
currentIcon.toggleClass('x-hide-display'); //show/hide icon
}
});
},
getColumnIndexByDataIndex: function(grid, dataIndex) {
//columns
gridColumns = grid.getColumnModel().columns;
for (var i = 0; i < gridColumns.length; i++) {
if (gridColumns[i].dataIndex == dataIndex) {
return i;
}
}
Viewport
部分:
//get selection model
selModel = this.loanGrid.getSelectionModel();
selModel.on({
scope: this,
rowselect: function (grid, rowIndex, keepExisting, record) {
//get second icon in actioncolumn
var icon = grid.grid.getColumnModel().getColumnById('action').items[1];
//save context
var self = this;
//add handler by direct set
icon.handler = function(grid, rowIndex, colIndex) {
//open documents window
self.documentsGridWindow.show();
};
}
});
一切正常!