Jul 20, 2017, 7:08 PM
[CLOSED] SelectBox inside of GridPanel column
I can't get the column "Restriction" to render the text (description) instead of id using a column renderer because it cannot access the Store "StoreRestrictionType" used by the select box. I tried taking the Store out of the select box, then I can access the store but this causes other problems that unfortunately I can't reproduce in a simplistic example. So I need the Store to be nested in the SelectBox like the example.
<!DOCTYPE html>
<script runat="server">
Public Class RestrictionRow
Public Property id As Integer
Public Property name As String
Public Property symbol As String
public property type as Integer
End Class
Public Class oRestrictionType
Public Property value As Integer
Public Property text As String
End Class
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not IsPostBack Then
dim srtData as new list(of oRestrictionType)
srtData.Add(new oRestrictionType with {.value = 1, .text="type one"})
srtData.Add(new oRestrictionType with {.value = 2, .text="type two"})
srtData.Add(new oRestrictionType with {.value = 3, .text="type three"})
StoreRestrictionType.DataSource=srtData
StoreRestrictionType.DataBind
dim resData as new list(of RestrictionRow)
resData.Add(new RestrictionRow with {.id=1, .name="nameone", .symbol="aapl", .type=2})
resData.Add(new RestrictionRow with {.id=2, .name="nametwo", .symbol="ibm", .type=1})
resData.Add(new RestrictionRow with {.id=3, .name="namethree", .symbol="nflx", .type=2})
resData.Add(new RestrictionRow with {.id=4, .name="namefour", .symbol="tsla", .type=2})
StoreRestrictions.DataSource = resData
StoreRestrictions.DataBind
End If
End Sub
</script>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:XScript runat="server">
<script type="text/javascript">
var typeRenderer = function(value) {
var r = #{StoreRestrictionType}.getById(value);
// this doesn't work but gives no error - var r = #{RestrictionType}.getStore().getById(value);
if (Ext.isEmpty(r)) {
return "";
}
return r.data.text;
};
var onCancelRestriction = function (rowEditor, changes, record, rowIndex) {
#{btnAddRestriction}.enable();
}
var onValidateRestriction = function (rowEditor, changes, record, rowIndex) {
#{btnAddRestriction}.enable();
};
var validateBeforeAddingRestrictionsRow = function() {
// check valid row
var store = #{RestrictionsGrid}.store;
var row = store.data.items[store.data.items.length - 1];
if (row)
{
if (row.data.symbol == '') {
return true;
}
}
addRestriction();
#{btnAddRestriction}.disable();
}
var addRestriction = function () {
var grid = #{RestrictionsGrid},
store = grid.getStore();
grid.editingPlugin.cancelEdit();
store.getSorters().removeAll(); // We have to remove sorting to avoid auto-sorting on insert
grid.getView().headerCt.setSortState(); // To update columns sort UI
store.insert(0, {
symbol: '',
name: '',
type: 'type two'
});
grid.editingPlugin.startEdit(0, 0);
};
</script>
</ext:XScript>
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:FormPanel id="pnlSettings" runat="server" Layout="FitLayout">
<items>
<ext:GridPanel ID="RestrictionsGrid"
MinHeight="160"
flex=1
runat="server" AutoExpandColumn="name">
<Store>
<ext:Store ID="StoreRestrictions" runat="server">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" Type="Int" />
<ext:ModelField Name="name" />
<ext:ModelField Name="symbol" />
<ext:ModelField Name="type" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditing runat="server" SaveText="Ok" ErrorSummary="false" >
<Listeners>
<ValidateEdit Fn="onValidateRestriction" />
<CancelEdit Fn="onCancelRestriction" />
</Listeners>
</ext:RowEditing>
</Plugins>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="btnAddRestriction" runat="server" Text="Add Restriction" Icon="Add">
<Listeners>
<Click Handler="validateBeforeAddingRestrictionsRow();" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Remove Restriction" Icon="Delete">
<Listeners>
<Click Handler="#{RestrictionsGrid}.removeRecords();" />
</Listeners>
</ext:Button>
<ext:ToolbarFill runat="server">
</ext:ToolbarFill>
</Items>
</ext:Toolbar>
</TopBar>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
<ColumnModel>
<Columns>
<ext:Column runat="server" Header="Symbol" DataIndex="symbol">
<Editor>
<ext:TextField runat="server" AllowBlank="false" BlankText="Symbol is required" />
</Editor>
</ext:Column>
<ext:Column runat="server" Header="Description" DataIndex="name">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
<ext:Column runat="server" Header="Restriction" DataIndex="type">
<Renderer Fn="typeRenderer" />
<Editor>
<ext:SelectBox ID="RestrictionType" runat="server" DisplayField="text" ValueField="value" AllowBlank="false" BlankText="Restriction type is required">
<store>
<ext:Store ID="StoreRestrictionType" runat="server">
<Model>
<ext:Model runat="server" IDProperty="value">
<Fields>
<ext:ModelField Name="value" Type="Int" />
<ext:ModelField Name="text" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</store>
</ext:SelectBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</items>
</ext:FormPanel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
Last edited by fabricio.murta; Jul 21, 2017 at 3:58 PM.
