ext.net 前台创建GridPanel,store ,后台设置Column,model,完成数据绑定。主要实现行选择事件

本文档展示了如何在Ext.NET中创建GridPanel,并使用后台代码完成数据绑定。通过设置Column, Model和Store,实现了数据的加载。同时,详细说明了如何定义并处理行选择事件,当用户选择行时,会触发一个DirectMethod,显示所选行的特定信息。" 133673312,19987386,JavaScript模块化:从过去到现在,"['JavaScript', '开发语言', 'ecmascript']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1  前台页面布局


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test2.aspx.vb" Inherits="prjTLECWeb.Test2" %>
<%@Register Assembly ="Ext.Net" Namespace ="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试GridPanel的行选择事件</title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager  ID="Resourcemanager3" runat ="server" ></ext:ResourceManager>
   <ext:Store ID="myStore" runat ="server" ></ext:Store>
        <ext:GridPanel id="myGridPanel" runat ="server" ></ext:GridPanel>
    </form>
</body>
</html>


2 后台页面代码

(1)  页面加载完成初始化

Imports prjTLECWeb.mySpace
Imports Ext.Net
Public Class Test2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim objColumnID As New Column
        Dim objColumnName As New Column
        Dim objClass1 As New MyClass1
        Dim objClass2 As New MyClass1
        Dim objList As New List(Of MyClass1)
        Dim objFieldID As New ModelField
        Dim objFieldName As New ModelField
        Dim objModel As New Model
        Dim objRowSelection As New RowSelectionModel
        Dim objPar As New Parameter
        objFieldID.Name = "myID"
        objFieldName.Name = "myName"
        objModel.Fields.Add(objFieldID)
        objModel.Fields.Add(objFieldName)
        myStore.Model.Clear()
        myStore.Model.Add(objModel)
        objClass1.myID = "hardenID"
        objClass1.myName = "hardenName"
        objClass2.myID = "JuecyID"
        objClass2.myName = "JuecyName"
        objList.Add(objClass1)
        objList.Add(objClass2)
        myStore.DataSource = objList
        myStore.DataBind()
        objColumnID.Text = "myID"
        objColumnID.DataIndex = "myID"
        objColumnName.Text = "myName"
        objColumnName.DataIndex = "myName"
        myGridPanel.ColumnModel.Add(objColumnID)
        myGridPanel.ColumnModel.Add(objColumnName)
        myGridPanel.StoreID = myStore.ID
        myGridPanel.Width = 400
        myGridPanel.Height = 300
        objRowSelection.Mode = SelectionMode.Single
        myGridPanel.SelectionModel.Clear()
        myGridPanel.SelectionModel.Add(objRowSelection)
        objPar.Mode = ParameterMode.Raw
        objPar.Name = "values"
        objPar.Value = "Ext.encode(#{" & myGridPanel.ID & "}.getRowsValues({selectedOnly:true}))"
        myGridPanel.DirectEvents.Select.ExtraParams.Add(objPar)
        AddHandler myGridPanel.DirectEvents.Select.Event, AddressOf SelectionRow  
    End Sub


(2)  行选择事件的定义,本质上为完成行选择事件后,通过委托调用一个方法,由于没有定义行选择事件,所以可以把委托对应的方法广义上可以理解为行选择事件
    <DirectMethod>      
    Public Sub SelectionRow(sender As Object, e As DirectEventArgs)
        Dim strJSON As String = e.ExtraParams(0).Value
        Dim objList As New List(Of MyClass1)
        objList = Newtonsoft.Json.JsonConvert.DeserializeObject(Of List(Of MyClass1))(strJSON)
        If (Not IsNothing(objList)) Then
            Ext.Net.X.Msg.Alert("welcome", objList(0).myID).Show()
        End If
    End Sub
End Class



3 (上文所用到的类的定义)

Namespace mySpace
    Public Class MyClass1

        Private Property _myID As String
        Private Property _myName As String
        Private Property _Y As Integer
        Public Property X As Integer


        Public Property myID As String
            Get
                Return _myID
            End Get
            Set(value As String)
                _myID = value
            End Set
        End Property
        Public Property myName As String
            Get
                Return _myName
            End Get
            Set(value As String)
                _myName = value
            End Set
        End Property
    End Class
End Namespace



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值