Hi Daniil
We, I use a special approach :-)
My grid has no edit funtion in the mark up :
<ext:GridPanel runat="server" ID="gridPackaging" AutoScroll="true">
<Store>
<ext:Store ID="storePackaging" runat="server">
<Model>
<ext:Model ID="modelPackaging" runat="server">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="PackagingType" />
<ext:ModelField Name="Quantity" />
<ext:ModelField Name="PackagingReferenceNumber" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="colIdPack" runat="server" DataIndex="Id" Text="Id" Width="100" Hidden="True" Groupable="False" Sortable="False" MenuDisabled="True" />
<ext:ComponentColumn ID="colPackagingType" runat="server" Editor="true" DataIndex="PackagingType" Text="PackagingType" Sortable="False" Width="150" Flex="1">
<Component>
<ajaxBox:AjaxCodeComboBox runat="server" ID="cboPackagingType" DataType="PackagingType" DisplayType="DescriptionAndValue" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="colQuantity" runat="server" DataIndex="Quantity" Text="Quantity" Width="125" Hidden="False" Groupable="true" Sortable="False" MenuDisabled="False">
<Component>
<ext:NumberField ID="fldPackageQuantity" runat="server" DecimalPrecision="0" MaxLength="5" HideTrigger="True" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="colPackagingReferenceNumber" runat="server" DataIndex="PackagingReferenceNumber" Text="PackagingReferenceNumber" Width="125" Hidden="False" Groupable="true" Sortable="False" MenuDisabled ="False">
<Component>
<ext:TextField ID="fldPackagingReferenceNumber" runat="server" MaxLength="42" EnforceMaxLength="True" MaxLengthText="PackRefNo42CharsLenghtWarnin">" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelPackaging" runat="server" Mode="Single" />
</SelectionModel>
</ext:GridPanel>
The Edit Function is set by Code Behind functions
Public Shared Sub AddNewToolbar(grid As AbstractPanel)
Dim tBar As ToolbarBase
If grid.TopBar.Count > 0 Then
'Grid has already a Toolbar - take this one.
If Not IsNothing(grid.TopBar) Then
tBar = grid.TopBar.Toolbar()
tBar.Items.Add(GetAddButton(grid))
End If
Else
Dim toolBarId = grid.ID & "AddToolBar"
tBar = New Toolbar
tBar.ID = toolBarId
tBar.Items.Add(GetAddButton(grid))
grid.TopBar.Add(tBar)
End If
End Sub
and
Private Shared Function GetAddButton(grid As AbstractPanel) As Button
Dim addButton As New Button
addButton.ID = grid.ID & "AddButton"
addButton.Icon = Icon.Add
addButton.ToolTip = custrocheimport.TooltipAdd
addButton.CommandName = "cmdAdd"
addButton.Listeners.Click.Handler = "handleAddGridRow(item, e);"
Return addButton
End Function
The JS Script Handler 'handleAddGridRow' just add's a new Item with a new Id
grid.getStore().add({ Id: getGUID() });
grid.getView().focusRow(0);
The new Requirement is now a ready only view of the Page - it is a quite comple on with about 8 grid's working like this.
I had a functio to set the whole page to read-only
Public Shared Sub SetReadOnlyMode(cont As ControlCollection)
For Each control As Object In cont
Select Case control.GetType().ToString().ToUpper()
Case "EXT.NET.TEXTFIELD"
DirectCast(control, TextField).ReadOnly = True
Case "EXT.NET.NUMBERFIELD"
DirectCast(control, NumberField).ReadOnly = True
Case "EXT.NET.TEXTAREA"
DirectCast(control, TextArea).ReadOnly = True
Case "EXT.NET.GRIDPANEL"
Dim grid As GridPanel = DirectCast(control, GridPanel)
For Each col As ColumnBase In grid.ColumnModel.Columns
col.Enabled = False
If TypeOf col Is Ext.Net.ComponentColumn Then
For Each innerControl As Control In col.Controls
Select Case innerControl.GetType().ToString().ToUpper()
Case "CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.CODECOMBO.CODECOMBOBOX", _
"CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCONTACTCOMBO.AJAXCONTACTCOMBOBOX", _
"CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCODECOMBO.AJAXCODECOMBOBOX"
DirectCast(innerControl, Ext.Net.ComboBox).ReadOnly = True
Case "EXT.NET.TEXTFIELD"
DirectCast(innerControl, TextField).ReadOnly = True
Case "EXT.NET.NUMBERFIELD"
DirectCast(innerControl, NumberField).ReadOnly = True
End Select
Next
End If
Next
Case "EXT.NET.COMBOBOX"
DirectCast(control, ComboBox).ReadOnly = True
Case "EXT.NET.CHECKBOX"
DirectCast(control, Checkbox).Enabled = False
Case "EXT.NET.RADIOBUTTON"
DirectCast(control, Ext.Net.Radio).Enabled = False
Case "EXT.NET.BUTTON"
DirectCast(control, Ext.Net.Button).Disabled = True
Case "CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.CODECOMBO.CODECOMBOBOX", _
"CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCONTACTCOMBO.AJAXCONTACTCOMBOBOX", _
"CUST.ROCHE.IMPORT.VIEW.VIEW.ROCHEIMPORT.AJAXCODECOMBO.AJAXCODECOMBOBOX"
DirectCast(control, Ext.Net.ComboBox).ReadOnly = True
Case Else
If _log.IsDebugEnabled Then
_log.DebugFormat("Component {0} is not set to ReadOnly !", control.GetType().ToString())
End If
End Select
If TypeOf control Is Container Then
SetReadOnlyMode(DirectCast(control, Container).Controls)
End If
If TypeOf control Is FormPanel Then
SetReadOnlyMode(DirectCast(control, FormPanel).Controls)
End If
If TypeOf control Is Panel Then
SetReadOnlyMode(DirectCast(control, Panel).Controls)
End If
If TypeOf control Is FieldSet Then
SetReadOnlyMode(DirectCast(control, FieldSet).Controls)
End If
If TypeOf control Is WebControls.Panel Then
SetReadOnlyMode(DirectCast(control, WebControls.Panel).Controls)
End If
If TypeOf control Is Toolbar Then
SetReadOnlyMode(DirectCast(control, Toolbar).Controls)
End If
If TypeOf control Is FieldContainer Then
SetReadOnlyMode(DirectCast(control, FieldContainer).Controls)
End If
If TypeOf control Is RadioButtonList Then
SetReadOnlyMode(DirectCast(control, RadioButtonList).Controls)
End If
If TypeOf control Is Ext.Net.ContentContainer Then
SetReadOnlyMode(DirectCast(control, Ext.Net.ContentContainer).Controls)
End If
If TypeOf control Is Ext.Net.CheckboxGroup Then
SetReadOnlyMode(DirectCast(control, Ext.Net.CheckboxGroup).Controls)
End If
Next
End Sub
That workd fine, just call this method in page load and all controls are readonly. But I found a problem with the Grid above...
When I bind the Data to the Grid, the Fields of Type Textfield and Numberfield remain empty !?
I bind the Data with a function created long time ago
Here's a Data Example
"PackagingList": [
{
"Id": "f72eecae-8017-4366-bb0e-6d7d20468589",
"PackagingReferenceNumber": null,
"PackagingType": "CT",
"Quantity": "1.00",
"_Id": "00000000-0000-0000-0000-000000000000",
"_SysPersisted": false
}
]
And the two Methods look like this
function loadDataToGrid(data, gridId) {
var gp = Ext.getCmp(gridId);
var ret = false;
if (gp != null) {
ret = loadDataToGridObject(data, gp);
ret = true;
}
return ret;
}
function loadDataToGridObject(data, gridObject) {
var ret = false;
if (gridObject != null) {
gridObject.getStore().loadData(data, false);
gridObject.show();
ret = true;
}
return ret;
}
That works very smooth as long as the grid isn't set to read only with the method above :-/
I know, that's a lot to read, but It would be great to get this stuff running with this approach...
Peter