Jun 08, 2009, 6:33 AM
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.
The ExtJs javascript code generated by Coolite for this markup is below:
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!!!
<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:
<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>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!!!
