asp.netextjssencha-touchext.net

Ext.NET components using aspx.cs(code behind script)


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).


Solution

  • 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.