Problem with a GridPanel having a ComboBox Editor problem
The code I am posting below worked perfectly with Coolite 0.7. However, it breaks down horribly with 0.8. It's a bit long but the Coolite team should be able to quickly move through it.
Code:
<ext:Store runat="server" ID="storeSupplier" UseIdConfirmation="false">
<Reader>
<ext:JsonReader ReaderID="supplierId">
<Fields>
<ext:RecordField Name="name" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="name" Direction="ASC" />
</ext:Store>
<ext:ComboBox runat="server" ID="ddlSupplier" AllowBlank="false" Editable="true" ForceSelection="true"
StoreID="storeSupplier" DisplayField="name" ValueField="name" TypeAhead="true" Mode="Local"
TriggerAction="All" Selectonfocus="true" />
<!-- Code generated is correct for Combo above but incorrect for Combo editors in GridPanel below. -->
<ext:Store runat="server" ID="storeMedicine" UseIdConfirmation="false">
<Reader>
<ext:JsonReader ReaderID="medicineId">
<Fields>
<ext:RecordField Name="fullName" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="fullName" Direction="ASC" />
</ext:Store>
<ext:Store runat="server" ID="storeUnit" RefreshAfterSaving="Always" UseIdConfirmation="false">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="displayText" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="displayText" Direction="ASC" />
</ext:Store>
<ext:Store runat="server" ID="storePurchase" RefreshAfterSaving="Always" UseIdConfirmation="false">
<Reader>
<ext:JsonReader ReaderID="purchaseMedicineId">
<Fields>
<ext:RecordField Name="medicineFullName" />
<ext:RecordField Name="packingAmount" />
<ext:RecordField Name="packingUnitStr" />
<ext:RecordField Name="numUnits" />
<ext:RecordField Name="billingAmount" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="medicineFullName" Direction="ASC" />
</ext:Store>
<ext:Hidden ID="hidPurchase" runat="server" />
<ext:Panel runat="server" Width="500px" Height="300px" Header="false">
<Body>
<ext:FitLayout runat="server">
<ext:GridPanel runat="server" ID="grdPurchase" Title="Purchase Medicines" AutoExpandColumn="colMed"
StoreID="storePurchase" BodyBorder="true" Border="true" Header="true" ClicksToEdit="1">
<ColumnModel runat="server">
<Columns>
<ext:Column ColumnID="colMed" DataIndex="medicineFullName" Header="Medicine" Width="100">
<Editor>
<ext:ComboBox runat="server" ID="comboMed" AllowBlank="false" Editable="true" ForceSelection="true"
StoreID="storeMedicine" DisplayField="fullName" ValueField="fullName" TypeAhead="true" Mode="Local"
TriggerAction="All" Selectonfocus="true">
<Listeners>
<BeforeRender Handler="this.hiddenName = undefined; this.valueField = undefined;" />
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column DataIndex="packingAmount" Header="Packing Amount" Width="100">
<Editor>
<ext:NumberField runat="server" ID="txtAmount" AllowBlank="true" AllowDecimals="true" AllowNegative="false" />
</Editor>
</ext:Column>
<ext:Column DataIndex="packingUnitStr" Header="Packing Unit" Width="100">
<Editor>
<ext:ComboBox runat="server" ID="comboUnit" AllowBlank="false" Editable="true" ForceSelection="true"
StoreID="storeUnit" DisplayField="displayText" ValueField="displayText" TypeAhead="true" Mode="Local"
TriggerAction="All" Selectonfocus="true">
<Listeners>
<BeforeRender Handler="this.hiddenName = undefined; this.valueField = undefined;" />
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column DataIndex="numUnits" Header="Order Units" Width="80">
<Editor>
<ext:NumberField runat="server" ID="txtUnits" AllowBlank="false" AllowDecimals="false" AllowNegative="false" />
</Editor>
</ext:Column>
<ext:Column DataIndex="billingAmount" Header="Billing Amount" Width="80" Tooltip="Billing Amount for this Medicine alone.">
<Editor>
<ext:NumberField runat="server" ID="txtBillAmount" AllowBlank="false" AllowDecimals="true" AllowNegative="false" DecimalPrecision="2" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel SingleSelect="false" runat="server">
<Listeners>
<RowSelect Handler="#{btnDelete}.enable();" />
<RowDeselect Handler="if (!#{grdPurchase}.hasSelection()) {#{btnDelete}.disable();}" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<SaveMask ShowMask="true" />
<LoadMask ShowMask="true" />
</ext:GridPanel>
</ext:FitLayout>
</Body>
<Buttons>
<ext:Button ID="btnAdd" runat="server" Text="Add" AutoPostBack="false" Icon="Add">
<Listeners>
<Click Handler="var rowIndex = #{grdPurchase}.addRecord(); #{grdPurchase}.getView().focusRow(rowIndex); #{grdPurchase}.startEditing(rowIndex, 0);" />
</Listeners>
</ext:Button>
<ext:Button ID="btnDelete" runat="server" Text="Delete selected records" Icon="Delete">
<Listeners>
<Click Handler="#{grdPurchase}.deleteSelected();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Panel>
The ExtJs javascript code generated by Coolite for this markup is below:
Code:
<script type="text/javascript">
//<![CDATA[
Ext.onReady(function(){this.dnn_ctr375_EditPurchase_storeSupplier_Data=[{"supplierId":1,"name":"jkh"}];this.dnn_ctr375_EditPurchase_storeSupplier=new Coolite.Ext.Store({id:"dnn_ctr375_EditPurchase_storeSupplier",ajaxEventConfig:{formProxyArg:"Form"},sortInfo:{direction:"asc",field:"name"},reader:new Ext.data.JsonReader({fields:[{name:"name"}],id:"supplierId"}),autoLoad:true});dnn_ctr375_EditPurchase_storeSupplier.proxy=new Ext.data.PagingMemoryProxy(dnn_ctr375_EditPurchase_storeSupplier_Data, false);new Coolite.Ext.TriggerComboBox({id:"dnn_ctr375_EditPurchase_ddlSupplier",renderTo:"dnn_ctr375_EditPurchase_ddlSupplier_Container",allowBlank:false,mergeItems:new Ext.data.SimpleStore({fields:['text','value'],data :[]}),store:dnn_ctr375_EditPurchase_storeSupplier,valueField:"name",typeAhead:true,triggerAction:"all",selectOnFocus:true,queryDelay:10,mode:"local",hiddenName:"dnn_ctr375_EditPurchase_ddlSupplier_Value",displayField:"name"});this.dnn_ctr375_EditPurchase_storeMedicine_Data=[{"medicineId":1,"fullName":"kjklj - ljlkjkl"}];this.dnn_ctr375_EditPurchase_storeMedicine=new Coolite.Ext.Store({id:"dnn_ctr375_EditPurchase_storeMedicine",ajaxEventConfig:{formProxyArg:"Form"},sortInfo:{direction:"asc",field:"fullName"},reader:new Ext.data.JsonReader({fields:[{name:"fullName"}],id:"medicineId"}),autoLoad:true});dnn_ctr375_EditPurchase_storeMedicine.proxy=new Ext.data.PagingMemoryProxy(dnn_ctr375_EditPurchase_storeMedicine_Data, false);this.dnn_ctr375_EditPurchase_storeUnit_Data=[{"displayText":"Count"},{"displayText":"Millilitre"},{"displayText":"Litre"},{"displayText":"Gram"},{"displayText":"KiloGram"}];this.dnn_ctr375_EditPurchase_storeUnit=new Coolite.Ext.Store({id:"dnn_ctr375_EditPurchase_storeUnit",ajaxEventConfig:{formProxyArg:"Form"},refreshAfterSave:"Always",sortInfo:{direction:"asc",field:"displayText"},reader:new Ext.data.JsonReader({fields:[{name:"displayText"}]}),autoLoad:true});dnn_ctr375_EditPurchase_storeUnit.proxy=new Ext.data.PagingMemoryProxy(dnn_ctr375_EditPurchase_storeUnit_Data, false);this.dnn_ctr375_EditPurchase_storePurchase=new Coolite.Ext.Store({id:"dnn_ctr375_EditPurchase_storePurchase",ajaxEventConfig:{formProxyArg:"Form"},refreshAfterSave:"Always",sortInfo:{direction:"asc",field:"medicineFullName"},reader:new Ext.data.JsonReader({fields:[{name:"medicineFullName"},{name:"packingAmount"},{name:"packingUnitStr"},{name:"numUnits"},{name:"billingAmount"}],id:"purchaseMedicineId"}),autoLoad:true});dnn_ctr375_EditPurchase_storePurchase.proxy=new Ext.data.PagingMemoryProxy({});new Ext.form.Hidden({id:"dnn_ctr375_EditPurchase_hidPurchase",renderTo:"dnn_ctr375_EditPurchase_hidPurchase_Container"});this.dnn_ctr375_EditPurchase_ctl12=new Ext.grid.RowSelectionModel({proxyId:"dnn_ctr375_EditPurchase_ctl12",listeners:{rowselect:{fn:function(el,rowIndex,record){dnn_ctr375_EditPurchase_btnDelete.enable();}},rowdeselect:{fn:function(el,rowIndex,record){if (!dnn_ctr375_EditPurchase_grdPurchase.hasSelection()) {dnn_ctr375_EditPurchase_btnDelete.disable();}}}}});this.dnn_ctr375_EditPurchase_ctl13=new Ext.grid.ColumnModel({proxyId:"dnn_ctr375_EditPurchase_ctl13",columns:[{sortable:true,id:"colMed",header:"Medicine",editor:new Coolite.Ext.TriggerComboBox({id:"dnn_ctr375_EditPurchase_comboMed",xtype:"coolitetriggercombo",allowBlank:false,mergeItems:new Ext.data.SimpleStore({fields:['text','value'],data :[]}),store:dnn_IconBar.ascx_optMode,valueField:"fullName",typeAhead:true,triggerAction:"all",selectOnFocus:true,queryDelay:10,mode:"local",hiddenName:"dnn_ctr375_EditPurchase_comboMed_Value",displayField:"fullName",listeners:{beforerender:{fn:function(el){this.hiddenName = undefined; this.valueField = undefined;}}}}),dataIndex:"medicineFullName"},{sortable:true,header:"Packing Amount",editor:new Ext.form.NumberField({id:"dnn_ctr375_EditPurchase_txtAmount",xtype:"numberfield",allowNegative:false,inputType:"text"}),dataIndex:"packingAmount"},{sortable:true,header:"Packing Unit",editor:new Coolite.Ext.TriggerComboBox({id:"dnn_ctr375_EditPurchase_comboUnit",xtype:"coolitetriggercombo",allowBlank:false,mergeItems:new Ext.data.SimpleStore({fields:['text','value'],data :[]}),store:dnn_IconBar.ascx_optMode,valueField:"displayText",typeAhead:true,triggerAction:"all",selectOnFocus:true,queryDelay:10,mode:"local",hiddenName:"dnn_ctr375_EditPurchase_comboUnit_Value",displayField:"displayText",listeners:{beforerender:{fn:function(el){this.hiddenName = undefined; this.valueField = undefined;}}}}),dataIndex:"packingUnitStr"},{width:80,sortable:true,header:"Order Units",editor:new Ext.form.NumberField({id:"dnn_ctr375_EditPurchase_txtUnits",xtype:"numberfield",allowBlank:false,allowNegative:false,allowDecimals:false,inputType:"text"}),dataIndex:"numUnits"},{width:80,tooltip:"Billing Amount for this Medicine alone.",sortable:true,header:"Billing Amount",editor:new Ext.form.NumberField({id:"dnn_ctr375_EditPurchase_txtBillAmount",xtype:"numberfield",allowBlank:false,allowNegative:false,inputType:"text"}),dataIndex:"billingAmount"}]});new Ext.Panel({id:"dnn_ctr375_EditPurchase_ctl04",monitorResize:true,renderTo:"dnn_ctr375_EditPurchase_ctl04_Container",width:500,height:300,layout:"coolitefit",items:{id:"dnn_ctr375_EditPurchase_grdPurchase",xtype:"coolitegrid",title:"Purchase Medicines",selectionMemory:false,clicksToEdit:1,store:dnn_ctr375_EditPurchase_storePurchase,sm:this.dnn_ctr375_EditPurchase_ctl12,saveMask:{showMask:true},loadMask:{showMask:true},cm:this.dnn_ctr375_EditPurchase_ctl13,autoExpandColumn:"colMed"},header:false,buttons:[{id:"dnn_ctr375_EditPurchase_btnAdd",xtype:"button",text:"Add",iconCls:"icon-add",listeners:{click:{fn:function(el,e){var rowIndex = dnn_ctr375_EditPurchase_grdPurchase.addRecord(); dnn_ctr375_EditPurchase_grdPurchase.getView().focusRow(rowIndex); dnn_ctr375_EditPurchase_grdPurchase.startEditing(rowIndex, 0);}}}},{id:"dnn_ctr375_EditPurchase_btnDelete",xtype:"button",text:"Delete selected records",iconCls:"icon-delete",listeners:{click:{fn:function(el,e){dnn_ctr375_EditPurchase_grdPurchase.deleteSelected();}}}}]});Coolite.Ext.setValues([[dnn_ctr375_EditPurchase_hidPurchase,""]]);document.getElementById("dnn_ctr375_EditPurchase_ctl07").enabled=true;window.ValidatorOnLoad();});Ext.QuickTips.init();Coolite.Ext.ScriptManagerUniqueID="ctl06";Ext.BLANK_IMAGE_URL="/iClinic/extjs/resources/images/default/s-gif/coolite.axd";
//]]>
</script>
Notice the following in the above code:
store:dnn_IconBar.ascx_optMode
This generates javascript errors saying dnn_IconBar is undefined. Where does this dnn_IconBar come from in Coolite generated code? I am using Coolite inside DotNetNuke (DNN) modules and dnn_IconBar is present on pge that is handled by DNN javascript. How come it interfere with Coolite? The code above worked perfectly with Coolite 0.7.
Also, notice the code is generated incorrectly for Combo inside GridPanel only, not for the one outside it.
I have a large solution that leverages Coolite as its front-end with GridPanels all over for data entry purposes. And after upgrading to 0.8, much of the data entry is broken. I am inspecting other issues, but as of now, all my investigations point to this one issue with Combo inside a GridPanel to be the root cause. Please help!!!
RE: Problem with a GridPanel having a ComboBox Editor problem
I have attached 2 files containing the js produced by 0.7 & 0.8 for the above markup.
Notice that ForceSelection is NOT serialized for 0.8 for comboboxes. Also, the store for combos as GridPanel column editors are incorrect in 0.8.
You can use any text comparer utility to have a clear difference in them. I prefer KDiff as it clearly spells out the differences in an intuitive UI.
RE: Problem with a GridPanel having a ComboBox Editor problem
Wonder, this thread has gone without a reply from the core team. I thought it better to discuss it beforehand before filing it as a bug.
Anyways, here's the workaround to it:
Code:
<Editor>
<ext:ComboBox runat="server" ID="comboMed" AllowBlank="false" Editable="true" ForceSelection="true"
DisplayField="fullName" ValueField="fullName" TypeAhead="true" Mode="Local"
TriggerAction="All" Selectonfocus="true">
<Listeners>
<BeforeRender Handler="this.hiddenName = undefined; this.valueField = undefined; this.store = #{storeMedicine}" />
</Listeners>
</ext:ComboBox>
</Editor>
Notice, I am not setting the StoreID in markup, but in the BeforeRender listener. It seems working fine after this. Does the core team see any problem that can arise from this workaround??
RE: Problem with a GridPanel having a ComboBox Editor problem
I thought this problem is serious enough to deserve a comment atleast from the Coolite team. Is it correct to set the Store in BeforeRender?? And does the problem I have reported exists??
RE: Problem with a GridPanel having a ComboBox Editor problem
Hi r_honey,
Yesterday I tried to get your code working in a full .aspx sample, but ran out of time. I'll try again later today.
RE: Problem with a GridPanel having a ComboBox Editor problem
I should warn you geoffrey though that I also tried to recreate this problem in an independent .aspx page. I could not do so.
Looks like it only occurs from inside a DNN installation. If you need one for reproducing the one, I would be more than willing to supply you a working DNN installation & its database backup. It should not be too much of a hassle for you to restore the backup, just 2-3 simple steps.
