Originally Posted by
Daniil
Hi Daniil,
Thanks for bearing with me on this arduous matter first of all. :)
The example you're referring to was one of the very first examples in this thread leveraging the DropDownField. However, after some poking around, I realized you wouldn't recommend using DropDownField for complex editors like FormPanel or GridPanel, although you didn't quite rule it out as impossible. So, you suggested to look into alternatives like TriggerField and ImageCommand, which I also did.
Do you think I should revisit the DropDownField approach or are you thinking of any combination of TriggerField and DropDownField, or something else?
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "id1", "DateField", "Date Field 1" },
new object[] { "id2", "ComboBox", "Combo Box 1" },
new object[] { "id3", "DateField", "Date Field 2" },
new object[] { "id4", "ComboBox", "Combo Box 2" },
new object[] { "id5", "Form", "Form 1" },
new object[] { "id6", "Form", "Form 2" },
};
store.DataBind();
this.ResourceManager1.RegisterIcon(Icon.Accept);
}
}
protected void ComboBoxStore_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
Store store = sender as Store;
string id = e.Parameters["id"];
store.DataSource = new object[]
{
new object[] { id + "_" + DateTime.Now.Second, "1" },
new object[] { id + "_" + DateTime.Now.Second, "2" }
};
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>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
<script type="text/javascript">
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 "DateField":
column.setEditor(new Ext.form.DateField());
break;
case "ComboBox":
column.setEditor(new Ext.form.ComboBox({
displayField: "text",
valueField: "value",
triggerAction: "all",
store: ComboBoxStore
}));
ComboBoxStore.on(
"beforeload",
function (store, options) {
options.params = {
id: e.record.data.id
}
},
null,
{
single: true
});
break;
case "Custom":
column.setEditor(new Ext.grid.GridEditor(
Ext.apply(
{
field:
{
id: "DropDownField1",
xtype: "netdropdown",
component:
{
id: "GridPanel2",
columnPlugins: [1],
xtype: "netgrid",
autoHeight: true,
store: Store1,
selectionMemory: false,
cm: this.ColumnModel2 = new Ext.grid.ColumnModel(
{
proxyId: "ColumnModel2",
columns: [
{
dataIndex: "id",
header: "Id",
width: 80
},
new Ext.net.CommandColumn(
{
hideable: false,
width: 25,
commands: [
{
xtype: "tbbutton",
command: "Pick",
iconCls: "icon-accept"
}
]
}
)
]
}
),
listeners:
{
command:
{
fn: function (command, record, rowIndex, colIndex) {
this.dropDownField.setValue(record.data.desc);
}
}
}
}
}
})
));
break;
case "Form":
column.setEditor(new Ext.grid.GridEditor(
Ext.apply({
field: {
id: "DropDownField2",
xtype: "netdropdown",
component: {
id: "FormPanel1",
xtype: "form",
width: 300,
items: [
{ id: "CompanyField", xtype: "textfield", anchor: "95%", fieldLabel: "Company", dataIndex: "test" },
{ id: "PriceField", xtype: "textfield", anchor: "95%", fieldLabel: "Price", dataIndex: "price" },
{ id: "ChangeField", xtype: "textfield", anchor: "95%", fieldLabel: "Change", dataIndex: "change" },
{ id: "PctChangeField", xtype: "textfield", anchor: "95%", fieldLabel: "Change (%)", dataIndex: "pctChange" },
{ id: "lastChange", xtype: "datefield", anchor: "95%", fieldLabel: "Last Updated", format: "n/j/Y" }
],
buttons: [
{
id: "ButtonSave",
text: "Save To Grid",
listeners: {
click: {
fn: function (item, e) {
FormPanel1.getForm().updateRecord(GridPanel1.getSelectionModel().getSelected());
DropDownField2.collapse();
DropDownField2.hide();
}
}
}
},
{
id: "ButtonReset",
text: "Reset Fields",
listeners: {
click: {
fn: function (item, e) {
FormPanel1.getForm().reset();
}
}
}
},
],
padding: 5,
title: "Form Panel",
renderFormElement: false,
trackResetOnLoad: true,
url: "/Ext.Net.Tests/GridDropDownFormValue.aspx",
listeners: {
beforeshow: {
fn: function (item) {
item.getForm().loadRecord(e.record);
item.getForm().record = e.record;
}
}
}
}
}
},
{})
));
break;
}
};
var testRenderer = function (value) {
var record = ComboBoxStore.getById(value);
if (value instanceof Date) {
value = Ext.util.Format.date(value, "Y-m-d");
}
return value;
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="ComboBoxStore" runat="server" OnRefreshData="ComboBoxStore_RefreshData"
AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:ArrayReader IDProperty="value">
<Fields>
<ext:RecordField Name="text" />
<ext:RecordField Name="value" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Selectable="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="editor" />
<ext:RecordField Name="desc" />
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="ID" DataIndex="id" />
<ext:Column Header="Editor" DataIndex="editor" />
<ext:Column Header="Test" DataIndex="test">
<Renderer Fn="testRenderer" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" ID="RowSelectionModel1">
</ext:RowSelectionModel>
</SelectionModel>
<Listeners>
<BeforeEdit Fn="setEditor" />
<Render Handler="this.getColumnModel().setEditable(2, true);" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>