[OPEN] [#1859] Bind event with component column
Hello
I have a problem with component column, narrowed town to the example below
could you please explain me why bind event is called two times for first item in the grid?
any next item added, bind event is fired just single time
Store behind - there is very very complex grid behind this example, and calling binding two times, causes "flickering" when rendering
Code:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Two bind events</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>ComponentColumn as Editor</h1>
<ext:Viewport runat="server">
<Items>
<ext:Panel runat="server" Controller="MyController">
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
<script>
Ext.define('MyController',
(function () {
var publicInterface = {
extend: 'Ext.app.ViewController',
alias: 'controller.MyController',
init: function (view) {
this.callParent(arguments);
var cnt = new UserPropertyEdit();
view.add(cnt);
var grid = cnt.down('grid');
grid.columns[0].on('bind', bindOnColumn, this);
}
};
function bindOnColumn() {
console.info('bind has been called'); // why this is called two times for first item?
}
return publicInterface;
})());
function addAttribute() {
var rootPanelTemp = Ext.getCmp('rootPanelTemp');
var grid = rootPanelTemp.down('grid');
grid.store.add({
Name:'data'
});
}
Ext.define('UserPropertyEdit', {
id:'rootPanelTemp',
"extend": "Ext.Panel",
items: [{
store: {
model: Ext.ClassManager.isCreated(Ext.id()) ? Ext.id() : Ext.define(Ext.id(), {
extend: "Ext.data.Model",
fields: [ {
name: "Name",
type: "string"
}]
}),
autoLoad: true,
proxy: {
type: 'memory'
}
},
frame: true,
margin: "5",
reference: "dgvGrid",
xtype: "gridpanel",
buttons: [{
reference: "btnAdd",
iconCls: "#Add",
text: "Add Extended Attribute",
handler:addAttribute
}],
columns: {
items: [{
xtype: "componentcolumn",
flex: 1,
dataIndex: "Name",
text: "First Column",
component: function () {
return [{
xtype: "textfield",
validateOnFocusLeave: true
}];
},
editor: true
}]
}
}],
layout: "fit"
});
</script>
</html>
