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
});
}*/
}이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
