Ext简单实例
最近在接触Ext，参考别人的代码写了一个简单的Ext表单操作实例。
Jsp页面引入Ext基本的样式和js：
<link rel="stylesheet" type="text/css" href="${request.contextPath}/content/themes/blue/public.css">
<link rel="stylesheet" type="text/css" href="${request.contextPath}/content/themes/blue/pop_layer.css">
<link rel="stylesheet" type="text/css" href="${request.contextPath}/content/themes/blue/vtabpanel.css"/>
<link rel="stylesheet" type="text/css" href="${request.contextPath}/lib/gsui/ux/css/ux-all.css">
<script type="text/javascript" src="${request.contextPath}/lib/gsui/ux/ux-all.js"></script>
<script type="text/javascript" src="${request.contextPath}/lib/gsui/ux/vtabpanel.js"></script>
<script type="text/javascript" src="${request.contextPath}/content/js/mydemo/myExt.js"></script>
myExt.js文件内容如下：
Gsui.ns('MyCompany.ExtDemo');
/**
* 页面入口
*/
Gsui.onReady(function() {
var initViewport = function() {
new Gsui.Viewport({
id : 'viewport',
layout : 'fit',
items : {
xtype : 'panel',
defaults : {
style : 'padding:10px 10px 0px 10px;'
},
bodyStyle : 'border : 0px;',
layout : 'border',
items : [ {
region : 'center',
xtype : 'mydemoGridPanel'
}]
},
});
};
initViewport();
});
MyCompany.ExtDemo.MydemoGridPanel = Gsui.extend(Gsui.grid.GridPanel,{
id : 'mydemoGridPanel',
stripeRows : true,
enableHdMenu : false,
style : 'padding-top:5px', // 修复bug:增加上下收缩间距
bwrapStyle : 'border:1px solid #E0E4E8',
border : false,
pageSize : 10,
autoExpandColumn : true,
initComponent : function() {
//baseParams:发送请求的基础参数
var baseParams = {
'page.limit' : 10,
'page.start' : 0,
'myParam' : "参数传递"
};
var sm = new Gsui.grid.CheckboxSelectionModel(
{
renderer : function(v, c, r) {
if (r.get("ifOnline") != 9) {
return "<div class=\"x-grid3-row-checker\"> </div>";
} else {
return "";
}
}
});
//cm:column model
var cm = this.cm;
if (!cm) {
cm = this.buildCm();
cm.unshift(sm);
}
//store:表格数据，后台的bean属性要与store的fieldsName对应
var store = new Gsui.data.JsonStore({
url : _app.contextPath+ '/mydemo/getInfo.action?aa='+ Math.random(),
baseParams : baseParams,
root : 'data',
autoLoad : true,
fields : [ {name : 'id'},
{name : 'ip'},
{name : 'name'},
{name : 'status'},
{name : 'vender'},
{name : 'remark'},
{name : 'addTime'},
{name : 'type'},
{name : 'ifOnline'},
{name : 'x'},
{name : 'y'}
]
});
Gsui.apply(this, {
selModel : sm,
store : store,
colModel : new Gsui.grid.ColumnModel({
defaults : {
align : 'center',
sortable : false
},
columns : cm
}),
tbar : [ {
xtype : 'displayfield',
value : ' 服务器信息列表',
}, '->', {
text : '增加',
id : 'addBtn',
style : 'margin-right:10px',
ref : '../btnAdd'
} , {
text : '修改',
id : 'modifyBtn',
style : 'margin-right:10px',
ref : '../btnEdit'
/*handler : function() {
confirmModify('modifyOperate');
}*/
}, {
text : '删除',
id : 'deleteBtn',
style : 'margin-right:10px',
ref : '../btnDelete'
}, {
text : '刷新',
id : 'refreshbtn',
ref : '../btnRefresh'
}],
bbar : new Gosun.manage.PagingToolbar({
store : store,
displayInfo : true,
pageSize : this.pageSize,
displayCount : true
})
});
MyCompany.ExtDemo.MydemoGridPanel.superclass.initComponent.apply(this);
//绑定按钮事件
this.btnDelete.on('click',this.onDelete,this);
this.btnAdd.on('click',this.onAdd,this);
this.btnEdit.on('click',this.onEdit,this);
this.btnRefresh.on('click',this.onRefresh,this);
//刷新描述 通过this.publish("/mydemo/refresh");的方式来调用
this.subscribe('/mydemo/refresh',this.onRefresh,this);
this.on(
'render',
function() {
var store = this.getStore();
var view = this.getView();
this.tip = new Gsui.ToolTip(
{
target : view.mainBody,
delegate : '.x-grid3-row',
trackMouse : true,
renderTo : document.body,
listeners : {
beforeshow : function updateTipBody(tip) {
var rowIndex = view.findRowIndex(tip.triggerElement);
var record = store.getAt(rowIndex);
var Msg = record.get("name");
//str.replace:str为空时报错
tip.body.dom.innerHTML = "<b>备注:</b></br>"
+ Msg.replace("<","<").replace(">",">");
}
}
});
});
},
buildCm : function() {
Gsui.apply(this.actionColumn, {
grid : this
});
var cm = [
new Gsui.ux.grid.PagingRowNumberer({
header : '序号'
}),
{
header : 'id',
dataIndex : 'id',
hidden : true
},
{
header : '设备名称',
dataIndex : 'name',
renderer : function(value, cellmeta, record) {
if (value == "表格回调展示") {
return "更改列名";
}else{
return value;
}
}
},
{
header : '状态',
dataIndex : 'status',
},
{
header : '设备厂家',
dataIndex : 'vender',
},
{
header : '备注',
dataIndex : 'remark',
},
{
header : '添加时间',
dataIndex : 'addTime',
},
{
header : '类型',
dataIndex : 'type',
hidden : true
},
{
header : 'IP地址',
dataIndex : 'ip',
},
{
header : '是否在线',
dataIndex : 'ifOnline',
},
{
header : 'Y坐标',
dataIndex : 'x',
},
{
header : 'Y坐标',
dataIndex : 'y',
} ];
return cm;
},
afterRender : function(ct, position) {
MyCompany.ExtDemo.MydemoGridPanel.superclass.afterRender.apply(this, arguments);
},
/**删除服务器**/
onDelete:function(){
//返回选中的结果集
var records = this.getSelectionModel().getSelections();
var serverVenderList = new Array();
/**返回选中的结果集的第一条记录**/
//var selectRecord = this.getSelectionModel().getSelected();
if(records.length == 0){
Gsui.Msg.alert("提示","请选择需要删除的服务器");
return;
}
for (var i = 0; i < records.length; i++) {
var venderObj = {};
venderObj.id = records[i].data.id;
alert("id--->"+venderObj.id);
venderObj.name = records[i].data.name;
serverVenderList.push(venderObj);
}
Gsui.Msg.confirm('警告',"确认需要删除此服务器？",function(btn){
if(btn == 'yes'){
Gsui.Ajax.request({
url: _app.contextPath+'/mydemo/deleteServer.action',
params: Util.param({paramsList : serverVenderList}),
method: 'POST',
scope:this,
callback: function (options, success, response) {
if(success){
var res = Gsui.util.JSON.decode(response.responseText);
var operMsg = "";
if(res.data.length == 0){
operMsg = "删除成功";
this.publish("/mydemo/refresh");
}else{
var unDeletedVenderName = '';
for(var i = 0; i < res.data.length; i++){
unDeletedVenderName = unDeletedVenderName + res.data[i].name + '、';
}
unDeletedVenderName = unDeletedVenderName.substring(0, unDeletedVenderName.length-1);
operMsg = "以下服务器删除失败：" + unDeletedVenderName;
this.publish("/mydemo/refresh");
}
Gsui.Msg.alert("提示",operMsg);
}
}
},this);
}
},this);
},//onDelete
onRefresh : function(){
this.store.reload();
},//onRefresh
onAdd : function(){
new MyCompany.ExtDemo.serverInfoWindow({
operateType : 'add'
}).show();
},//onAdd
onEdit : function(){
var selectRecord = this.getSelectionModel().getSelected();
if(selectRecord == null){
Gsui.Msg.alert("提示","请选择需要编辑的服务器");
return;
}
new MyCompany.ExtDemo.serverInfoWindow({
operateType : 'edit',
title :'编辑服务器',
serverObj : selectRecord.data
}).show();
}//onEdit
});
Gsui.reg('mydemoGridPanel', MyCompany.ExtDemo.MydemoGridPanel);
/**
* 服务器管理窗口
*/
MyCompany.ExtDemo.serverInfoWindow = Gsui.extend(Gsui.Window,{
title : '添加服务器',
width : 340,
height : 395,
layout : 'anchor',
modal : true,
buttonAlign : 'center',
resizable : false,
operateType : null,
venderObj : null,
fbar : [{
text : '保存',
ref : '../btnConfirm'
},{
text : '取消',
ref : '../btnCancel'
}],
initComponent : function(){
Gsui.apply(this,{
items : [{
xtype : 'serverInfoFormPanel',
serverObj : this.serverObj,
ref : 'form'
}]
});
MyCompany.ExtDemo.serverInfoWindow.superclass.initComponent.apply(this);
this.btnConfirm.on('click',this.onSave,this);
this.btnCancel.on('click',this.onClickCancel,this);
},
afterRender : function(ct,position){
MyCompany.ExtDemo.serverInfoWindow.superclass.afterRender.apply(this,arguments);
if(this.operateType == 'edit'){
//填充编辑数据
for(var fieldName in this.serverObj){
var field = this.form.getForm().findField(fieldName);
if(!Gsui.isEmpty(field)){
field.setValue(this.serverObj[fieldName]);
}
}
}
},
onSave:function(node){
if(!this.form.getForm().isValid()){
return;
}
var serverDevInfo = {};
var formValues = this.form.getForm().getValues();
for(var valueName in formValues){
serverDevInfo["serverDevInfo."+valueName] = formValues[valueName];
}
if(this.operateType == 'edit'){
serverDevInfo["serverDevInfo.id"] = this.serverObj.id;
}
var requestUrl = _app.contextPath+'/mydemo/editAndaddServer.action?operateType='+this.operateType;
Gsui.Ajax.request({
url: requestUrl,
params: Util.param(serverDevInfo),
method: 'POST',
scope:this,
callback: function (options, success, response) {
if(success){
var msg = "添加厂商成功";
if(this.operateType == 'edit') msg = "编辑厂商成功";
Gsui.Msg.alert("提示",msg);
this.publish("/mydemo/refresh");
}
}
},this);
this.close();
},
onClickCancel : function(){
this.close();
}
});
/**
* 数据表单 用来添加或者编辑数据
*/
MyCompany.ExtDemo.serverInfoFormPanel = Gsui.extend(Gsui.form.FormPanel,{
venderObj : null,
initComponent : function(){
Gsui.apply(this,{
defaults: {width: 230},
labelWidth : 80,
labelAlign : 'right',
defaultType: 'textfield',
items: [{
fieldLabel: 'IP地址',
name: 'ip',
allowBlank:false
/**可以对表单进行校验**/
//maskRe:new RegExp("^[0-9]+$"),
//regex:new RegExp("^[0-9]+$"),
//regexText : '只允许输入数字',
//minLength : 7,
//maxLength : 11,
},{
fieldLabel: '服务器名称',
name: 'name',
allowBlank:false
},{
fieldLabel: '状态',
maxLength : 10,
name: 'status'
},{
fieldLabel: '厂商',
maxLength : 128,
name: 'vender'
},{
fieldLabel: '备注',
minLength : 7,
maxLength : 11,
name: 'remark'
},{
fieldLabel: '增加时间',
maxLength : 16,
name: 'addTime'
},{
fieldLabel: '类型',
name: 'type'
},{
fieldLabel: '是否在线',
name: 'ifOnline'
},{
fieldLabel: 'X坐标',
name: 'x'
},{
fieldLabel: 'Y坐标',
maxLength : 128,
name: 'y'
}
]
});
MyCompany.ExtDemo.serverInfoFormPanel.superclass.initComponent.apply(this);
}
});
Gsui.reg('serverInfoFormPanel',MyCompany.ExtDemo.serverInfoFormPanel);
/**
* 增加数据
*/
function confirmAdd(id) {
/*var rows = Gsui.getCmp('mydemoGridPanel').getSelectionModel()
.getSelections();// （这里this指的是gridpanel对象，如果不在本身定义内调用，可用Ext.getCmp('gridPanel的id')）.getSelectionModel().getSelections();
// //获取所有选中行，
if (rows && rows.length > 0) {
for ( var i = 0; i < rows.length; i++) {
var selectedObj = rows[i];
if (selectedObj.get("alarmStatus") == 0) {
break;
}
if (i == rows.length - 1) {
Gsui.Msg.show({
title : _msg.hintTitle,
msg : '请选择未确认的告警进行确认操作！',
minWidth : 250,
icon : Gsui.MessageBox.ERROR
});
return false;
}
}
Gsui.Msg.confirm(_msg.hintTitle, '是否要确认告警', function(flag) {
if (flag == 'yes') {
var data = [];
for ( var i = 0; i < rows.length; i++) {
var selectedObj = rows[i];
data.push(selectedObj.get("id"));
}
Gsui.Ajax.request({// 更新后台数据
url : _app.contextPath
+ '/journal/assetConfirmAlarm.action',
waitMsg : '数据更新中,请稍候....',
params : Util.param({
'alarmLog.alarmLogIdList' : data
}),
success : function(response, options) {
//var startTime = $('#startTime').val(), endTime = $('#endTime').val();
var store = Gsui.getCmp("alarmAssetGrid").store;
store.baseParams = {
'page.limit' : 10,
'page.start' : 0,
'alarmLog.alarmTypeId' : ALARM_TYPE,
'alarmLog.alarmLevelId' : ALARM_LEVEL,
'alarmLog.alarmStatus' : ALARM_STATUS,
'alarmLog.devTypeId' : 201,
'startTime' : $('#startTime').val(),
'endTime' : $('#endTime').val()
};
store.proxy.setUrl(_app.contextPath
+ '/journal/assetDevSearch.action?aa='
+ Math.random(), true);
store.reload();
Gsui.Msg.alert(_msg.hintTitle, '确认告警成功！');
},
scope : this
});
} else {
return;
}
}, this);
} else {
Gsui.Msg.show({
title : _msg.hintTitle,
msg : '请选择对应的告警！',
minWidth : 250,
icon : Gsui.MessageBox.ERROR
});
}*/
}