<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../ext-2.0.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="../Styles/default.css" rel="stylesheet" type="text/css" />
<script src="../ext-2.0.2/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="../ext-2.0.2/ext-all-debug.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = '../ext-2.0.2/resources/images/default/s.gif';
Ext.QuickTips.init();
new Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
el: 'north',
height: 50
}),
new Ext.BoxComponent({
region: 'south',
el: 'south',
height: 25
}), {
region: 'west',
xtype: 'treepanel',
title: '系统菜单',
width: 200,
collapsible: true,
autoScroll: true,
split: true,
rootVisible: false,
loader: new Ext.tree.TreeLoader({
//dataUrl: 'Index.aspx?args=001'
}),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
id: '',
text: 'Plants',
leaf: false,
children: [{
id: '',
text: 'Plants',
link: 'Plants.aspx',
leaf: true
}]
}, {
id: '',
text: 'Books',
leaf: false,
children: [{
id: '',
text: 'Books',
link: 'Books.aspx',
leaf: true
}]
}]
}),
listeners: {
click: function (node) {
if (node.isLeaf()) {
var panel = Ext.getCmp("tabpanel").getActiveTab();
panel.setTitle(node.attributes["text"]);
panel.load({ url: node.attributes["link"], scripts: true });
} else {
node.toggle();
}
}
}
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabpanel',
activeItem: 0,
items: {
title: '首页',
border: false,
autoScroll: true,
autoLoad: { url: 'Main.aspx', scripts: true }
}
}]
});
});
</script>
</head>
<body>
<div id="north">
</div>
<div id="south">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
Ext.onReady(function () {
var operation = function (value, p, r) {
return String.format('<img src="../Images/Icons/accept.png" title="编辑" style="cursor: pointer" /> <img src="../Images/Icons/delete.png" title="删除" style="cursor: pointer" />');
}
var check = function (value, p, r) {
return String.format('<input type="checkbox" disabled="disabled" {0} >', value.toLowerCase() == 'true' ? 'checked' : '');
}
///*
var store = new Ext.data.JsonStore({
url: 'Plants.aspx?args=01',
root: 'Data',
totalProperty: 'Count',
fields: ['Id', 'Common', 'Botanical', 'Zone', 'Light', { name: 'Price', type: 'float' }, { name: 'Availability', type: 'date', dateFormat: 'Y-m-d' }, 'Indoor']
});
var columns = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
new Ext.grid.CheckboxSelectionModel(),
{ header: 'Common', dataIndex: "Common", width: 100, align: 'left', sortable: true },
{ header: 'Botanical', dataIndex: "Botanical", width: 100, align: 'left', sortable: true },
{ header: 'Zone', dataIndex: "Zone", width: 100, align: 'right', sortable: true },
{ header: 'Light', dataIndex: "Light", width: 100, align: 'center', sortable: true },
{ header: 'Price', dataIndex: "Price", width: 100, align: 'right', sortable: true },
{ header: 'Availability', dataIndex: "Availability", width: 100, align: 'center', sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d') },
{ header: 'Indoor', dataIndex: "Indoor", width: 100, align: 'center', sortable: true, renderer: check },
{ header: "Operation", dataIndex: "ID", width: 100, align: 'center', renderer: operation }
]);
var gridPanel = new Ext.grid.GridPanel({
title: 'Plants',
width: 'auto',
//height: 500,
height: Ext.get('tabpanel').getHeight() - 29,
border: false,
stripeRows: true,
autoScroll: true,
loadMask: { msg: 'Loading...' },
sm: new Ext.grid.CheckboxSelectionModel(),
cm: columns,
store: store,
viewConfig: {
forceFit: true,
getRowClass: function (record, index) {
var c = record.get('Price');
return c < 5 ? 'price-rise' : 'price-fall';
}
},
tbar: [{
text: '添加',
//tooltip: '添加一条记录',
iconCls: 'add',
handler: function () {
win.setTitle('Add');
form.getForm().reset();
win.show();
}
}, '-', {
text: '编辑',
//tooltip: '编辑选中记录',
iconCls: 'edit',
handler: function () {
var selections = gridPanel.getSelectionModel().getSelections();
if (selections.length != 1) {
Ext.Msg.alert('提示', '请选择一行数据！');
return;
}
form.getForm().reset();
Ext.Ajax.request({
url: 'Plants.aspx?args=02',
success: function (response, options) {
var result = Ext.decode(response.responseText);
//填充数据
win.show();
},
failure: function (response, options) {
Ext.Msg.alert('提示', '加载失败!');
}
});
}
}, '-', {
text: '删除',
//tooltip: '删除选中记录',
iconCls: 'delete',
handler: function () {
var selections = gridPanel.getSelectionModel().getSelections();
if (selections.length == 0) {
Ext.Msg.alert('提示', '请至少选择一行数据!');
return;
}
Ext.MessageBox.confirm('提示', '确定要删除所选的记录吗?', function (btn, text) {
if (btn == 'yes') {
var ids = ';';
Ext.each(selections, function (item) {
ids += item.get("Id") + ';';
});
Ext.Ajax.request({
url: 'Plants.aspx?args=13',
params: { params: ids },
success: function (response, options) {
var result = Ext.decode(response.responseText);
Ext.Msg.alert('提示', result.msg);
gridPanel.getStore().reload();
},
failure: function (response, options) {
Ext.Msg.alert('提示', '删除失败!');
}
});
}
});
}
}],
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
afterPageText: '/{0}页',
beforePageText: '',
displayMsg: '当前显示[{0}]条至[{1}]条，共[{2}]条。',
emptyMsg: '没有记录'
})
});
store.load({ params: { start: 0, limit: 10} });
gridPanel.render('container')
//*/
var common = new Ext.form.TextField({
name: 'common',
fieldLabel: 'Common',
width: 120,
allowBlank: false
});
var botanical = new Ext.form.TextField({
name: 'botanical',
fieldLabel: 'Botanical',
width: 120,
allowBlank: false
});
var zone = new Ext.form.NumberField({
name: 'zone',
fieldLabel: 'Zone',
width: 120,
decimalPrecision: 0,
allowBlank: false
});
var light = new Ext.form.Field({
name: 'light',
fieldLabel: 'Light',
width: 120,
autoCreate: { tag: "select", children: [
{ tag: 'option', value: 'Mostly Shady', html: 'Mostly Shady' },
{ tag: 'option', value: 'Sun or Shade', html: 'Sun or Shade' },
{ tag: 'option', value: 'Sunny', html: 'Sunny' },
{ tag: 'option', value: 'Shade', html: 'Shade' },
]
}
});
var price = new Ext.form.NumberField({
name: 'price',
fieldLabel: 'Price',
width: 120,
decimalPrecision: 2,
allowBlank: false
});
var availability = new Ext.form.DateField({
name: 'availability',
fieldLabel: 'Availability',
width: 120,
format: 'Y-m-d',
allowBlank: false
});
var indoor = new Ext.form.Checkbox({
name: 'indoor',
fieldLabel: 'Indoor',
style: 'height:20px;'
});
var form = new Ext.form.FormPanel({
title: 'Plant',
frame: true,
style: 'margin:5px;padding:5px',
defaults: {
labelWidth: 70,
labelAlign: 'right',
msgTarget: 'side'
},
items: [{
layout: 'column',
items: [{
columnWidth: .5,
layout: 'form',
items: [common, zone, price, indoor]
}, {
columnWidth: .5,
layout: 'form',
items: [botanical, light, availability]
}]
}]
});
var win = new Ext.Window({
title: 'Plant',
width: 500,
height: 300,
modal: true,
items: form,
buttons: [{
text: '保存',
handler: function () {
var f = form.getForm();
if (f.isValid()) {
f.submit({
url: 'Plants.aspx?args=11',
success: function (form, action) {
Ext.Msg.alert('提示', action.result.msg, function () {
gridPanel.getStore().reload();
win.hide();
});
},
failure: function (form, action) {
Ext.Msg.alert('提示', '添加失败!');
}
});
}
}
}, {
text: '取消',
handler: function () {
win.hide();
}
}]
});
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;
using System.Data;
using System.Xml;
namespace Ext.Pages
{
public partial class Plants : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string args = Request.QueryString["args"];
if (string.IsNullOrEmpty(args)) return;
string result = string.Empty;
switch (args)
{
case "01": result = JsonConvert.SerializeObject(GetAll()); break;
case "11": result = Save(); break;
//case "12": result = Edit(); break;
case "13": result = Delete(); break;
default: break;
}
Response.ContentType = "text/plain";
Response.Write(result);
Response.End();
}
public JsonStore GetLights()
{
string[] lights = { "Mostly Shady", "Sun or Shade", "Sunny", "Shade" };
DataTable dt = new DataTable();
dt.Columns.Add("Text");
foreach (string item in lights)
{
DataRow dr = dt.NewRow();
dr["Text"] = item;
dt.Rows.Add(dr);
}
return new JsonStore() { Count = 4, Data = dt };
}
private JsonStore GetAll()
{
return new JsonStore() { Count = 36, Data = Data() };
}
private string Save()
{
return "{msg:'添加成功!'}";
}
private string Delete()
{
return "{msg:'删除成功!'}";
}
private DataTable Data()
{
XmlDocument doc = new XmlDocument();
doc.Load(Server.MapPath("../ext-2.0.2/examples/grid/plants.xml"));
XmlNodeList nodes = doc.DocumentElement.ChildNodes;
DataTable dt = new DataTable("Plants");
dt.Columns.Add("Id");
dt.Columns.Add("Common");
dt.Columns.Add("Botanical");
dt.Columns.Add("Zone");
dt.Columns.Add("Light");
dt.Columns.Add("Price");
dt.Columns.Add("Availability");
dt.Columns.Add("Indoor");
int start = Convert.ToInt16(Request.Form["start"]);
int limit = Convert.ToInt16(Request.Form["limit"]);
for (int i = start; i < start + limit && i < nodes.Count; i++)
{
DataRow dr = dt.NewRow();
dr["Id"] = Guid.NewGuid().ToString();
dr["Common"] = nodes[i].ChildNodes[0].InnerText;
dr["Botanical"] = nodes[i].ChildNodes[1].InnerText;
dr["Zone"] = nodes[i].ChildNodes[2].InnerText;
dr["Light"] = nodes[i].ChildNodes[3].InnerText;
dr["Price"] = Convert.ToDecimal(nodes[i].ChildNodes[4].InnerText);
dr["Availability"] = Convert.ToDateTime(nodes[i].ChildNodes[5].InnerText).ToString("yyyy/MM/dd");
dr["Indoor"] = Convert.ToBoolean(nodes[i].ChildNodes[6].InnerText);
dt.Rows.Add(dr);
}
return dt;
}
}
public class JsonStore
{
public int Count { get; set; }
public DataTable Data { get; set; }
public JsonStore()
{ }
public JsonStore(DataTable dt)
{
Count = dt.Rows.Count;
Data = dt;
}
}
}