[CLOSED] how to create multi select combobox on client side
Hi all,
I have a grid with a custom editor for each row. Some rows need a multi combobox as editor(see example).
I don't find the multi combo as a standard control in ext.js 3.4.0 so I was wondering if there is a way to create it on the client side.
Any help would be highly appreciated.
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!ExtNet.IsAjaxRequest)
{
Store store = GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "TextField", "text", null },
new object[] { "NumberField", "10", null },
new object[] { "ComboBox", "1", new object[]
{
new object[] {"item1", "1"}, new object[] {"item2", "2"}, new object[] {"item3", "3"}
}
},
new object[] { "MultiComboBox", "1", new object[]
{
new object[] {"item1", "1"}, new object[] {"item2", "2"}, new object[] {"item3", "3"}
}
}
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var getRenderer = function (value, metadata, record) {
if (record.get("editor") == "ComboBox") {
var storeData = record.get("enum");
var k;
for (k = 0; k < storeData.length; ++k) {
if (storeData[k][1] == value) {
return storeData[k][0];
}
}
}
return value;
};
var setEditor = function (e) {
var column = e.grid.getColumnModel().columns[e.column],
ed = column.getCellEditor(e.row);
if (ed) {
ed.destroy();
}
switch (e.record.get("editor")) {
case "TextField":
column.setEditor(new Ext.form.TextField());
break;
case "NumberField":
column.setEditor(new Ext.form.NumberField());
break;
case "ComboBox":
column.setEditor(
new Ext.form.ComboBox({
displayField: "text",
mode: "local",
triggerAction: "all",
valueField: "value",
store: new Ext.data.SimpleStore({
fields: ["text", "value"]
})
}));
column.getEditor().store.loadData(e.record.get("enum"));
break;
case "MultiComboBox":
column.setEditor(
new Ext.form.ComboBox({ // <== I NEED HELP HERE
displayField: "text",
mode: "local",
triggerAction: "all",
valueField: "value",
store: new Ext.data.SimpleStore({
fields: ["text", "value"]
})
}));
column.getEditor().store.loadData(e.record.get("enum"));
break;
}
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
AutoHeight="true"
Width="210">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="editor" />
<ext:RecordField Name="test" />
<ext:RecordField Name="enum" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Editor" DataIndex="editor" />
<ext:Column Header="Test" DataIndex="test" >
<Renderer Fn="getRenderer"/>
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<BeforeEdit Fn="setEditor" />
<Render Handler="this.getColumnModel().setEditable(1, true);" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>