ExtJs4.0 GridPanel实例

最新推荐文章于 2012-12-17 14:59:55 发布

nuoyan666

最新推荐文章于 2012-12-17 14:59:55 发布

阅读量5.7k

点赞数

分类专栏： extjs4.0 文章标签： extjs function button string header autoload

extjs4.0 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

Contentitemjkgrid.js代码

var store;
Ext.app.ContentItemJKGrid = Ext.extend(Ext.grid.GridPanel,
{
title: '内容项接口列表',
region: 'north',
id: 'am-contentitemjkgrid',
height: 150,
ctiId: 0,
ctiName: '',
wsId: 0,
viewConfig:
{
id: 'ctigv',
trackOver: true,
stripeRows: true
},
initComponent: function () {
var me = this;
var ctism = new Ext.selection.CheckboxModel({
id: "ctiJKwsId",
dataIndex: 'CtiId',
mode: 'SINGLE', //设置Checkbom只能选中一个
listeners: {
'select': function (sm, rowIndex, record) {
ctijkClick();
}
}
});
this.columns =
[
{
id: 'ctiJKgridName',
header: '内容项名称',
width: 300,
sortable: true,
dataIndex: 'CtItemName'
},
{
id: 'ctiJKgridwsName',
width: 400,
header: 'Web Sevice名称',
dataIndex: 'WsName'
},
{
id: 'ctiJKgridExplain',
width: 400,
header: '数据库表名',
dataIndex: 'TableName'
}
];
this.selModel = ctism;
Ext.define('Ext.app.ContentItemData',
{
extend: 'Ext.data.Model',
fields:
[
//第一个字段需要指定mapping，其他字段，可以省略掉。
{
name: 'CtItemName',
mapping: 'CtItemName',
type: 'string'
},
{
name: 'WsName',
type: 'string'
},
{
name: 'TableName',
type: 'string'
},
{
name: 'CtiId',
type: 'int'
},
{
name: 'Id',
type: 'int'
},
{
name: 'WsId',
type: 'string'
}
]
});
store = Ext.create('Ext.data.Store',
{
model: 'Ext.app.ContentItemData',
pageSize: 20,
proxy:
{
type: 'ajax',
url: 'Data/CtItemInterface/CtItemInterfaceInfo.aspx?param=select',
reader:
{
type: 'json',
root: 'items',
totalProperty: 'total'
}
},
listeners: {
load: function () {
var addClick = Ext.getCmp("ctiJKAdd");
var EditClick = Ext.getCmp("ctiJKEdit");
var deleteClick = Ext.getCmp("ctiJKdelete");
if (addClick) {
if (me.ctiId == 0) addClick.disabled = true;
else addClick.disabled = false;
}
if (EditClick) {
if (me.ctiId == 0) EditClick.disabled = true;
else EditClick.disabled = false;
}
if (deleteClick) {
if (me.ctiId == 0) deleteClick.disabled = true;
else deleteClick.disabled = false;
}
if (me.store.data.length > 0) {
me.getSelectionModel().select(0); // checkbom默认选择一个
}
ctijkClick();
}
},
autoLoad: true
});
Ext.apply(this,
{
store: store,
dockedItems:
[{
dock: 'top',
xtype: 'toolbar',
items:
[
{
width: 80,
xtype: 'button',
id: "ctiJKAdd",
text: '添加',
store: store,
handler: ctijkAdd
},
{
width: 50,
xtype: 'button',
id: "ctiJKEdit",
text: '编辑',
store: store,
handler: ctijkEdit
},
{
width: 50,
xtype: 'button',
id: "ctiJKdelete",
text: '删除',
store: store,
handler: ctijkDelete
}
]
}]
});
///定义内容项接口删除事件
function ctijkDelete() {
var row = me.getSelectionModel().getSelection();
if (row.length == 0) {
Ext.Msg.alert("提示", "请选择一行");
} else {
Ext.Msg.confirm("提示", "确定删除这" + row.length + "条信息吗?",
function (btn) {
if (btn == "yes") {
Ext.Ajax.request({
url: "data/CtItemInterface/CtItemInterfaceManager.aspx?param=DeleteCtItemJk",
method: "POST",
params: { id: row[0].get("Id") }, //发送的参数
success: function (response, option) {
response = Ext.JSON.decode(response.responseText);
if (response.success == true) {
if (response.flag == true) {
Ext.MessageBox.alert("提示", "删除接口成功！");
//刷新列表
me.store.load();
}
else { Ext.MessageBox.alert("错误信息", "删除接口失败！"); }
}
else { Ext.MessageBox.alert("错误信息", response.msg); }
},
failure: function () { Ext.Msg.alert("提示", "删除失败<br>没有捕获到异常"); }
});
}
})
}
}
///复选框选择事件
function ctijkClick() {
//根据选中的行显示相应内容栏数据
var ctcgridview = Ext.getCmp('am-contentcolumngrid');
if (me.store.data.length > 0) {
ctcgridview.wsName = me.getSelectionModel().getSelection()[0].get("WsName"); //可以给另一个grid属性赋值
ctcgridview.wsId = me.getSelectionModel().getSelection()[0].get("WsId");
ctcgridview.ctiName = me.getSelectionModel().getSelection()[0].get("CtItemName");
} else { ctcgridview.wsId = 0 }
// alert(ctcgridview.wsId);
ctcgridview.ctiId = me.ctiId;
ctcgridview.store.load({
url: 'Data/ContentColumn/ContentColumnInfo.aspx?param=select',
params: { msg: me.ctiId }
});
}
//定义内容项接口添加事件
function ctijkAdd() {
var ctiWin = Ext.create('Ext.app.ContentItemJKAddForm', { ctiId: me.ctiId, ctiName: me.ctiName });
ctiWin.show();
}
//定义内容项接口编辑事件
function ctijkEdit() {
var row = me.getSelectionModel().getSelection();
if (row.length == 0) {
Ext.Msg.alert("提示", "请选择一行");
} else if (row.length > 1) {
Ext.Msg.alert("提示", "只能选择一行");
} else if (row.length == 1) {
var ctiInId = row[0].get('Id');
if (ctiInId != 0) {
var editwin = Ext.create('Ext.app.ContentItemJKEditForm', { Id: ctiInId });
editwin.show();
Ext.getCmp("am-contentitemjkeditform").getForm().load(
{
url: "data/CtItemInterface/CtItemInterfaceInfo.aspx?param=selectById",
params: { Id: ctiInId },
waitTitle: "请等待",
waitMsg: "正在加载数据...",
success: function (form, action) {
},
failure: function (form, action) {
Ext.Msg.alert("提示", "数据加载失败！");
}
});
}
}
};
Ext.app.ContentItemJKGrid.superclass.initComponent.call(this);
}
});

using System;

后台代码代码

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using CtManager.BLL;
using CtManager.Model;
using Newtonsoft.Json;
public partial class Data_CtInterface_CtInterfaceInfo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request["param"] == null)
{
Response.Write("");
return;
}
string parameter = Request["param"];
if (parameter == "select") Response.Write(doCtItemInterface());
else Response.Write("");
}
/// 根据内容项Id内容项接口集合
private string doCtItemInterface()
{
try
{
IList<CtItemInterface> ctItemInterface = CtItemInterfaceManager.GetAllCtItemInterfaces(Request["ctItemId"]);
if (ctItemInterface == null) return "{total:0,items:[]}";
string json = JavaScriptConvert.SerializeObject(ctItemInterface);
return "{total:3,items:" + JavaScriptConvert.SerializeObject(ctItemInterface) + "}";
}
catch (Exception)
{
return "{total:0,items:[]}";
}
}
}

nuoyan666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
ExtJs4.0 GridPanel实例

Contentitemjkgrid.js代码 var store; Ext.app.ContentItemJKGrid = Ext.extend(Ext.grid.GridPanel, { title: '内容项接口列表', region:
复制链接

扫一扫