韦小宝是我的老乡

——慎思、专注,成就卓越管理
posts - 5, comments - 270, trackbacks - 1, articles - 0
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
    我的ExtJS与.NET结合开发实例系列:
     1.ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)
     2.ExtJS与.NET结合开发实例(Grid之批量删除篇)
感谢大家对两篇文章的关注,我将尽力帮助需要用到ExtJS开发的朋友去解决开发中遇到的问题.
    言归正传,我们新增记录功能的步骤如下:
    1.新建FORM
      FORM的建立是用ExtJS实现在GridForProjectLists.js文件中的。注意的是,我同时做了个ExtJS的ComboBox
      ComboBox实现:     
 1var storeDept = new Ext.data.Store({
 2         proxy: new Ext.data.HttpProxy({
 3                url:"../Projects/JsonDataSource/DepartmentInfo.aspx"
 4            }
),
 5            // create reader that reads the project records
 6            reader: new Ext.data.JsonReader({},[
 7                {name:'Text',type:'string'},
 8                {name:'Value',type:'string'}
 9         ])
10    }
);
11    storeDept.load(); 
12    
13     var storeStatus = new Ext.data.Store({
14         proxy: new Ext.data.HttpProxy({
15                url:"../Projects/JsonDataSource/GetProjectStatus.aspx"
16            }
),
17            // create reader that reads the project records
18            reader: new Ext.data.JsonReader({},[
19                {name:'NAME',type:'string'},
20                {name:'CODE',type:'string'}
21         ])
22    }
);
23    storeStatus.load();
   这里的实现了两个ComboBox,一个是部门选择,一个是状态选择。我这里只说其中一个数据源的写法,即GetProjectStatus.aspx。
   新建GetProjectStatus.aspx文件,代码如下:
GetProjectStatus.aspx
 1using System;
 2using System.Data;
 3using System.Configuration;
 4using System.Collections;
 5using System.Linq;
 6using System.Web;
 7using System.Web.Security;
 8using System.Web.UI;
 9using System.Web.UI.WebControls;
10using System.Web.UI.WebControls.WebParts;
11using System.Web.UI.HtmlControls;
12using System.Xml.Linq;
13using BusinessObject.Projects;
14using Database;
15using Web.Components;
16namespace Web.Projects.JsonDataSource
17{
18    public partial class GetProjectStatus : System.Web.UI.Page
19    {
20        protected string strJsonSource = string.Empty;
21        protected void Page_Load(object sender, EventArgs e)
22        {
23            GetJsonSouceString();
24        }

25        
26        //这些不用我注释了吧,呵呵
27        private void GetJsonSouceString()
28        {
29            ProjectDictDataContext db = new ProjectDictDataContext();
30            var query = from p in db.PROJECT_DICTs
31                        where p.DICT_TYPE == "003"
32                        select new { p.NAME, p.CODE };
33            strJsonSource = query.ToJSON();
34        }

35    }

36}

37

接下来,回到GridForProjectLists.js文件上,我们实现FORM,代码如下:
   
Form表单实现
在第一篇文章中,提到ADD的按钮需要实现showAddPanel的方法,代码如下:
新增的界面
Form实现的最后一步是提交按钮的实现:
 
Submit


   2.实现新增记录的功能
   从刚才的doSave方法中发现,新增功能在AddProjectBaseInfo.aspx页面中实现,代码如下:

1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddProjectBaseInfo.aspx.cs" Inherits="Web.Projects.OperProjects.AddProjectBaseInfo" %>
2<%=strJson %>

 

AddProjectBaseInfo.aspx.cs

需要注意的是AddProjectBaseInfo.aspx.cs中需要返回JSON格式的success的true/false给doSave方法中调用。至此,新增功能已实现。
    实现效果图如下:

    


    Form方式的编辑功能不再提供,大家可以参考新增功能来实现,欲知ExtJS的其它功能,且听下回分解……