PDA

View Full Version : [CLOSED] ComboBox position changing while adding new record to GridPanel



iansriley
Jul 17, 2014, 4:23 PM
Hi,

In Ext.Net 250 we are facing issue with ComboBox Position(layout).

We have GridPanel with ComboBox and few columns, when we click on "Add" button adding new record to store and setting the focus to last row and
"startEditByPosition" to "LastRow first column" like

startEditByPosition({ row: lastRecordIndex, column: 0 });. When setting the position Editing ComboBox moving to some where else in the GridPanel.

Please find the attached screen shot and sample code for your reference.

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>GridPanel with FitLayout - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script type="text/javascript" language="javascript">
// var cancelRep = function () {
// //get the original data from the database
// App.direct.SetupRepData();
// }


//add a new row to the bottom of reps grid panel to add a rep split
var addRep = function () {
//get the number of reps, including the new one
var count = App.store_RepData.data.items.length + 1;
//get the base net amount (truncate to 2 decimal places, we'll add the leftover amount to the last installment
var percentage = 100 / count;
percentage = eval(percentage); //truncate the decimals


var totalpercentage = 0;


for (var i = 0; i < App.store_RepData.data.items.length; i++) {
//keep track of the total percentages
totalpercentage = ((totalpercentage * 100) + (percentage * 100)) / 100; //we need to do the *100 and /100 because of javascript floating point errors


var recordToChange = App.store_RepData.getAt(i);
recordToChange.set('Percentage', percentage);
recordToChange.commit();
}


//add any leftover amount to the new rep
percentage = ((100 * 100) - (totalpercentage * 100)) / 100;


var addedRec = App.store_RepData.add({ DisplayID: i, ID: 0, RepID: 0, Percentage: percentage, RepName: 'Please Select a Rep...' });
var lastRecordIndex = App.store_RepData.data.length - 1;
App.gridpanel_Reps.getView().focusRow(lastRecordIn dex);
App.gridpanel_Reps.editingPlugin.startEditByPositi on({ row: lastRecordIndex, column: 0 });
}


var repRenderer = function (value, metadata, record, rowIndex, colIndex, store) {


var row = App.store_Rep.getById(value);
if (Ext.isEmpty(row)) {
return record.data.RepName;
}


return App.store_Rep.getById(value).data.RepName;
}


</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Store runat="server" ID="store_RepData" AutoDataBind="false" AutoLoad="true">
<Model>
<ext:Model ID="Model11" runat="server" IDProperty="DisplayID">
<Fields>
<ext:ModelField Name="DisplayID">
</ext:ModelField>
<ext:ModelField Name="ID">
</ext:ModelField>
<ext:ModelField Name="RepID">
</ext:ModelField>
<ext:ModelField Name="Percentage">
</ext:ModelField>
<ext:ModelField Name="RepName">
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
<ext:Store runat="server" ID="store_Rep" AutoLoad="true">
<Model>
<ext:Model ID="Model12" runat="server" IDProperty="RepID">
<Fields>
<ext:ModelField Name="RepID">
</ext:ModelField>
<ext:ModelField Name="RepName">
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" Plain="true" Border="true" DeferredRender="true"
BodyStyle="border:0px;padding:0px;" Flex="1">
<Items>
<ext:Panel ID="TabReps" runat="server" Title="Sales Reps" BodyStyle="padding:10px;"
AutoScroll="true" ButtonAlign="Center">
<Items>
<ext:GridPanel ID="gridpanel_Reps" runat="server" StoreID="store_RepData" Collapsible="false"
Layout="FitLayout" EnableColumnHide="false" EnableColumnMove="false" ButtonAlign="Center">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Text="Sales Rep" ID="RepID" DataIndex="RepID" Sortable="false" Flex="1"
runat="server">
<Editor>
<ext:ComboBox ID="cbo_Rep" runat="server" StoreID="store_Rep" DisplayField="RepName"
ValueField="RepID" Editable="false">
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:Column ID="Column4" Text="Percentage" DataIndex="Percentage" Align="Center"
Sortable="false" Width="100" runat="server">
<Editor>
<ext:NumberField runat="server" ID="nmPercentage" AllowBlank="false" HideTrigger="true"
MinValue="0" AllowDecimals="true" DecimalPrecision="2" SelectOnFocus="true">
</ext:NumberField>
</Editor>
</ext:Column>
<ext:Column ID="Column5" DataIndex="ID" runat="server" Hidden="true">
</ext:Column>
<ext:CommandColumn ID="cmdDelete" runat="server" Width="25">
<Commands>
<ext:GridCommand CommandName="Delete" Icon="Decline">
<ToolTip Text="Delete" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
</Plugins>
<Buttons>
<ext:Button ID="ToolbarButton_Rep_Cancel2" runat="server" Text="Reset">
<ToolTips>
<ext:ToolTip ID="ToolTip2" runat="server" Title="Cancel Add" Html="Cancel adding this rep split and reset the amounts.">
</ext:ToolTip>
</ToolTips>
<Listeners>
<Click Handler="alert('hi');" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="ToolbarButton_Rep_Add2" Text="Add">
<ToolTips>
<ext:ToolTip ID="ToolTip7" runat="server" Title="Add New Sales Rep" Html="Click here to split the ownership of this campaign between sales reps.">
</ext:ToolTip>
</ToolTips>
<Listeners>
<Click Handler="addRep()" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Jul 18, 2014, 10:33 AM
Hi @iansriley,

I guess editing starts before a row is being fully rendered.

I can suggest to replace

App.gridpanel_Reps.editingPlugin.startEditByPositi on({ row: lastRecordIndex, column: 0 });
with

Ext.Function.defer(App.gridpanel_Reps.editingPlugi n.startEditByPosition, 10, App.gridpanel_Reps.editingPlugin, [{ row: lastRecordIndex, column: 0 }]);

Also you can remove:

App.gridpanel_Reps.getView().focusRow(lastRecordIn dex);

iansriley
Jul 18, 2014, 4:34 PM
Thanks, suggested code is working fine. Please close this thread.