My apologies for breaking the rules of asking questions. I am a learner and battling to find the right source/link to learn more about creating model, store and grid using the cs/code behind the script.
I managed to create the buttons below, I now want to do the same for the store, model and grid.
//aspx.cs file
protected void Page_Load(object sender, EventArgs e)
{
//creating button
Ext.Net.Button loadButton = new Ext.Net.Button();
loadButton.ID = "LoadPageContent";
loadButton.Text = "Load Page Content";
loadButton.Click += loadPageContentButton_click;
loadButton.AutoPostBack = true; //remove because it forces the entire page to reload.
this.MyViewPort.Items.Insert(0, loadButton); //adding the button to the static viewport
}
//apsx file
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Draft.aspx.cs" Inherits="ExtJS_Project.Draft" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
Ext.onReady(function () {
});
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" ID="MyViewPort">
</ext:Viewport>
</form>
</body>
</html>
I have no idea how to achieve this. I tried searching. All the solutions I see on the web are using either javascript or static elements. Below is the model, store and grid that I want to create using the cs file (Ext.NET). May anyone please help me with the link where I can learn more about this because there is more that I still need to learn? I checked this link and it is not helping me this and this one too,
Ext.define('EmployeeListModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' },
{ name: 'Surname', type: 'string' },
{ name: 'DateOfBirth', type: 'string' },
{ name: 'Username', type: 'string' },
{ name: 'Password', type: 'string' },
{ name: 'LoginAttempts', type: 'int' },
{ name: 'RegisterDate', type: 'string' }
]
});
Ext.create('Ext.data.Store', {
storeId: 'employeeListDatabaseStoreId',
model: 'EmployeeListModel',
proxy: {
type: 'ajax',
url: 'https://localhost:44368/api/values'
},
autoLoad: true
});
Ext.create('Ext.grid.Panel', {
id:"MyGridPanelId",
title: 'Employee List',
store: Ext.data.StoreManager.lookup('employeeListDatabaseStoreId'),
columns: [
{ text: 'Employee Code', dataIndex: 'Id', width:115},
{ text: 'Name', dataIndex: 'Name', editor: 'textfield', width: 150 },
{ text: 'Surname', dataIndex: 'Surname', editor: 'textfield', width: 150 },
{ text: 'Username', dataIndex: 'Username', editor: 'textfield', width: 150 },
{
text: 'Date Of Birth', dataIndex: 'DateOfBirth', width: 150, editor: {
inputType: 'date',
allowBlank: false
}
},
{ text: 'Password', dataIndex: 'Password', editor: 'textfield' },
{ text: 'Login Attempts', dataIndex: 'LoginAttempts', editor: 'textfield', width: 150 },
{ text: 'Registration Date', dataIndex: 'RegisterDate', width: 150 },
{ dataIndex: 'iD', width: 10 }
],
selModel: {
injectCheckbox: 'first',
checkOnly: true,
model: 'EmployeeListModel',
type: 'checkboxmodel'
},
plugins: {
ptype: 'rowediting',
clicksToEdit: 1,
listeners: {
validateedit: function (editor, element, elementOptions) {
var columns = ["Name", "Surname", "DateOfBirth", "Username", "Password"];
var madeChanges = false;
for (var i = 0; i < columns.length; i++) {
if (element["newValues"][columns[i]] != element["originalValues"][columns[i]]) {
madeChanges = true; //we can just call the function to update from here instead of having to call it on the if condition after the loop. But to simplefy the code...
break; //no need to continue looping
}
}
if (madeChanges) {
UpdateEmployee(element["newValues"], element); //the second parametor will help us set the database generated data(emp code, login, registration date)
}
}
}
},
Width: 950,
height: 620,
autoScroll:true,
layout: "fit",
frame:true
});
Link to learn more about creating Ext.NET components(buttons, models, stores, iFrames, grids...)on the cs (code behind script).
In case anyone is stuck on creating the model, store and the grid on on Ext.NET, I will post this solution. But I still need the link to where I can learn about Ext.NET. I got what I have with the help of intelligence.
First you need a model. Remember that on ExtJS, when defining the your new model, you extend extend: 'Ext.data.Model', here on Ext.NET, a model is just a class. Your class has to inherit (extend) the model class. Below is my model. please do not mind my EmployeeOML empOML = new EmployeeOML(); it is just a class from another model. This class has all the fields from the database. enter code here will return a string column/field/property/variable name.
public class EmployeeModel:Model
{
EmployeeOML empOML = new EmployeeOML();
public EmployeeModel()
{
this.Fields.Add(new ModelField(nameof(empOML.Id), ModelFieldType.Int));
this.Fields.Add(new ModelField(nameof(empOML.Name), ModelFieldType.String));
this.Fields.Add(new ModelField(nameof(empOML.Surname), ModelFieldType.String));
this.Fields.Add(new ModelField(nameof(empOML.DateOfBirth), ModelFieldType.String));
this.Fields.Add(new ModelField(nameof(empOML.Username), ModelFieldType.String));
this.Fields.Add(new ModelField(nameof(empOML.Password), ModelFieldType.String));
this.Fields.Add(new ModelField(nameof(empOML.LoginAttempts), ModelFieldType.Int));
this.Fields.Add(new ModelField(nameof(empOML.RegisterDate), ModelFieldType.String)); }
}
creating a store is just straight to the point. For the data source, I am getting the list from the database with all the fields we have on the above model
protected Store CreateStore()
{
Store myStore= new Store();
myStore.ID = "myStoreId";
myStore.Model.Add(new EmployeeModel());
myStore.DataSource = empSL.GetAllEmployee();
return myStore;
}
Finally, I created the grid panel below.
protected GridPanel CreateGridPanel(Store myStore)
{
GridPanel myPanel = new GridPanel();
myPanel.ID = "employeeListPanel";
myPanel.Store.Add(myStore);
myPanel.ColumnModel.Columns.Add(new Column { Text = "Employee Code", DataIndex = nameof(empOML.Id) });
myPanel.ColumnModel.Columns.Add(new Column { Text = "Full Name", DataIndex = nameof(empOML.Name) });
myPanel.ColumnModel.Columns.Add(new Column { Text = "Surname", DataIndex = nameof(empOML.Surname) });
myPanel.ColumnModel.Columns.Add(new Column { Text = "Birth Date", DataIndex = nameof(empOML.DateOfBirth) });
myPanel.ColumnModel.Columns.Add(new Column { Text = "Username", DataIndex = nameof(empOML.Username) });
myPanel.ColumnModel.Columns.Add(new Column { Text = "Password", DataIndex = nameof(empOML.Password) });
myPanel.ColumnModel.Columns.Add(new Column { Text = "Loggin attempts", DataIndex = nameof(empOML.LoginAttempts) });
myPanel.ColumnModel.Columns.Add(new Column { Text = "Date Registed", DataIndex = nameof(empOML.RegisterDate) });
return myPanel;
}
The bonus code below is responsible for implementing these function calls. using functions is a choice.
var myStore = CreateStore();
var mgridPanel = CreateGridPanel(myStore);
int lastIndex = MyViewPort.Items.Count;
this.MyViewPort.Items.Insert(lastIndex, mgridPanel);
HTML Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtNet_Project.WebForm1" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title></head><body><form id="form1" runat="server"><ext:ResourceManager runat="server" /><ext:Viewport ID="MyViewPort" runat="server"></ext:Viewport></form></body></html>
If any one has a link where I can read about using Ext.NET on the code behind, please kindly assist. I do not what to use static elements and also do not what to use ExtJS.