Oct 16, 2023, 9:55 AM
ext.net 7.4 how del data in GridPanel? reload data not work as ext.net5.3
@page "{handler?}"
@model Ext.Net.Examples.Pages.samples.gridpanel.editable. editor_with_directmethod.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Editor with DirectMethod - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var template = 'color:{0};';
var change = function (value, meta) {
meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
return value;
};
var pctChange = function (value, meta) {
meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
return value + "%";
};
var edit = function (editor, e) {
/*
"e" is an edit event with the following properties:
grid - The grid
record - The record that was edited
field - The field name that was edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid table row
column - The grid Column defining the column that was edited.
rowIdx - The row index that was edited
colIdx - The column index that was edited
*/
// Call DirectMethod
if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
App.direct.Edit(e.record.data.id, e.field, e.originalValue, e.value);
}
};
</script>
<script>
var onSelectionChange = function (grid, selection) {
var status = App.Status,
message = '??',
firstRowIndex,
firstColumnIndex,
lastRowIndex,
lastColumnIndex;
if (!selection) {
message = 'No selection';
} else if (selection.isCells) {
firstRowIndex = selection.getFirstRowIndex();
firstColumnIndex = selection.getFirstColumnIndex();
lastRowIndex = selection.getLastRowIndex();
lastColumnIndex = selection.getLastColumnIndex();
message = 'Selected cells: ' + (lastColumnIndex - firstColumnIndex + 1) + 'x' + (lastRowIndex - firstRowIndex + 1) +
' at (' + firstColumnIndex + ',' + firstRowIndex + ')';
} else if (selection.isRows) {
message = 'Selected rows: ' + selection.getCount();
} else if (selection.isColumns) {
message = 'Selected columns: ' + selection.getCount();
}
status.update(message);
};
var toggleRowSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setRowSelect(presse d);
};
var toggleCellSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setCellSelect(press ed);
};
var toggleColumnSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setColumnSelect(pre ssed);
};
</script>
</head>
<body>
<ext-viewport layout="Fit">
<items>
<ext-gridPanel id="GridPanel1" title="Editable GridPanel????" ColumnLines="true"
>
<store>
<ext-store data="Model.GridData">
<model>
<ext-model idProperty="ID">
<fields>
<ext-dataField name="id" type="Int" />
<ext-dataField name="name" />
<ext-dataField name="price" type="Float" />
<ext-dataField name="change" type="Float" />
<ext-dataField name="pctChange" type="Float" />
<ext-dataField name="lastChange" type="Date" />
</fields>
</ext-model>
</model>
</ext-store>
</store>
<columns>
<ext-column text="ID" dataIndex="id" width="50" />
<ext-column text="Company" dataIndex="name" flex="1" editorModel="new TextField()">
</ext-column>
<ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" editorModel="new NumberField()">
</ext-column>
<ext-column text="Change" dataIndex="change" renderer="change" editorModel="new NumberField()">
</ext-column>
<ext-column text="Change" dataIndex="pctChange" renderer="pctChange" editorModel="new NumberField()">
</ext-column>
<ext-dateColumn text="Last Updated"
dataIndex="lastChange"
format="yyyy-MM-dd"
width="125" editorModel='new Ext.Net.DateField() { Format = "yyyy-MM-dd" }'>
</ext-dateColumn>
</columns>
<bbar>
<ext-toolbar>
<items>
<ext-button text="add" icon="Add" handler="this.up('grid').store.insert(0, {});">
@* <listeners>
<click Handler="#{GridPanel1}.getStore().insert(0, {});" />
</listeners>*@
</ext-button>
<ext-button text="new add" iconCls="add">
<listeners>
<click Handler="App.GridPanel1.getStore().insert(0, {});" />
</listeners>
</ext-button>
<ext-button text="del" icon="Add">
<listeners>
<click Handler="App.GridPanel1.getStore().deleteSelected( );" />
</listeners>
</ext-button>
<ext-button ID="Button8" runat="server" Text="del_Data" Icon="Decline">
<Listeners>
<Click Handler="this.up('grid').deleteSelected();" />
</Listeners>
</ext-button>
<ext-button ID="Button8" runat="server" Text="reload" Icon="">
<Listeners>
<Click Handler="App.GridPanel1.getStore().reload();" />
</Listeners>
</ext-button>
</items>
</ext-toolbar>
</bbar>
<viewConfig>
<ext-tableView>
<selectionModel>
<ext-cellSelectionModel />
</selectionModel>
</ext-tableView>
</viewConfig>
<selModel>
<ext-spreadsheetSelectionModel id="SpreadsheetSelectionModel1" ColumnSelect="true" CheckboxSelect="true" PruneRemoved="true">
</ext-spreadsheetSelectionModel>
</selModel>
<listeners>
<SelectionChange Fn="onSelectionChange" />
</listeners>
<plugins>
@*<ext-cellEditingPlugin>
<listeners>
<edit fn="edit" />
</listeners>
</ext-cellEditingPlugin>*@
<ext-selectionReplicator></ext-selectionReplicator>
<ext-clipboardPlugin></ext-clipboardPlugin>
<ext-cellEditingPlugin contenteditable="true">
</ext-cellEditingPlugin>
</plugins>
</ext-gridPanel>
</items>
</ext-viewport>
<h4>
Editable GridPanel With Save To [DirectMethod] 2023-10-16
</h4>
</body>
</html>
@model Ext.Net.Examples.Pages.samples.gridpanel.editable. editor_with_directmethod.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Editor with DirectMethod - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var template = 'color:{0};';
var change = function (value, meta) {
meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
return value;
};
var pctChange = function (value, meta) {
meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
return value + "%";
};
var edit = function (editor, e) {
/*
"e" is an edit event with the following properties:
grid - The grid
record - The record that was edited
field - The field name that was edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid table row
column - The grid Column defining the column that was edited.
rowIdx - The row index that was edited
colIdx - The column index that was edited
*/
// Call DirectMethod
if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
App.direct.Edit(e.record.data.id, e.field, e.originalValue, e.value);
}
};
</script>
<script>
var onSelectionChange = function (grid, selection) {
var status = App.Status,
message = '??',
firstRowIndex,
firstColumnIndex,
lastRowIndex,
lastColumnIndex;
if (!selection) {
message = 'No selection';
} else if (selection.isCells) {
firstRowIndex = selection.getFirstRowIndex();
firstColumnIndex = selection.getFirstColumnIndex();
lastRowIndex = selection.getLastRowIndex();
lastColumnIndex = selection.getLastColumnIndex();
message = 'Selected cells: ' + (lastColumnIndex - firstColumnIndex + 1) + 'x' + (lastRowIndex - firstRowIndex + 1) +
' at (' + firstColumnIndex + ',' + firstRowIndex + ')';
} else if (selection.isRows) {
message = 'Selected rows: ' + selection.getCount();
} else if (selection.isColumns) {
message = 'Selected columns: ' + selection.getCount();
}
status.update(message);
};
var toggleRowSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setRowSelect(presse d);
};
var toggleCellSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setCellSelect(press ed);
};
var toggleColumnSelect = function (button, pressed) {
App.SpreadsheetSelectionModel1.setColumnSelect(pre ssed);
};
</script>
</head>
<body>
<ext-viewport layout="Fit">
<items>
<ext-gridPanel id="GridPanel1" title="Editable GridPanel????" ColumnLines="true"
>
<store>
<ext-store data="Model.GridData">
<model>
<ext-model idProperty="ID">
<fields>
<ext-dataField name="id" type="Int" />
<ext-dataField name="name" />
<ext-dataField name="price" type="Float" />
<ext-dataField name="change" type="Float" />
<ext-dataField name="pctChange" type="Float" />
<ext-dataField name="lastChange" type="Date" />
</fields>
</ext-model>
</model>
</ext-store>
</store>
<columns>
<ext-column text="ID" dataIndex="id" width="50" />
<ext-column text="Company" dataIndex="name" flex="1" editorModel="new TextField()">
</ext-column>
<ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" editorModel="new NumberField()">
</ext-column>
<ext-column text="Change" dataIndex="change" renderer="change" editorModel="new NumberField()">
</ext-column>
<ext-column text="Change" dataIndex="pctChange" renderer="pctChange" editorModel="new NumberField()">
</ext-column>
<ext-dateColumn text="Last Updated"
dataIndex="lastChange"
format="yyyy-MM-dd"
width="125" editorModel='new Ext.Net.DateField() { Format = "yyyy-MM-dd" }'>
</ext-dateColumn>
</columns>
<bbar>
<ext-toolbar>
<items>
<ext-button text="add" icon="Add" handler="this.up('grid').store.insert(0, {});">
@* <listeners>
<click Handler="#{GridPanel1}.getStore().insert(0, {});" />
</listeners>*@
</ext-button>
<ext-button text="new add" iconCls="add">
<listeners>
<click Handler="App.GridPanel1.getStore().insert(0, {});" />
</listeners>
</ext-button>
<ext-button text="del" icon="Add">
<listeners>
<click Handler="App.GridPanel1.getStore().deleteSelected( );" />
</listeners>
</ext-button>
<ext-button ID="Button8" runat="server" Text="del_Data" Icon="Decline">
<Listeners>
<Click Handler="this.up('grid').deleteSelected();" />
</Listeners>
</ext-button>
<ext-button ID="Button8" runat="server" Text="reload" Icon="">
<Listeners>
<Click Handler="App.GridPanel1.getStore().reload();" />
</Listeners>
</ext-button>
</items>
</ext-toolbar>
</bbar>
<viewConfig>
<ext-tableView>
<selectionModel>
<ext-cellSelectionModel />
</selectionModel>
</ext-tableView>
</viewConfig>
<selModel>
<ext-spreadsheetSelectionModel id="SpreadsheetSelectionModel1" ColumnSelect="true" CheckboxSelect="true" PruneRemoved="true">
</ext-spreadsheetSelectionModel>
</selModel>
<listeners>
<SelectionChange Fn="onSelectionChange" />
</listeners>
<plugins>
@*<ext-cellEditingPlugin>
<listeners>
<edit fn="edit" />
</listeners>
</ext-cellEditingPlugin>*@
<ext-selectionReplicator></ext-selectionReplicator>
<ext-clipboardPlugin></ext-clipboardPlugin>
<ext-cellEditingPlugin contenteditable="true">
</ext-cellEditingPlugin>
</plugins>
</ext-gridPanel>
</items>
</ext-viewport>
<h4>
Editable GridPanel With Save To [DirectMethod] 2023-10-16
</h4>
</body>
</html>
Last edited by lixiping; Oct 16, 2023 at 9:59 AM.
