PDA

View Full Version : [CLOSED] Linked Comboboxes



S.KARATHANASIS
Apr 15, 2014, 1:11 PM
Hi,

I have a grid where the Combobox column values depend on the Integer column values.

Specifically, when the Integer value is an odd number, the Combobox value must be one of the Singles list. Otherwise, the combobox must be one of the Doubles list.

I would like some help with a few problems I've run into.



Why is it necessary to use a Renderer for the editor?
Is it possible to remove the mask from the Integer and Combobox columns, so it is possible to edit them without having to click first?
But most of all, I want the Combobox field to get the right value immediately when I select the Integer value or when I add a new record and not after clicking the combobox field for edit. What should I do?


Thank you.



<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Simple Page</title>
<script runat="server">
List<object> GreenValues = new List<object>
{
new {Text = "Doubles 1", Value = 1, Mode = "Raw"},
new {Text = "Doubles 3", Value = 3, Mode = "Raw"},
new {Text = "Doubles 5", Value = 5, Mode = "Raw"},
new {Text = "Doubles 7", Value = 7, Mode = "Raw"}
};
List<object> RedValues = new List<object>
{
new {Text = "Singles 1", Value = 1},
new {Text = "Singles 2", Value = 2},
new {Text = "Singles 4", Value = 4},
new {Text = "Singles 6", Value = 6},
new {Text = "Singles 8", Value = 8},
new {Text = "Singles 10", Value = 10}
};

protected void ColorsRefresh(object sender, StoreReadDataEventArgs e)
{
string idX = e.Parameters["query"];
string cell = e.Parameters["field"];



ColorStore.DataSource = RedValues;
if (!string.IsNullOrEmpty(idX) && (int.Parse(idX) % 2 == 0)) ColorStore.DataSource = GreenValues;
ColorStore.DataBind();
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, 1, 1, "Red 1", DateTime.Now.Date },
new object[] { 2, 2, 1, "Red 2", DateTime.Now.Date },
new object[] { 3, 3, 1, "Red 3", DateTime.Now.Date }
};

this.Store1.DataBind();

IntegerStore.DataSource = new object[]
{
new {Text = "One", Value = 1},
new {Text = "Two", Value = 2},
new {Text = "Three", Value = 3},
new {Text = "Four", Value = 4},
new {Text = "Five", Value = 5},
new {Text = "Six", Value = 6},
new {Text = "Seven", Value = 7},
new {Text = "Eight", Value = 8},
new {Text = "Nine", Value = 9}
};
IntegerStore.DataBind();
}
}

protected void AddRecord_DirectClick(object sender, DirectEventArgs e)
{
int nextId = maxId(this.Store1, e) + 1;
this.Store1.Add(
new
{
Id = nextId,
IntField = nextId,
ComboField = 1,
TextField = "Some 1",
DateField = DateTime.Now.Date
}
);
}

private int maxId(Store store, DirectEventArgs e)
{
return int.Parse(e.ExtraParams["StoreLength"]);
}

protected void Submit_DirectClick(object sender, DirectEventArgs e)
{
var alldata = e;


}
</script>
</head>
<script>
function getStoreLength(myStore, colName) {
var maxId = 0;
if (myStore.getCount() > 0) {
maxId = myStore.getAt(0).get(colName); // initialise to the first record's id value.
myStore.each(function (rec) // go through all the records
{
maxId = Math.max(maxId, rec.get(colName));
});
}
return maxId;
};
var beforeEdit = function (ed, e) {
var field = this.getEditor(e.record, e.column).field;
switch (e.field) {
case "ComboField":
field.allQuery = e.record.get('IntField');
break;
}
};
var onEdit = function (ed, e) {
var field = this.getEditor(e.record, e.column).field;
switch (e.field) {
case "IntField":
var now = new Date();
var aRecord = App.Store1.getAt(e.rowIdx);
aRecord.set('ComboField', 1);
aRecord.set('DateField', now);
aRecord.commit();
break;
}
};
var ComboRenderer = function (value) {
var r = App.ColorStore.getById(value);
if (Ext.isEmpty(r)) {
return "Some 1";
}
return r.data.Text;
};
var IntRenderer = function (value) {
var r = App.IntegerStore.getById(value);
if (Ext.isEmpty(r)) {
return "Miden";
}
return r.data.Text;
};
</script>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Store ID="ColorStore" runat="server" OnReadData="ColorsRefresh">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Text" Type="String" ServerMapping="Text" />
<ext:ModelField Name="Id" Type="Int" ServerMapping="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:Store ID="IntegerStore" runat="server">
<Model>
<ext:Model ID="Model3" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Text" Type="String" ServerMapping="Text" />
<ext:ModelField Name="Id" Type="Int" ServerMapping="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<h1>ComponentColumn as Editor</h1>

<ext:GridPanel ID="GridPanel1"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="IntField" />
<ext:ModelField Name="ComboField" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="ComponentColumn1"
runat="server"
DataIndex="IntField"
Flex="1"
Text="Integer">
<Renderer Fn="IntRenderer" />
<Editor>
<ext:ComboBox
ID="ComboBox2"
runat="server"
DisplayField="Text"
QueryMode="Remote"
StoreID="IntegerStore"
ValueField="Id">
<Listeners>
<Select Handler="console.log('When I change this value, I also want the combobox value to change correctly');" />
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>

<ext:Column ID="ComponentColumn2"
runat="server"
DataIndex="ComboField"
Flex="1"
Text="ComboBox">
<Renderer Fn="ComboRenderer" />
<Editor>
<ext:ComboBox
ID="ComboBox1"
runat="server"
QueryMode="Remote"
StoreID="ColorStore"
ValueField="Id"
DisplayField="Text">
<CustomConfig>
<ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:ComboBox>
</Editor>
</ext:Column>

<ext:ComponentColumn ID="ComponentColumn3"
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField ID="TextField1" runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn4"
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField ID="DateField1" runat="server" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ClicksToEdit="1">
<Listeners>
<BeforeEdit Fn="beforeEdit" />
<Edit Fn="onEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
<ext:Button ID="AddRecord" runat="server" Text="Add record" Icon="Add" OnDirectClick="AddRecord_DirectClick">
<DirectEvents>
<Click>
<ExtraParams>
<ext:Parameter Name="StoreLength" Value="getStoreLength(#{Store1}, 'IntField')" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Submit" runat="server" Text="Submit" Icon="Accept">
<Listeners>
<Click Handler="#{Store1}.submitData();" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

Daniil
Apr 15, 2014, 5:43 PM
Hi @S.KARATHANASIS,


1. Why is it necessary to use a Renderer for the editor?

You bind 1, 2, 3 to the IntField ModelField. Then you refer to that ModelField in the Column's DataIndex="IntField". So, the Column It is going to show 1, 2, 3 in the cells. Do you need 1, 2, 3 there? If no, then using a Renderer is required.


2. Is it possible to remove the mask from the Integer and Combobox columns, so it is possible to edit them without having to click first?


What mask do you mean? I don't quite understand.

Also what click do you mean? A click which causes a ComboBox to be appeared or a click on a ComboBox's trigger?

It looks you need to use a ComponentColumn instead of a regular Column, don't you?



3. But most of all, I want the Combobox field to get the right value immediately when I select the Integer value or when I add a new record and not after clicking the combobox field for edit. What should I do?



It depends on what Column or ComponentColumn you are going to use. So, let's decide it first.

S.KARATHANASIS
Apr 16, 2014, 7:20 AM
Hi Daniil,

sorry for not being clear enough.
By "mask" I mean the before-edit status of the field and by "click" I mean the click which causes a ComboBox to be appeared.

I followed your advice, so in the following code I have replaced the columns with componentcolumns. But now the beforeEdit event on the CellEditing plugin doesn't seem to happen. So, please tell me what is the proper way of doing this?



<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Simple Page</title>
<script runat="server">
List<object> GreenValues = new List<object>
{
new {Text = "Doubles 1", Value = 1, Mode = "Raw"},
new {Text = "Doubles 3", Value = 3, Mode = "Raw"},
new {Text = "Doubles 5", Value = 5, Mode = "Raw"},
new {Text = "Doubles 7", Value = 7, Mode = "Raw"}
};
List<object> RedValues = new List<object>
{
new {Text = "Singles 1", Value = 1},
new {Text = "Singles 2", Value = 2},
new {Text = "Singles 4", Value = 4},
new {Text = "Singles 6", Value = 6},
new {Text = "Singles 8", Value = 8},
new {Text = "Singles 10", Value = 10}
};

protected void ColorsRefresh(object sender, StoreReadDataEventArgs e)
{
string idX = e.Parameters["query"];
string cell = e.Parameters["field"];



ColorStore.DataSource = RedValues;
if (!string.IsNullOrEmpty(idX) && (int.Parse(idX) % 2 == 0)) ColorStore.DataSource = GreenValues;
ColorStore.DataBind();
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, 1, 1, "Red 1", DateTime.Now.Date },
new object[] { 2, 2, 1, "Red 2", DateTime.Now.Date },
new object[] { 3, 3, 1, "Red 3", DateTime.Now.Date }
};

this.Store1.DataBind();

IntegerStore.DataSource = new object[]
{
new {Text = "One", Value = 1},
new {Text = "Two", Value = 2},
new {Text = "Three", Value = 3},
new {Text = "Four", Value = 4},
new {Text = "Five", Value = 5},
new {Text = "Six", Value = 6},
new {Text = "Seven", Value = 7},
new {Text = "Eight", Value = 8},
new {Text = "Nine", Value = 9}
};
IntegerStore.DataBind();
}
}

protected void AddRecord_DirectClick(object sender, DirectEventArgs e)
{
int nextId = maxId(this.Store1, e) + 1;
this.Store1.Add(
new
{
Id = nextId,
IntField = nextId,
ComboField = 1,
TextField = "Some 1",
DateField = DateTime.Now.Date
}
);
}

private int maxId(Store store, DirectEventArgs e)
{
return int.Parse(e.ExtraParams["StoreLength"]);
}

protected void Submit_DirectClick(object sender, DirectEventArgs e)
{
var alldata = e;


}
</script>
</head>
<script>
function getStoreLength(myStore, colName) {
var maxId = 0;
if (myStore.getCount() > 0) {
maxId = myStore.getAt(0).get(colName); // initialise to the first record's id value.
myStore.each(function (rec) // go through all the records
{
maxId = Math.max(maxId, rec.get(colName));
});
}
return maxId;
};
var beforeEdit = function (ed, e) {
var field = this.getEditor(e.record, e.column).field;
switch (e.field) {
case "ComboField":
field.allQuery = e.record.get('IntField');
break;
}
};
var onEdit = function (ed, e) {
var field = this.getEditor(e.record, e.column).field;
switch (e.field) {
case "IntField":
var now = new Date();
var aRecord = App.Store1.getAt(e.rowIdx);
aRecord.set('ComboField', 1);
aRecord.set('DateField', now);
aRecord.commit();
break;
}
};
var ComboRenderer = function (value) {
var r = App.ColorStore.getById(value);
if (Ext.isEmpty(r)) {
return "Some 1";
}
return r.data.Text;
};
var IntRenderer = function (value) {
var r = App.IntegerStore.getById(value);
if (Ext.isEmpty(r)) {
return "Miden";
}
return r.data.Text;
};
</script>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Store ID="ColorStore" runat="server" OnReadData="ColorsRefresh">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Text" Type="String" ServerMapping="Text" />
<ext:ModelField Name="Id" Type="Int" ServerMapping="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:Store ID="IntegerStore" runat="server">
<Model>
<ext:Model ID="Model3" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Text" Type="String" ServerMapping="Text" />
<ext:ModelField Name="Id" Type="Int" ServerMapping="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<h1>ComponentColumn as Editor</h1>

<ext:GridPanel ID="GridPanel1"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="IntField" />
<ext:ModelField Name="ComboField" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:ComponentColumn ID="ComponentColumn1"
runat="server"
DataIndex="IntField"
Flex="1"
Editor="true"
Text="Integer">
<Renderer Fn="IntRenderer" />
<Component>
<ext:ComboBox
ID="ComboBox2"
runat="server"
DisplayField="Text"
QueryMode="Remote"
StoreID="IntegerStore"
ValueField="Id">
<Listeners>
<Select Handler="console.log('When I change this value, I also want the combobox value to change correctly');" />
</Listeners>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn2"
runat="server"
DataIndex="ComboField"
Flex="1"
Editor="true"
Text="ComboBox">
<Renderer Fn="ComboRenderer" />
<Component>
<ext:ComboBox
ID="ComboBox1"
runat="server"
QueryMode="Remote"
StoreID="ColorStore"
ValueField="Id"
DisplayField="Text">
<CustomConfig>
<ext:ConfigItem Name="initQuery" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn3"
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField ID="TextField1" runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn4"
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField ID="DateField1" runat="server" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ClicksToEdit="1">
<Listeners>
<BeforeEdit Fn="beforeEdit" />
<Edit Fn="onEdit" />
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
<ext:Button ID="AddRecord" runat="server" Text="Add record" Icon="Add" OnDirectClick="AddRecord_DirectClick">
<DirectEvents>
<Click>
<ExtraParams>
<ext:Parameter Name="StoreLength" Value="getStoreLength(#{Store1}, 'IntField')" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Submit" runat="server" Text="Submit" Icon="Accept">
<Listeners>
<Click Handler="#{Store1}.submitData();" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

Daniil
Apr 16, 2014, 4:55 PM
Please use a ComponentColumn's BeforeEdit event.

S.KARATHANASIS
Apr 29, 2014, 12:53 PM
Please use a ComponentColumn's BeforeEdit event.

Sorry, but I had no time to reply earlier. I tried to use the BeforeEdit event but I get this error: Type 'Ext.Net.ComponentColumnListeners' does not have a public property named 'BeforeEdit'.

Daniil
Apr 29, 2014, 6:13 PM
Sorry, there is no such the event indeed. Though, it looks you don't need that.

As far as I can understand you need to listen to the Integer ComponentColumn's Edit event. There is an example:
This example should help you:
http://forums.ext.net/showthread.php?23815&p=104247&viewfull=1#post104247

S.KARATHANASIS
Apr 30, 2014, 8:00 AM
Sorry, there is no such the event indeed. Though, it looks you don't need that.

As far as I can understand you need to listen to the Integer ComponentColumn's Edit event. There is an example:
This example should help you:
http://forums.ext.net/showthread.php?23815&p=104247&viewfull=1#post104247

Well, that's a step closer but in there is a big enough difference. The above example changes the value of the Component (TextField). In my example I don't want to change the value. I want to change the store (or the store's data) of the Component (Combobox).

This is my current code (NOT WORKING):



<%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Simple Page</title>
<script runat="server">
List<object> GreenValues = new List<object>
{
new {Text = "Doubles 1", Value = 1, Mode = "Raw"},
new {Text = "Doubles 3", Value = 3, Mode = "Raw"},
new {Text = "Doubles 5", Value = 5, Mode = "Raw"},
new {Text = "Doubles 7", Value = 7, Mode = "Raw"}
};
List<object> RedValues = new List<object>
{
new {Text = "Singles 1", Value = 1},
new {Text = "Singles 2", Value = 2},
new {Text = "Singles 4", Value = 4},
new {Text = "Singles 6", Value = 6},
new {Text = "Singles 8", Value = 8},
new {Text = "Singles 10", Value = 10}
};

protected void ColorsRefresh(object sender, StoreReadDataEventArgs e)
{
string idX = e.Parameters["query"];
string cell = e.Parameters["field"];



ColorStore.DataSource = RedValues;
if (!string.IsNullOrEmpty(idX) && (int.Parse(idX) % 2 == 0)) ColorStore.DataSource = GreenValues;
ColorStore.DataBind();
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, 1, 1, "Red 1", DateTime.Now.Date },
new object[] { 2, 2, 1, "Red 2", DateTime.Now.Date },
new object[] { 3, 3, 1, "Red 3", DateTime.Now.Date }
};

this.Store1.DataBind();

IntegerStore.DataSource = new object[]
{
new {Text = "One", Value = 1},
new {Text = "Two", Value = 2},
new {Text = "Three", Value = 3},
new {Text = "Four", Value = 4},
new {Text = "Five", Value = 5},
new {Text = "Six", Value = 6},
new {Text = "Seven", Value = 7},
new {Text = "Eight", Value = 8},
new {Text = "Nine", Value = 9}
};
IntegerStore.DataBind();
}
}

protected void AddRecord_DirectClick(object sender, DirectEventArgs e)
{
int nextId = maxId(this.Store1, e) + 1;
this.Store1.Add(
new
{
Id = nextId,
IntField = nextId,
ComboField = 1,
TextField = "Some 1",
DateField = DateTime.Now.Date
}
);
}

private int maxId(Store store, DirectEventArgs e)
{
return int.Parse(e.ExtraParams["StoreLength"]);
}

protected void Submit_DirectClick(object sender, DirectEventArgs e)
{
var alldata = e;


}
</script>
</head>
<script>
function getStoreLength(myStore, colName) {
var maxId = 0;
if (myStore.getCount() > 0) {
maxId = myStore.getAt(0).get(colName); // initialise to the first record's id value.
myStore.each(function (rec) // go through all the records
{
maxId = Math.max(maxId, rec.get(colName));
});
}
return maxId;
};
var ComboRenderer = function (value) {
var r = App.ColorStore.getById(value);
if (Ext.isEmpty(r)) {
return "Some 1";
}
return r.data.Text;
};
var IntRenderer = function (value) {
var r = App.IntegerStore.getById(value);
if (Ext.isEmpty(r)) {
return "Miden";
}
return r.data.Text;
};
</script>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Store ID="ColorStore" runat="server" OnReadData="ColorsRefresh">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Text" Type="String" ServerMapping="Text" />
<ext:ModelField Name="Id" Type="Int" ServerMapping="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:Store ID="IntegerStore" runat="server">
<Model>
<ext:Model ID="Model3" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Text" Type="String" ServerMapping="Text" />
<ext:ModelField Name="Id" Type="Int" ServerMapping="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<h1>ComponentColumn as Editor</h1>

<ext:GridPanel ID="GridPanel1"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="IntField" />
<ext:ModelField Name="ComboField" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:ComponentColumn ID="ComponentColumn1"
runat="server"
DataIndex="IntField"
Flex="1"
SilentSave="false"
Editor="true"
Text="Integer">
<Renderer Fn="IntRenderer" />
<Component>
<ext:ComboBox
ID="ComboBox2"
runat="server"
DisplayField="Text"
QueryMode="Local"
StoreID="IntegerStore"
ValueField="Id"
TypeAhead="true">
</ext:ComboBox>
</Component>
<Listeners>
<Edit Handler="e.record.data.TextField = e.value;" />
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn2"
runat="server"
DataIndex="ComboField"
Flex="1"
Editor="true"
Text="ComboBox">
<Renderer Fn="ComboRenderer" />
<Component>
<ext:ComboBox
ID="ComboBox1"
runat="server"
QueryMode="Remote"
StoreID="ColorStore"
ValueField="Id"
DisplayField="Text">
</ext:ComboBox>
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn3"
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField ID="TextField1" runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn4"
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField ID="DateField1" runat="server" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
<ext:Button ID="AddRecord" runat="server" Text="Add record" Icon="Add" OnDirectClick="AddRecord_DirectClick">
<DirectEvents>
<Click>
<ExtraParams>
<ext:Parameter Name="StoreLength" Value="getStoreLength(#{Store1}, 'IntField')" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="Submit" runat="server" Text="Submit" Icon="Accept">
<Listeners>
<Click Handler="#{Store1}.submitData();" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

Daniil
Apr 30, 2014, 1:45 PM
You can get a ComboBox instance of the edited row and load the data.

<Edit Handler="var comboBox = App.ComponentColumn2.getComponent(e.record);
/* load the data to the comboBox's store */" />