[CLOSED] Linked Comboboxes
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.
Code:
<%@ 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>
