|
1.ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)
2.ExtJS与.NET结合开发实例(Grid之批量删除篇)
感谢大家对两篇文章的关注，我将尽力帮助需要用到ExtJS开发的朋友去解决开发中遇到的问题.
言归正传，我们新增记录功能的步骤如下：
.新建FORM
FORM的建立是用ExtJS实现在GridForProjectLists.js文件中的。注意的是，我同时做了个ExtJS的ComboBox
ComboBox实现:
var storeDept = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:"../Projects/JsonDataSource/DepartmentInfo.aspx"
}),
// create reader that reads the project records
reader: new Ext.data.JsonReader({},[
{name:'Text',type:'string'},
{name:'Value',type:'string'}
])
});
storeDept.load();
var storeStatus = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:"../Projects/JsonDataSource/GetProjectStatus.aspx"
}),
// create reader that reads the project records
reader: new Ext.data.JsonReader({},[
{name:'NAME',type:'string'},
{name:'CODE',type:'string'}
])
});
storeStatus.load();
这里的实现了两个ComboBox,一个是部门选择，一个是状态选择。我这里只说其中一个数据源的写法，即GetProjectStatus.aspx。
新建GetProjectStatus.aspx文件，代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetProjectStatus.aspx.cs" Inherits="Web.Projects.JsonDataSource.GetProjectStatus" %>
<%=strJsonSource %>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using BusinessObject.Projects;
using Database;
using Web.Components;
namespace Web.Projects.JsonDataSource
{
public partial class GetProjectStatus : System.Web.UI.Page
{
protected string strJsonSource = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
GetJsonSouceString();
}
//这些不用我注释了吧，呵呵
private void GetJsonSouceString()
{
ProjectDictDataContext db = new ProjectDictDataContext();
var query = from p in db.PROJECT_DICTs
where p.DICT_TYPE == ""
select new { p.NAME, p.CODE };
strJsonSource = query.ToJSON();
}
}
}
接下来，回到GridForProjectLists.js文件上，我们实现FORM，代码如下：
Form表单实现:
var addForm = new Ext.FormPanel({
layout:'column',
items: [{
items: {
columnWidth:.,
layout: 'form',
border:false,
items: [
{
xtype:'textfield',
fieldLabel: ' 合同编号',
width:,
name: 'contractno',
allowBlank:false
},
{
xtype:'textfield',
fieldLabel: ' 项目名称',
width:,
name: 'projectname',
allowBlank:false,
blankText: '项目名称不能为空！'
},
new Ext.form.ComboBox({
fieldLabel: ' 所属部门',
name:'dept',
store: storeDept,
displayField:'Text',
valueField: 'Value',
hiddenName:'deptno',
width: ,
//typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText:'请选择部门',
selectOnFocus:true//,
//applyTo: 'local-states'
})
,{
xtype:'textfield',
fieldLabel: ' 项目经理',
width:,
name: 'projectmanager',
allowBlank:false
},
new Ext.form.DateField({
fieldLabel: ' 预计开始时间',
name: 'startTime',
width:
//allowBlank:false
}),
new Ext.form.DateField({
fieldLabel: ' 实际开始时间',
name: 'RealStartTime',
width:
//allowBlank:false
}),
new Ext.form.ComboBox({
fieldLabel: ' 当前状态',
name:'Status', //用来取text
store: storeStatus,
displayField:'NAME',
valueField: 'CODE',
width: ,
hiddenName:'StatusNo', //用来取value
//typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText:'请选择项目状态',
selectOnFocus:true
})
]
}
}, {
items: {
columnWidth:.,
layout: 'form',
border:false,
items: [
{
xtype:'textfield',
fieldLabel: ' 项目编号',
width:,
name: 'projectno',
allowBlank:false,
blankText: '项目编号不能为空！'
},{
xtype:'textfield',
fieldLabel: ' 项目简称',
width:,
name: 'projectalias'
},{
//右边空一格
},
{
xtype:'textfield',
fieldLabel: ' 开发经理',
width:,
name: 'projectleader'
},
new Ext.form.DateField({
fieldLabel: ' 预计结束时间',
name: 'endTime',
width:
//allowBlank:false
}),
new Ext.form.DateField({
fieldLabel: ' 实际结束时间',
name: 'RealEndTime',
width:
//allowBlank:false
})
]
}
}]
});
在第一篇文章中，提到ADD的按钮需要实现showAddPanel的方法，代码如下：
新增的界面
function showAddPanel(){
// create the window on the first click and reuse on subsequent clicks
newwin = new Ext.Window({
xtype:'window',
buttonAlign : 'right',
closable:true,
layout:'fit',
modal: 'true',
width:,
height:,
closeAction:'hide',
plain: true,
items: new Ext.TabPanel({
activeTab: ,
width:,
height:,
defaults:{bodyStyle:'padding:px'},
xtype:'tabpanel',
plain:true,
defaults:{ frame:true},
closable:true,
items:[{
title: '基本信息',
layout:'column',
cls:'x-plain',
items:[
addForm
]
},{
title: '跟踪信息',
layout:'fit',
cls:'x-plain',
items: [
gdNewProjectTracks
]
},{
title: '备注',
cls:'x-plain',
layout:'fit',
items: {
xtype:'htmleditor',
id:'memo',
fieldLabel:'备注'
}
}]}),
buttons: [{
id:'btnSave',
text:'保 存',
handler:doSave,
disabled:false
},{
text: '取 消',
handler: function(){
newwin.hide();
}
}]
});
newwin.show(this);
}
Form实现的最后一步是提交按钮的实现：
Submit
function doSave()
{
Ext.MessageBox.show({
msg: '正在保存数据, 请稍侯',
progressText: '正在保存中',
width:,
wait:true,
waitConfig: {interval:},
icon:'ext-mb-save',
nimEl: 'btnSave'
});
addForm.getForm().submit({
url:'../Projects/OperProjects/AddProjectBaseInfo.aspx',
method:'POST',
success: function(form, action){
Ext.MessageBox.hide();
Ext.MessageBox.alert('提示', '数据保存成功！');
newwin.hide();
ds.load({params:{start:, limit:}});
},
failure: function(form, action){
Ext.MessageBox.hide();
Ext.MessageBox.show({
title:'错误',
msg: '数据保存失败！',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
});
}
.实现新增记录的功能
从刚才的doSave方法中发现，新增功能在AddProjectBaseInfo.aspx页面中实现,代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddProjectBaseInfo.aspx.cs" Inherits="Web.Projects.OperProjects.AddProjectBaseInfo" %>
<%=strJson %>
AddProjectBaseInfo.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using BusinessObject.Projects;
namespace Web.Projects.OperProjects
{
public partial class AddProjectBaseInfo : System.Web.UI.Page
{
protected string strJson = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
AddProject();
}
private void AddProject()
{
//这里我就不校验数据正确性了
string ProjectName = Request.Form["projectname"];
string ContractNo = Request.Form["contractno"];
string ProjectNo = Request.Form["projectno"];
string DeptNo = Request.Form["deptno"];
string PM = Request.Form["projectmanager"];
string ProjectAlias = Request.Form["projectalias"];
string PL = Request.Form["projectleader"];
DateTime StartTime =DateTime.Parse(Request.Form["startTime"]);
DateTime EndTime =DateTime.Parse(Request.Form["endTime"]);
DateTime RealStartTime = DateTime.Parse(Request.Form["RealStartTime"]);
DateTime RealEndTime = DateTime.Parse(Request.Form["RealEndTime"]);
string Status = Request.Form["StatusNo"];
try
{
ProjectBaseInfoDataContext db = new ProjectBaseInfoDataContext();
PROJECT_BASE_INFO project = new PROJECT_BASE_INFO();
project.PROJECT_ALIAS = ProjectAlias;
project.PROJECT_CURRENT_STATUS = Status;
project.PROJECT_DEPT_NO = DeptNo;
project.PROJECT_FINISH_DATE = EndTime;
project.PROJECT_LEADER = PL;
project.PROJECT_MANAGER = PM;
project.PROJECT_NAME = ProjectName;
project.PROJECT_NO = ProjectNo;
project.PROJECT_REAL_FINISH_DATE = RealEndTime;
project.PROJECT_REAL_START_DATE = RealStartTime;
project.PROJECT_START_DATE = StartTime;
db.PROJECT_BASE_INFOs.InsertOnSubmit(project);
db.SubmitChanges();
strJson = @"{success: true}";
}
catch(Exception ex)
{
string strMsg = ex.Message;
strJson = @"{success: false}";
}
}
}
}
需要注意的是AddProjectBaseInfo.aspx.cs中需要返回JSON格式的success的true/false给doSave方法中调用。至此，新增功能已实现。
实现效果图如下：
(责任编辑：admin) |
骆驼户外男 真皮磨砂日常休闲鞋 低帮 2011秋冬新款 专柜正品特价