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 myEmployeeOML empOML = new EmployeeOML();it is just a class from another model. This class has all the fields from the database.enter code herewill return a string column/field/property/variable name.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
Finally, I created the grid panel below.
The bonus code below is responsible for implementing these function calls. using functions is a choice.
HTML Code
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.