ext表格范例
/**
* @include "http://www.cnblogs.com/extclient/appbase.js"
* @include "./SearchField.js"
*/
/*
* 客户资料管理
*/
//创建命名空间
Ext.namespace('net.meetrice');
Ext.namespace('net.meetrice.zdglobal');
/**
* 内容表单
* @class net.meetrice.zdglobal.dtlformpanel
* @extends Ext.form.FormPanel
*/
net.meetrice.zdglobal.dtlformpanel = Ext.extend(Ext.form.FormPanel,{
initComponent:function() {
Ext.apply(this,{
labelWidth:60,
labelAlign:'right',
bodyStyle:'padding:10px',
id:'dtlformpanel',
items:[{
xtype:'fieldset',
title:'数据字典',
autoHeight:true,
items:[
{xtype:'textfield',fieldLabel:'编号',name:'jsbh',width:388},
{xtype:'textfield',fieldLabel:'业务类型',name:'ktype',width:388},
{xtype:'textfield',fieldLabel:'数字代码',name:'numkey',width:388},
{xtype:'textfield',fieldLabel:'拼音代码',name:'pykey',width:388},
{xtype:'textfield',fieldLabel:'字典内容',name:'kvalue',width:388},
{xtype:'textfield',fieldLabel:'备用A',name:'valuea',width:388},
{xtype:'textfield',fieldLabel:'备用B',name:'valueb',width:388},
{xtype:'textfield',fieldLabel:'备用C',name:'valuec',width:388}
]
}]
});
net.meetrice.zdglobal.dtlformpanel .superclass.initComponent.call(this);
}
});
/**
* 表单窗口
* @class net.meetrice.zdglobal.dtlwin
* @extends Ext.Window
*/
net.meetrice.zdglobal.dtlwin = Ext.extend(Ext.Window,{
initComponent:function() {
Ext.apply(this,{
width:535,
height:400,
layout:'fit',
closeAction:'hide',
modal:true
});
net.meetrice.zdglobal.dtlwin.superclass.initComponent.call(this);
}
});
/**
* 主表格入口
* @class net.meetrice.ZdGlobal
* @extends Ext.grid.GridPanel
*/
net.meetrice.ZdGlobal = Ext.extend(Ext.grid.GridPanel,{
initComponent:function() {
var pageSize=10;
var ds = new Ext.data.Store({
url:'./extlist.do',
reader:new Ext.data.JsonReader({
root:'list',
totalProperty:'totalSize',
id:'id'
},['id','jsbh','ktype','numkey','pykey','kvalue','valuea','valueb','valuec']),
baseParams:{
limit:pageSize
},
remoteSort:true
});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',width:100,sortable:true,dataIndex:'jsbh'},
{header:'业务类型',width:100,sortable:true,dataIndex:'ktype'},
{header:'数字代码',width:100,sortable:true,dataIndex:'numkey'},
{header:'拼音代码',width:100,sortable:true,dataIndex:'pykey'},
{header:'字典内容',width:300,sortable:true,dataIndex:'kvalue'},
{header:'备用字段A',width:100,sortable:true,dataIndex:'valuea'},
// {header:'s备用字段B',width:100,sortable:true,dataIndex:'bvalueb'},
// {header:'s备s用字段C',width:100,sortable:true,dataIndex:'cvaluec'},
{header: "",
width:25,
align: 'center',
renderer: function() {
return '<div class="controlBtn" id="abcd">' +
'<img src="http://images.cnblogs.com/delete.gif" width="16" height="16" class="control_del">' +
'</div>';
}
}
]);
/**
* 扩展类的构建开始
*/
Ext.apply(this,{
store:ds
,sm:sm
,cm: cm
,bbar:new Ext.PagingToolbar({
pageSize:pageSize,
store:ds,
displayInfo:true
})
, tbar:[
{text:'新增',cls:'x-btn-text-icon',icon:'http://images.cnblogs.com/add.gif',handler:this.newZdGlobal,scope:this},'-',
{text:'修改',cls:'x-btn-text-icon',icon:'http://images.cnblogs.com/edit.gif',handler:this.editZdGlobal,scope:this},'-',
{text:'删除',cls:'x-btn-text-icon',icon:'http://images.cnblogs.com/delete.gif',handler:this.deleteZdGlobal,scope:this},'-',
{text:'查询',id:'btn-query',cls:'x-btn-text-icon',icon:'http://images.cnblogs.com/query.gif',handler:this.buildQueryWin,scope:this},
'->'
]
});
//调用父类构建函数
net.meetrice.ZdGlobal.superclass.initComponent.call(this);
//加载数据
ds.load({params:{start:0}});
//扩展类的弹出窗口
this.dtlformpanel = new net.meetrice.zdglobal.dtlformpanel();
this.dtlwin = new net.meetrice.zdglobal.dtlwin({items:this.dtlformpanel,buttons:[{
text:'保存',
handler:this.saveZdGlobal,
scope:this
},{
text:'取消',
handler:function(){this.dtlwin.hide();},
scope:this
}]});
//双击操作
this.on({"dblclick":this.dblclick});
this.addListener('rowcontextmenu', this.onMessageContextMenu);
}
/**
* 构建函数结束
*/
//右键菜单
,onMessageContextMenu : function (grid, rowIndex, e) {
e.stopEvent();
var coords = e.getXY();
var record = grid.getStore().getAt(rowIndex);
var messageContextMenu = new Ext.menu.Menu({
id: 'messageContextMenu',
items: [
{icon:'http://images.cnblogs.com/edit.gif',text: '编辑',handler: rgtEdit,scope: this},
{id: 'delete',icon:'http://images.cnblogs.com/delete.gif',handler: rgtDelete,text: '删除'}
]
});
//右键编辑
function rgtEdit() {
messageContextMenu.hide();
this.dtlwin.setTitle('修改业务字典');
this.dtlwin.show();
this.dtlformpanel.form.reset();
this.dtlformpanel.form.loadRecord(record);
this.dtlformpanel.url = './extupdate.do?id='+record.data.id;
};
//右键删除
function rgtDelete() {
messageContextMenu.hide();
if (!record||record.length == 0) {
Ext.Msg.alert("提示", "请先选择要删除的�记录");
return;
}
Ext.MessageBox.confirm('确认删除','确定要删除这些记录?',function(btn){
if (btn == 'yes'){
Ext.Ajax.request({
url:'./extdelete.do?ids='+record.data.id,
method:'POST',
success:function(response){
var data = Ext.util.JSON.decode(response.responseText);
if (data.success == true){
grid.getStore().remove(record);
grid.getView().refresh();
}
else{
Ext.MessageBox.alert('警告',data.msg);
}
grid.getStore().reload();
},
scope:this
});
}},this);
};
messageContextMenu.showAt([coords[0], coords[1]]);
e.preventDefault();//to disable the standard browser context menu
}
//双击事件
,dblclick :function(){
var sm = this.getSelectionModel();
var record=null;
try{
record=sm.getSelected();
if(record==null){
return;
}
}
catch(e){
try{
record=sm.selection.record();
}
catch(ex){}
}
this.showWinForm(record);
}
//双击打开窗口
,showWinForm:function(record){
this.dtlwin.setTitle('修改业务字典');
this.dtlwin.show();
this.dtlformpanel.form.reset();
this.dtlformpanel.form.loadRecord(record);
this.dtlformpanel.url = './extupdate.do?id='+record.data.id;
}
//新建窗口
,newZdGlobal : function(){
this.dtlwin.setTitle('新建业务字典');
this.dtlwin.show();
this.dtlformpanel.form.reset();
this.dtlformpanel.url = './extsave.do';
}
//编辑操作
,editZdGlobal:function(){
var records = this.getSelectionModel().getSelections();//单选
if (records.length!=1) {
Ext.Msg.alert("提示", "请先选择要修改的记录");
return;
}
this.dtlwin.setTitle('修改业务字典');
this.dtlwin.show();
this.dtlformpanel.form.reset();
this.dtlformpanel.form.loadRecord(records[0]);
this.dtlformpanel.url = './extupdate.do?id='+records[0].data.id;
}
//删除操作
,deleteZdGlobal:function(){
var records = this.getSelectionModel().getSelections();
if (!records||records.length == 0) {
Ext.Msg.alert("提示", "请先选择要删除的�记录");
return;
}
Ext.MessageBox.confirm('确认删除','确定要删除这些记录?',function(btn){
if (btn == 'yes'){
Ext.Ajax.request({
url:'./extdelete.do?ids='+RecordArrayUtils.get(records, 'id'),
method:'POST',
success:function(response){
var data = Ext.util.JSON.decode(response.responseText);
if (data.success == true){
for(var i = 0; i < records.length; i++) {
this.getStore().remove(records[i]);
this.getView().refresh();
}
this.getStore().reload();
}
else{
Ext.MessageBox.alert('警告',data.msg);
}
},
scope:this
});
}
},this);
}
//保存操作
,saveZdGlobal:function(){
if (this.dtlformpanel.form.isValid() == false){
return;
}
this.dtlformpanel.form.submit({
url:this.dtlformpanel.url,
success:function(form,action){
Ext.MessageBox.alert('警告',action.result.msg);
this.dtlwin.hide();
this.getStore().reload();
},
scope:this,
failure:function(form,action){
Ext.MessageBox.alert('警告',action.result.msg);
}
})
}
});
/**
* 注册主表格的xtype
*/
Ext.reg('zdglobal', net.meetrice.ZdGlobal);
/**
* 程序入口
*/
Ext.onReady(function(){
Ext.QuickTips.init();
var vp = new Ext.Viewport({
layout:'fit',
items:[{xtype:'zdglobal',region:'center'}]
})
});
* @include "http://www.cnblogs.com/extclient/appbase.js"
* @include "./SearchField.js"
*/
/*
* 客户资料管理
*/
//创建命名空间
Ext.namespace('net.meetrice');
Ext.namespace('net.meetrice.zdglobal');
/**
* 内容表单
* @class net.meetrice.zdglobal.dtlformpanel
* @extends Ext.form.FormPanel
*/
net.meetrice.zdglobal.dtlformpanel = Ext.extend(Ext.form.FormPanel,{
initComponent:function() {
Ext.apply(this,{
labelWidth:60,
labelAlign:'right',
bodyStyle:'padding:10px',
id:'dtlformpanel',
items:[{
xtype:'fieldset',
title:'数据字典',
autoHeight:true,
items:[
{xtype:'textfield',fieldLabel:'编号',name:'jsbh',width:388},
{xtype:'textfield',fieldLabel:'业务类型',name:'ktype',width:388},
{xtype:'textfield',fieldLabel:'数字代码',name:'numkey',width:388},
{xtype:'textfield',fieldLabel:'拼音代码',name:'pykey',width:388},
{xtype:'textfield',fieldLabel:'字典内容',name:'kvalue',width:388},
{xtype:'textfield',fieldLabel:'备用A',name:'valuea',width:388},
{xtype:'textfield',fieldLabel:'备用B',name:'valueb',width:388},
{xtype:'textfield',fieldLabel:'备用C',name:'valuec',width:388}
]
}]
});
net.meetrice.zdglobal.dtlformpanel .superclass.initComponent.call(this);
}
});
/**
* 表单窗口
* @class net.meetrice.zdglobal.dtlwin
* @extends Ext.Window
*/
net.meetrice.zdglobal.dtlwin = Ext.extend(Ext.Window,{
initComponent:function() {
Ext.apply(this,{
width:535,
height:400,
layout:'fit',
closeAction:'hide',
modal:true
});
net.meetrice.zdglobal.dtlwin.superclass.initComponent.call(this);
}
});
/**
* 主表格入口
* @class net.meetrice.ZdGlobal
* @extends Ext.grid.GridPanel
*/
net.meetrice.ZdGlobal = Ext.extend(Ext.grid.GridPanel,{
initComponent:function() {
var pageSize=10;
var ds = new Ext.data.Store({
url:'./extlist.do',
reader:new Ext.data.JsonReader({
root:'list',
totalProperty:'totalSize',
id:'id'
},['id','jsbh','ktype','numkey','pykey','kvalue','valuea','valueb','valuec']),
baseParams:{
limit:pageSize
},
remoteSort:true
});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',width:100,sortable:true,dataIndex:'jsbh'},
{header:'业务类型',width:100,sortable:true,dataIndex:'ktype'},
{header:'数字代码',width:100,sortable:true,dataIndex:'numkey'},
{header:'拼音代码',width:100,sortable:true,dataIndex:'pykey'},
{header:'字典内容',width:300,sortable:true,dataIndex:'kvalue'},
{header:'备用字段A',width:100,sortable:true,dataIndex:'valuea'},
// {header:'s备用字段B',width:100,sortable:true,dataIndex:'bvalueb'},
// {header:'s备s用字段C',width:100,sortable:true,dataIndex:'cvaluec'},
{header: "",
width:25,
align: 'center',
renderer: function() {
return '<div class="controlBtn" id="abcd">' +
'<img src="http://images.cnblogs.com/delete.gif" width="16" height="16" class="control_del">' +
'</div>';
}
}
]);
/**
* 扩展类的构建开始
*/
Ext.apply(this,{
store:ds
,sm:sm
,cm: cm
,bbar:new Ext.PagingToolbar({
pageSize:pageSize,
store:ds,
displayInfo:true
})
, tbar:[
{text:'新增',cls:'x-btn-text-icon',icon:'http://images.cnblogs.com/add.gif',handler:this.newZdGlobal,scope:this},'-',
{text:'修改',cls:'x-btn-text-icon',icon:'http://images.cnblogs.com/edit.gif',handler:this.editZdGlobal,scope:this},'-',
{text:'删除',cls:'x-btn-text-icon',icon:'http://images.cnblogs.com/delete.gif',handler:this.deleteZdGlobal,scope:this},'-',
{text:'查询',id:'btn-query',cls:'x-btn-text-icon',icon:'http://images.cnblogs.com/query.gif',handler:this.buildQueryWin,scope:this},
'->'
]
});
//调用父类构建函数
net.meetrice.ZdGlobal.superclass.initComponent.call(this);
//加载数据
ds.load({params:{start:0}});
//扩展类的弹出窗口
this.dtlformpanel = new net.meetrice.zdglobal.dtlformpanel();
this.dtlwin = new net.meetrice.zdglobal.dtlwin({items:this.dtlformpanel,buttons:[{
text:'保存',
handler:this.saveZdGlobal,
scope:this
},{
text:'取消',
handler:function(){this.dtlwin.hide();},
scope:this
}]});
//双击操作
this.on({"dblclick":this.dblclick});
this.addListener('rowcontextmenu', this.onMessageContextMenu);
}
/**
* 构建函数结束
*/
//右键菜单
,onMessageContextMenu : function (grid, rowIndex, e) {
e.stopEvent();
var coords = e.getXY();
var record = grid.getStore().getAt(rowIndex);
var messageContextMenu = new Ext.menu.Menu({
id: 'messageContextMenu',
items: [
{icon:'http://images.cnblogs.com/edit.gif',text: '编辑',handler: rgtEdit,scope: this},
{id: 'delete',icon:'http://images.cnblogs.com/delete.gif',handler: rgtDelete,text: '删除'}
]
});
//右键编辑
function rgtEdit() {
messageContextMenu.hide();
this.dtlwin.setTitle('修改业务字典');
this.dtlwin.show();
this.dtlformpanel.form.reset();
this.dtlformpanel.form.loadRecord(record);
this.dtlformpanel.url = './extupdate.do?id='+record.data.id;
};
//右键删除
function rgtDelete() {
messageContextMenu.hide();
if (!record||record.length == 0) {
Ext.Msg.alert("提示", "请先选择要删除的�记录");
return;
}
Ext.MessageBox.confirm('确认删除','确定要删除这些记录?',function(btn){
if (btn == 'yes'){
Ext.Ajax.request({
url:'./extdelete.do?ids='+record.data.id,
method:'POST',
success:function(response){
var data = Ext.util.JSON.decode(response.responseText);
if (data.success == true){
grid.getStore().remove(record);
grid.getView().refresh();
}
else{
Ext.MessageBox.alert('警告',data.msg);
}
grid.getStore().reload();
},
scope:this
});
}},this);
};
messageContextMenu.showAt([coords[0], coords[1]]);
e.preventDefault();//to disable the standard browser context menu
}
//双击事件
,dblclick :function(){
var sm = this.getSelectionModel();
var record=null;
try{
record=sm.getSelected();
if(record==null){
return;
}
}
catch(e){
try{
record=sm.selection.record();
}
catch(ex){}
}
this.showWinForm(record);
}
//双击打开窗口
,showWinForm:function(record){
this.dtlwin.setTitle('修改业务字典');
this.dtlwin.show();
this.dtlformpanel.form.reset();
this.dtlformpanel.form.loadRecord(record);
this.dtlformpanel.url = './extupdate.do?id='+record.data.id;
}
//新建窗口
,newZdGlobal : function(){
this.dtlwin.setTitle('新建业务字典');
this.dtlwin.show();
this.dtlformpanel.form.reset();
this.dtlformpanel.url = './extsave.do';
}
//编辑操作
,editZdGlobal:function(){
var records = this.getSelectionModel().getSelections();//单选
if (records.length!=1) {
Ext.Msg.alert("提示", "请先选择要修改的记录");
return;
}
this.dtlwin.setTitle('修改业务字典');
this.dtlwin.show();
this.dtlformpanel.form.reset();
this.dtlformpanel.form.loadRecord(records[0]);
this.dtlformpanel.url = './extupdate.do?id='+records[0].data.id;
}
//删除操作
,deleteZdGlobal:function(){
var records = this.getSelectionModel().getSelections();
if (!records||records.length == 0) {
Ext.Msg.alert("提示", "请先选择要删除的�记录");
return;
}
Ext.MessageBox.confirm('确认删除','确定要删除这些记录?',function(btn){
if (btn == 'yes'){
Ext.Ajax.request({
url:'./extdelete.do?ids='+RecordArrayUtils.get(records, 'id'),
method:'POST',
success:function(response){
var data = Ext.util.JSON.decode(response.responseText);
if (data.success == true){
for(var i = 0; i < records.length; i++) {
this.getStore().remove(records[i]);
this.getView().refresh();
}
this.getStore().reload();
}
else{
Ext.MessageBox.alert('警告',data.msg);
}
},
scope:this
});
}
},this);
}
//保存操作
,saveZdGlobal:function(){
if (this.dtlformpanel.form.isValid() == false){
return;
}
this.dtlformpanel.form.submit({
url:this.dtlformpanel.url,
success:function(form,action){
Ext.MessageBox.alert('警告',action.result.msg);
this.dtlwin.hide();
this.getStore().reload();
},
scope:this,
failure:function(form,action){
Ext.MessageBox.alert('警告',action.result.msg);
}
})
}
});
/**
* 注册主表格的xtype
*/
Ext.reg('zdglobal', net.meetrice.ZdGlobal);
/**
* 程序入口
*/
Ext.onReady(function(){
Ext.QuickTips.init();
var vp = new Ext.Viewport({
layout:'fit',
items:[{xtype:'zdglobal',region:'center'}]
})
});
