Nov 26, 2012, 8:50 PM
Originally Posted by Daniil
-
Thanks Daniil. I believe I initially tried to put the alignment code inside the triggerclick handler some time ago. The reason I had to move it to the BeforeShow handler, if my memory serves me well, was that the window would present itself momentarily at its previous position before jumping to realign to the currently selected cell. Originally Posted by Daniil
-
Nov 27, 2012, 4:10 AMPlease clarify is it still reproducible? I was unable to reproduce.
-
Nov 27, 2012, 5:49 PMPlease run the code sample below. Originally Posted by Daniil
Steps to reproduce:
- Click on the "FormAttribute" cell
- Click OK or Cancel on the form panel on the popup window
- Click on another "FormAttribute" cell to observe the issue
I do apologize for the lengthy code sample.
<%@ Page Language="C#" %> <%--GridDropDownValue.aspx--%> <%@ 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", "TextField" }, new object[] { "id3", "FormAttribute" }, new object[] { "id4", "DateField", "Dec 12, 2011" }, new object[] { "id5", "ComboBox" }, new object[] { "id6", "TextArea" }, new object[] { "id7", "FormAttribute" }, new object[] { "id8", "ComboBox" }, new object[] { "id9", "DateField", "Dec 25, 2012" } }; store.DataBind(); new TriggerField().RegisterIcon(TriggerIcon.Clear); new TriggerField().RegisterIcon(TriggerIcon.Combo); } } 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' })); column.setEditor(new Ext.form.DateField({ format:"M d, Y", selectOnFocus:true, editable:false, listeners:{ select:{ fn:function(item,record,index){ gridRecord.set("value", this.getValue()); } }, triggerclick:{ fn:function(item,trigger,index,tag,e){ this.setValue(null); gridRecord.set("value", null); } }, startedit: { fn: function (boundEl, value) { /* expand */ //this.field.onTriggerClick(); } } }, triggersConfig:[ { iconCls:"x-form-clear-trigger", qtip:"<nobr>Set to empty</nobr>" } ] })); break; case "TextField": column.setEditor(new Ext.grid.GridEditor( Ext.apply({ field: { id:"DropDownField1", xtype:"netdropdown", selectOnFocus:true, triggersConfig:[{iconCls:"x-form-clear-trigger"}], editable:false, component:{ id:"ComponentPanel1", xtype:"panel", layout:"fit", items:{ id:"Editor1", xtype:"textfield", selectOnFocus:true, enableKeyEvents:true, listeners:{ change:{ fn:function(item,e){ DropDownField1.setValue(this.getValue()); gridRecord.set('value', this.getValue()); } }, keyup:{ fn:function(item,e){ } } } } }, listeners:{ expand:{ fn:function(item){ Editor1.setWidth(column.width); Editor1.setValue(gridRecord.get('value')); Editor1.focus.defer(1, Editor1); } }, triggerclick:{ fn:function(item,trigger,index,tag,e){ this.setValue(""); gridRecord.set("DisplayValue", ""); } } }, triggersConfig:[ { iconCls:"x-form-clear-trigger", qtip:"<nobr>Set to empty</nobr>" } ] } }, { listeners: { startedit: { fn: function (boundEl, value) { /* expand */ //this.field.onTriggerClick(); } } } }) )); 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", ""); } } } } }, { listeners: { startedit: { fn: function (boundEl, value) { /* expand */ //this.field.onTriggerClick(); } } } }) )); break; case "ComboBox": column.setEditor(new Ext.form.ComboBox({ displayField: "text", valueField: "value", triggerAction: "all", store: ComboBoxStore, listeners: { select: { fn: function (item, record, index) { } }, triggerclick:{ fn:function(item,trigger,index,tag,e){ this.setValue(null); gridRecord.set("value", null); } }, startedit: { fn: function (boundEl, value) { /* expand */ //this.field.onTriggerClick(); } } }, triggersConfig:[ { iconCls:"x-form-clear-trigger", qtip:"<nobr>Set to empty</nobr>" } ] })); ComboBoxStore.on("beforeload", function (store, options) { options.params = { id: e.record.data.id } }, null, { single: true }); break; case "FormAttribute": column.setEditor(new Ext.grid.GridEditor(Ext.apply( { field: { id: "TriggerField1", xtype: "nettrigger", triggersConfig: [ { tag: "clear", iconCls: "x-form-clear-trigger" }, { tag: "pick", iconCls: "x-form-combo-trigger" } ], editable: false, listeners: { triggerclick: { fn: function (item, trigger, index, tag, e) { var record = GridPanel1.getSelectionModel().getSelected(), rowIndex = GridPanel1.store.indexOf(record); switch (tag) { case "pick": WindowForm.editor=item; WindowForm.autoComplete = true; var record = GridPanel1.getSelectionModel().getSelected(), rowIndex = GridPanel1.store.indexOf(record); GridPanel1.getSelectionModel().selectRow(rowIndex); var cell = GridPanel1.getView().getCell(rowIndex, index); WindowForm.cell=cell; WindowForm.record=record; WindowForm.show(trigger, function () { WindowForm.alignTo(cell); }); break; case "clear": record.set("DisplayValue", null); trigger.setValue(""); break; }; } } } } }, { zIndex: 8000, allowBlur: 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 IDProperty="id"> <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> <SelectionModel> <ext:RowSelectionModel runat="server" SingleSelect="true" ID="RowSelectionModel1"> </ext:RowSelectionModel> </SelectionModel> <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> <ext:Window ID="WindowForm" runat="server" Hidden="true" InitCenter="false" Title="Complex Attribute" Width="300" Height="250" Modal="true" Layout="FitLayout" Closable="false" Draggable="false" Resizable="false"> <Items> <ext:FormPanel ID="FormPanel1" runat="server" Title="" Padding="5" ButtonAlign="Right" Width="300"> <Items> <ext:TextField ID="CompanyField" DataIndex="company" runat="server" FieldLabel="Company" AnchorHorizontal="95%" /> <ext:TextField ID="PriceField" DataIndex="price" runat="server" FieldLabel="Price" AnchorHorizontal="95%" /> <ext:TextField ID="ChangeField" DataIndex="change" runat="server" FieldLabel="Change" AnchorHorizontal="95%" /> <ext:TextField ID="PctChangeField" DataIndex="pctChange" runat="server" FieldLabel="Change (%)" AnchorHorizontal="95%" /> <ext:DateField ID="lastChange" runat="server" FieldLabel="Last Updated" AnchorHorizontal="95%" /> </Items> <BottomBar> <ext:Toolbar ID="Toolbar2" runat="server"> <Items> <ext:ToolbarFill> </ext:ToolbarFill> <ext:Button ID="Button3" runat="server" Text="OK" Width="80" Icon="Accept"> <Listeners> <Click Handler="#{WindowForm}.hide();" /> </Listeners> </ext:Button> <ext:Button ID="Button4" runat="server" Text="Cancel" Width="80" Icon="Cancel"> <Listeners> <Click Handler="if (#{WindowForm}.autoComplete) {GridPanel1.stopEditing(true);} #{WindowForm}.hide();" /> </Listeners> </ext:Button> </Items> </ext:Toolbar> </BottomBar> </ext:FormPanel> </Items> <Listeners> <BeforeShow Handler="//this.alignTo(this.cell); var id=this.record.get('id');" /> <BeforeHide Handler="if (this.autoComplete) { GridPanel1.stopEditing(false); }" /> </Listeners> </ext:Window> </form> </body> </html> -
Nov 28, 2012, 5:16 AMWell, I can't see where I suggested to align within a show callback:)
My suggestion was:
Please try. It appears to function well.WindowForm.alignTo(cell); WindowForm.show(trigger); -
Nov 28, 2012, 12:03 PMIndeed, it works well. Thanks Daniil, please mark this thread as closed.
Similar Threads
-
[CLOSED] passing values from Ext.Net.Window to Page from where this Ext.Net.Window popup
By ViDom in forum 1.x Legacy Premium HelpReplies: 1Last Post: Jun 18, 2012, 3:41 PM -
[CLOSED] Button event is not firing in parent window from popup window
By rnachman in forum 1.x Legacy Premium HelpReplies: 1Last Post: Mar 14, 2011, 7:35 PM -
[CLOSED] Passing information from Popup window to parent window throwing error
By rnachman in forum 1.x Legacy Premium HelpReplies: 1Last Post: Mar 14, 2011, 4:20 PM -
[CLOSED] Passing value from Popup window to Parent window is throwing error
By rnachman in forum 1.x Legacy Premium HelpReplies: 1Last Post: Mar 11, 2011, 10:07 PM -
[CLOSED] TextArea width within editable GridPanel
By danielg in forum 1.x Legacy Premium HelpReplies: 4Last Post: Sep 18, 2009, 10:20 AM
