Ext.onReady(function () {
Ext.QuickTips.init(); //HtmlEditor需要这个,不加，编辑时不提示
var sm = new Ext.grid.CheckboxSelectionModel({ handleMouseDown: Ext.emptyFn });
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //显示行号
sm,
{ header: '编号', dataIndex: 'ID', sortable: true },
{ header: '姓名', dataIndex: 'Names' },
{ header: '时间', dataIndex: 'Date', renderer: Ext.util.Format.dateRenderer('Y-m-d') },
{ header: '描述', dataIndex: 'Descn' }
]);
//创建数据源
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: '1' }),
reader: new Ext.data.JsonReader({
totalProperty: 'totalCount',
root: 'roots'
},
[
{ name: "ID" },
{ name: "Names" },
{
name: "Date", dateFormat: 'Y-m-d', convert: function (v) {
if (v == null) {
return null;
}
var d = new Date();
var str = v.toString();
var str1 = str.replace("/Date(", "");
var str2 = str1.replace(")/", "");
var dd = parseInt(str2);
d.setTime(dd);
return d;
}
},
{ name: "Descn" }
])
});
//加载数据
store.load({ params: { start: 0, limit: 5 } });
//创建form表单
var frm = new Ext.form.FormPanel({
id: "frmDemo",
frame: true,
lableWidth: 75,
lableAlign: "right",
items: [
{ xtype: "hidden", id: "types" },
{ xtype: "numberfield", fieldLabel: "编号", id: "id", allowNegative: false, allowBlank: false, blankText: "请输入有效的整数" },
{ xtype: "textfield", fieldLabel: "姓名", id: "name" },
{ xtype: "datefield", fieldLabel: "日期", id: "date", format: "Y-m-d" },
{ xtype: "textfield", fieldLabel: "描述", id: "descn" }
]
});
//创建窗体
var window = new Ext.Window({
title: '基本信息',
width: 400,
height: 300,
minWidth: 300,
minHeight: 200,
closeAction: 'hide',
modal: true, //弹窗遮层
plain: true, //与背景色保持协调
bodyStyle: 'padding:5px;',
buttonAlign: 'center',
items: frm, //添加内容
buttons: [
{
text: '提交', handler: function () {
var types = Ext.getCmp("types").getValue();
var id = Ext.getCmp("id").getValue();
var name = Ext.getCmp("name").getValue();
var date = Ext.getCmp("date").getValue();
var descn = Ext.getCmp("descn").getValue();
if (types == "add") {
if (id.lenght < 1 || name.lenght < 1 || date.lenght < 1 || descn.lenght < 1) {
Ext.MessageBox.alert("提示", "请填写完整的数据");
return;
}
Ext.Ajax.request({
url: "3",
method: "post",
params: { id: id, name: name, date: date, descn: descn },
success: function (response, opts) {
if (response.responseText == "false") {
Ext.MessageBox.alert("提示", "添加失败");
return;
}
Ext.MessageBox.alert("提示", "添加成功");
window.hide();
store.reload();
Ext.getCmp("id").setValue("");
Ext.getCmp("name").setValue("");
Ext.getCmp("date").setValue("");
Ext.getCmp("descn").setValue("");
}
});
} else if (types == "update") {
if (id.lenght < 1 || name.lenght < 1 || date.lenght < 1 || descn.lenght < 1) {
Ext.MessageBox.alert("提示", "请填写完整的数据");
return;
}
Ext.Ajax.request({
url: "2",
method: "post",
params: { id: id, name: name, date: date, descn: descn },
success: function (response, opts) {
if (response.responseText == "false") {
Ext.MessageBox.alert("提示", "修改失败");
return;
}
Ext.MessageBox.alert("提示", "修改成功");
window.hide();
store.reload();
Ext.getCmp("id").setValue("");
Ext.getCmp("name").setValue("");
Ext.getCmp("date").setValue("");
Ext.getCmp("descn").setValue("");
}
});
}
}
},
{
text: "重置", handler: function () {
Ext.getCmp("id").setValue("");
Ext.getCmp("name").setValue("");
Ext.getCmp("date").setValue("");
Ext.getCmp("descn").setValue("");
}
}
]
});
//创建显示面板
var grid = new Ext.grid.GridPanel({
autoHeight: true,
forceFit: true, //智能分配每列宽度
loadMask: true, //未加载前显示loading...
store: store,
stripeRows: true, //斑马线
sm: sm,
cm: cm,
tbar: [
{
xtype: "button", text: "添加", handler: function (btnAdd) {
Ext.getCmp("types").setValue("add");
Ext.getCmp("id").setValue("");
Ext.getCmp("name").setValue("");
Ext.getCmp("date").setValue("");
Ext.getCmp("descn").setValue("");
window.show();
}
},
{
xtype: "button", text: "删除", handler: function (btnDel) {
var gd = btnDel.ownerCt.ownerCt;
var st = gd.getStore();
var data = gd.getSelectionModel().getSelections();
if (data.length == 0) {
Ext.MessageBox.alert("提示", "请至少选择一条数据删除");
return;
} else {
if (confirm('是否删除选中的信息?')) {
var ids = "";
for (var i = 0; i < data.length; i++) {
ids += data[i].json.ID + ",";
}
Ext.Ajax.request({
url: "4",
params: { ids: ids },
method: "post",
success: function (response, opts) {
if (response.responseText == "false") {
Ext.MessageBox.alert("提示", "删除失败");
return;
}
Ext.MessageBox.alert("提示", "删除成功");
store.reload();
}
});
}
}
}
},
{
xtype: "button", text: "修改", handler: function (btnUpdate) {
var gd = btnUpdate.ownerCt.ownerCt;
var st = gd.getStore();
var data = gd.getSelectionModel().getSelections();
if (data.length != 1) {
Ext.MessageBox.alert("提示", "请选择一条信息进行修改");
return;
}
var emp = data[0];
Ext.getCmp("types").setValue("update");
Ext.getCmp("id").setValue(emp.json.ID);
Ext.getCmp("name").setValue(emp.json.Names);
Ext.getCmp("date").setValue(emp.json.Date);
Ext.getCmp("descn").setValue(emp.json.Descn);
window.show();
}
}
],
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: store,
displayInfo: true,
displayMsg: '显示第{0}条到{1}条记录,一共{2}条',
emptyMsg: "没有记录",
plugins: new Ext.ux.ProgressBarPager() //分页进度条
}),
viewConfig: {
columnsText: '显示的列',
forceFit: true,
sortAscText: '升序', /*调试成可用的*/
sortDescText: '降序'
},
autoExpandColumn: 'Descn',
collapsible: true,
animCollapse: false
});
//渲染
grid.render('grid');
});
