Nov 26, 2012, 2:28 PM
[CLOSED] How to trigger DropDownField expand event on GridPanel cell click?
Hi,
Please suggest the proper way to trigger a cell editor DropDownField expand event when the user clicks on the cell to begin editing. Wherever the editor is set up as DateField, please recommend how to expand the Date picker on the GridPanel cell click. Below is the code sample with initial set-up. Please advise if the info provided is inadequate.
Please suggest the proper way to trigger a cell editor DropDownField expand event when the user clicks on the cell to begin editing. Wherever the editor is set up as DateField, please recommend how to expand the Date picker on the GridPanel cell click. Below is the code sample with initial set-up. Please advise if the info provided is inadequate.
<%@ 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", "Nov 01, 2011" },
new object[] { "id2", "ComboBox" },
new object[] { "id3", "DateField", "Dec 12, 2011" },
new object[] { "id4", "ComboBox" },
new object[] { "id5", "TextArea" }
};
store.DataBind();
new TriggerField().RegisterIcon(TriggerIcon.Clear);
}
}
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>
<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();
}
var gridRecord=e.record;
switch (e.record.get("editor")) {
case "DateField":
column.setEditor(new Ext.form.DateField({ altFormats: 'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j|M d, Y' }));
break;
case "TextArea":
column.setEditor(new Ext.grid.GridEditor(
Ext.apply({
field: {
id: "DropDownField1",
xtype: "netdropdown",
triggersConfig:[{iconCls:"x-form-clear-trigger"}],
editable:false,
component:{
id:"ComponentPanel1",
xtype:"panel",
frame:false,
border:false,
items:{
id:"Editor1",
xtype:"textarea",
listeners:{
change:{
fn:function(item,e){
DropDownField1.setValue(this.getValue());
gridRecord.set("value", this.getValue());
}
},
keyup:{
fn:function(item,e){
}
},
},
enableKeyEvents:true,
selectOnFocus:true
},
layout:"fit"
},
listeners:{
expand:{
fn:function(item){
Editor1.setHeight(column.width*0.625);
Editor1.setValue(gridRecord.get("value"));
Editor1.focus.defer(1, Editor1);
}
},
triggerclick:{
fn:function(item,trigger,index,tag,e){
this.setValue("");
gridRecord.set("value", "");
}
}
}
}
},
{})
));
break;
case "ComboBox":
column.setEditor(new Ext.form.ComboBox({
displayField: "text",
valueField: "value",
triggerAction: "all",
store: ComboBoxStore,
listeners: {
select: {
fn: function (item, record, index) {
}
}
}
}));
ComboBoxStore.on("beforeload", function (store, options) {
options.params = {
id: e.record.data.id
}
}, null, {
single: true
});
break;
}
};
var testRenderer = function (value) {
var record = ComboBoxStore.getById(value);
if (record) {
value = record.data.text;
} else 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" Locale="en" ScriptMode="Debug"
SourceFormatting="True" />
<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" ClicksToEdit="1">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="editor" />
<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>
<Listeners>
<BeforeEdit Fn="setEditor" />
<AfterEdit Handler="if (e.record.data.editor == 'DateField' && Ext.util.Format.date(e.originalValue, 'Y-m-d') == Ext.util.Format.date(e.value, 'Y-m-d')) {
e.record.reject();
}"></AfterEdit>
<Render Handler="this.getColumnModel().setEditable(2, true);" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Nov 28, 2012 at 4:46 AM.
Reason: [CLOSED]