Ext视图里按钮JS总结

2024-06-03 23:38
文章标签 总结 js 视图 按钮 ext

本文主要是介绍Ext视图里按钮JS总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.打开文档：

function(){	var records = grid.getSelectedRecords();	if(records.length > 0){		var id = records[0].get('ID');	MixkyApp.desktop.openDocument('moduleName.docName');	}
}


其他写法：

MixkyApp.desktop.openDocument('moduleName.docName', id,undefined, {
	openerId : panel.getId()
});


2.如果需要获取视图里的字段的值：

records[0].get('fieldName');

3.提示消息：

MixkyApp.showInfoMessage("提示内容");

4.新增：

function(){
	MixkyApp.desktop.openDocument('moduleName.docName');
}

其他写法：

MixkyApp.desktop.openDocument('moduleName.docName', 0);


6.批量处理按钮：

function () {var records = grid.getSelectedRecords();if (records.length > 0) {Ext.Msg.confirm('系统提示','确定要XX选中的XX吗？',function(btn){if(btn=='yes'){var ids = [];for (var i = 0; i < records.length; i++) {ids[i] = records[i].get('ID');}XXXDirect.XXX(ids,function(r,e) {if(r && r.success) {MixkyApp.showInfoMessage('XXX！');grid.getStore().load();} else {MixkyApp.showErrorMessage('操作失败!' + r.message);}}); }});}
}


7.Excel导入：

function() {function openUpload(type,id){ types = type;  uploadid = id; winUpload.show(); }  var formUpload = new Ext.form.FormPanel({ baseCls: 'x-plain', labelWidth: 80, fileUpload:true, defaultType: 'textfield', items: [{  xtype: 'textfield', fieldLabel: '文 件', name: 'upload', inputType: 'file', allowBlank: false, blankText: '请上传文件', anchor: '90%'  }]  });  var winUpload = new Ext.Window({ title: 'Excel导入', width: 400,  height:200,  minWidth: 300, minHeight: 100, layout: 'fit', plain:true,  bodyStyle:'padding:5px;',buttonAlign:'center', items: formUpload, buttons: [{  text: '导入',  handler: function() { if(formUpload.form.isValid()){ Ext.MessageBox.show({ title: 'Please wait', msg: 'Importting...', progressText: '', width:300,  progress:true, closable:false, animEl: 'loding'});  formUpload.getForm().submit({ url:'plugin/kd/excel.import.do?type=1', success: function(form, action){ Ext.Msg.alert('成功','导入成功.'); winUpload.hide(); },  failure: function(form, action){console.log(action);var res = eval( "(" + action.response.responseText + ")" );Ext.Msg.alert('Error', "导入失败："+res.message);winUpload.hide();}  }) }  }  },{  text: '取 消',  handler:function(){winUpload.hide();} }]  });openUpload(); 
}


8.Excel导出：

function() {panel.exportToExcel();
}

9.弹窗：

MixkyApp.desktop.openUrlWithWindow('XXX', 'XXX.do?ids='+ids+'&gridId='+gridId,{title:'XXX',width : 350,height : 150,resizable : true,plain: true,modal:true,maximized:false,iconCls:'icon-sys-create',maximizable : true,minimizable : false,
});


10.确认弹窗(删除时的确认)：

function(){Ext.MessageBox.confirm('操作确认', '该操作将XXX，您确定吗？', function(btn){if(btn == 'yes'){var records = getSelectedRecords();if(records.length > 0){var id = records[0].get('ID');id=parseInt(id);XXXDirect.deleteDocument('modulename.docname', id, function(r,e){if(r && r.success){panel.refresh();} else {MixkyApp.showErrorMessage('操作失败，' + r.message);}});}}});
}


11.附件下载：

function(){var records = grid.getSelectedRecords();if(records.length > 0){var url = records[0].get('F_URL');if(url != "") {window.open(url);} else {MixkyApp.showInfoMessage('该信息尚无所选类型附件');}}
}


12.导出视图里未显示的字段：

function () {var selects = grid.getSelectionModel().getSelections();var ids = [];if (selects != null && selects.length > 0) {for (var i = 0; i < selects.length; i++) {ids[i] = selects[i].get("ID");}}var tableAll = false;var titles = [{name:'ID',key:'ID',format:'',width:'3000'},...,{name:'XXX',key:'F_XXX',format:'',width:'9000'}];var index;var array = new Array();for(index in titles) {var json =JSON.stringify(titles[index]);//对象转为JSONarray.push(json);}var excelParams = Ext.apply({},grid.getStore().baseParams);Ext.apply(excelParams,{ids: ids,titles:array, panelTitle: panel.title,tableAll:tableAll});excelParams.params = Ext.util.JSON.encode(excelParams.params);MixkyApp.showInfoMessage("表单生成需较长时间，请耐心等待");
	location.href = '/manage/downXXX.do?' + Ext.urlEncode(excelParams);
}


13.信息变更按钮：

	
function () {var viewPanel = panel;var records = grid.getSelectedRecords();if(records.length > 0){	//获取所需内容var memId = records[0].get('ID');	var memName = records[0].get('F_NAME');//弹窗选择变更内容字段showFormWin(records[0],viewPanel);} else {return;}//弹出窗口function showFormWin(record,viewPanel) {var memId = record.get('ID');var memName = record.get('F_NAME');//初始化标签中的Ext:Qtip属性。Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';//内容inputvar txtoldcontent = new Ext.form.TextArea({width: 280,allowBlank: true,maxLength: 100,//name: 'username',fieldLabel: '旧内容',blankText: '',maxLengthText: '内容不能超过100个字符'});var txtnewcontent = new Ext.form.TextArea({width: 280,allowBlank: false,maxLength: 100,//name: 'username',fieldLabel: '新内容',blankText: '请输入新内容',maxLengthText: '内容不能超过100个字符'});//----------------------下拉列表开始----------------------////创建数据源[数组数据源]var combostore = new Ext.data.ArrayStore({fields: ['updateType', 'name'],data: [['company', 'XXX'], ['major', 'XXX']]});//创建Comboboxvar combobox = new Ext.form.ComboBox({width: 280,fieldLabel: '变更属性',store: combostore,displayField: 'name',valueField: 'updateType',triggerAction: 'all',emptyText: '请选择...',allowBlank: false,blankText: '请选择属性',editable: false,mode: 'local'});//Combobox获取值combobox.on('select', function () {//alert(combobox.getValue());var oldContent = "";var fieldType = combobox.getValue();if(fieldType == "company") {oldContent = record.get('F_COMPANY');} else if(fieldType == "major") {oldContent = record.get('F_MAJOR');}txtoldcontent.setValue(oldContent);})//----------------------下拉列表结束----------------------////----------------------按钮开始----------------------//function updateMemInfo() {var updateType = combobox.getValue();var newContent = txtnewcontent.getRawValue();if(updateType && updateType!='' && newContent && newContent!='') {XXXDirect.updateXXXInfo(memId,updateType,newContent,function(r,e) {if(r && r.success) {MixkyApp.showInfoMessage('信息更新成功！');viewPanel.refresh();Ext.getCmp('updateXXXWin').close();} else {MixkyApp.showErrorMessage('操作失败：' + r.message);}} );} else {return;}}//提交按钮处理方法var btnsubmitclick = function () {updateMemInfo();}//提交按钮var btnsubmit = new Ext.Button({text: '提交',handler: btnsubmitclick});//----------------------按钮结束----------------------////表单var form = new Ext.form.FormPanel({frame: true,height: 204,style: 'margin:10px',items: [combobox, txtoldcontent, txtnewcontent],buttons: [btnsubmit]});//窗体var win = new Ext.Window({id:'updateXXXWin',title: '信息更新 - ' + memName,width: 447,height: 264,html: '',resizable: true,modal: true,closable: true,closeAction: 'close', maximizable: true,minimizable: true,buttonAlign: 'center',items: form});win.show();}
}

14.弹窗视图(表格类型):

<%@ page contentType="text/html; charset=utf-8"%>
<%String panelid = request.getParameter("panelid");String termname = request.getParameter("termname");String termid = request.getParameter("termid");
%>
<script language='javascript'>
Ext.onReady(function(){var panelid = '<%=panelid%>';var panel = Ext.getCmp(panelid);// 存储字段var fields = [{name:'id', mapping:'id'},{name:'f_branch_name', mapping:'f_branch_name'},{name:'f_branch_id', mapping:'f_branch_id'},{name:'f_branch_term', mapping:'f_branch_term'}];// 列表字段var columns = [new Ext.grid.CheckboxSelectionModel(),{id : 'id',dataIndex : 'id',width:70,header : 'XXX'},{id : 'f_branch_name',dataIndex : 'f_branch_name',header : 'XXX',width:120},{id : 'f_branch_id',dataIndex : 'f_branch_id',width:120,header : 'XXX'},{id : 'f_branch_term',dataIndex : 'f_branch_term',header : 'XXX'}];// 数据访问var store = new Ext.data.DirectStore({directFn : BranchTermListDirect.getBranchTermList,root : 'results',totalProperty : 'totals',idProperty : 'id',sortInfo: {field:'id', direction: 'ASC'},fields:fields});// 功能条var btnRefresh = new Ext.Action({text : '刷新',iconCls : 'icon-sys-refresh',handler : function(){panel.refresh();}});var btnSave = new Ext.Action({text : '保存',iconCls : 'icon-sys-save',handler : function(){panel.save();}});var tools = [btnSave, '-', btnRefresh];// 表格对象var grid = new Ext.grid.GridPanel({region : 'center',border : false,sm:new Ext.grid.CheckboxSelectionModel(),columns : columns,autoExpandColumn:'f_branch_name',enableHdMenu:false,enableColumnMove:false,store : store,tbar : tools,contextMenu : new Ext.menu.Menu({items:tools}),listeners : {'rowcontextmenu' : function(g, rowIndex, e){g.getSelectionModel().selectRow(rowIndex);g.contextMenu.showAt(e.getXY());},'rowdblclick' : function(g, rowIndex, e){btnEdit.execute();}}});// 刷新panel.refresh = function(){store.reload();}// 保存属性修改panel.save = function(){var records = grid.getSelectionModel().getSelections();	if(records.length > 0){	var ids = '';	var names = '';for(var i=0;i<records.length;i++){ids += records[i].data.id+',';	names += records[i].data.f_branch_name+',';}BranchTermListDirect.addBranchToOrg(ids,names,'<%=termname%>','<%=termid%>', function(result, e){if(result && result.success){MixkyApp.showInfoMessage('数据以保存','提示信息');}else{MixkyApp.showErrorMessage('保存数据出现错误！', '错误提示');}});}};panel.add(grid);panel.doLayout();panel.refresh();
});
</script>

15.输入提示框：

function(){Ext.Msg.prompt('添加XXX', '请输入XXX:', function(btn, text){if (btn == 'ok' && text != ''){XXXDirect.SaveDataToDictionary({'dictionary':'mkNotifyTag','f_caption':text,'f_name':text,'state':'add'}, function(result, e){if(result && result.success){panel.refresh();}else{MixkyApp.showDirectActionFail("添加【" + text + "】XXX失败", result, e);}})}});
}

16.获取修改的数据：

store.getModifiedRecords();
需要提交

17.删除：

panel.removeRecord();

18.上移下移：

panel.moveUp();
panel.moveDown();

19.群发：

function(){
var selects = grid.getSelectionModel().getSelections();var ids = [];var isAll=false;if (selects != null && selects.length > 0) {var emptyTel='';for (var i = 0; i < selects.length; i++) {ids[i] = selects[i].get("F_TEL");if(ids[i]==''){emptyTel+=selects[i].get("F_NAME");emptyTel+='、';}}emptyTel=emptyTel.substring(0,emptyTel.length-1);if(emptyTel!=''){MixkyApp.showInfoMessage(emptyTel+'XXX是空的','提示信息');if(selects.length=1){return;}}MixkyApp.desktop.openUrlWithWindow('sendMsgUtil', 'sendMsg.do?tels='+ids+'&isAll=false',{title:'自定义XXX',width : 500,height : 300,resizable : true,plain: true,modal:true,maximized:false,iconCls:'icon-sys-create',maximizable : true,minimizable : false,});	}else{Ext.MessageBox.confirm('操作确认', '您未选中数据，继续将给所有人XX，您继续吗？', function(btn) {if (btn == 'yes') {		MixkyApp.desktop.openUrlWithWindow('sendMsgUtil', 'sendMsg.do?tels='+ids+'&isAll=true',{title:'自定义XXX',width : 500,height : 300,resizable : true,plain: true,modal:true,maximized:false,iconCls:'icon-sys-create',maximizable : true,minimizable : false,});		 }});}}


这篇关于Ext视图里按钮JS总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1028439。

相关文章

Python中logging模块用法示例总结

Python中logging模块用法示例总结

《Python中logging模块用法示例总结》在Python中logging模块是一个强大的日志记录工具,它允许用户将程序运行期间产生的日志信息输出到控制台或者写入到文件中,：本文主要介绍Pyt... 目录前言一. 基本使用1. 五种日志等级2.  设置报告等级3. 自定义格式4. C语言风格的格式化方法
阅读更多...
Three.js构建一个 3D 商品展示空间完整实战项目

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,：本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可
阅读更多...
Spring 依赖注入与循环依赖总结

Spring 依赖注入与循环依赖总结

《Spring依赖注入与循环依赖总结》这篇文章给大家介绍Spring依赖注入与循环依赖总结篇,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. Spring 三级缓存解决循环依赖1. 创建UserService原始对象2. 将原始对象包装成工
阅读更多...
MySQL中查询和展示LONGBLOB类型数据的技巧总结

MySQL中查询和展示LONGBLOB类型数据的技巧总结

《MySQL中查询和展示LONGBLOB类型数据的技巧总结》在MySQL中LONGBLOB是一种二进制大对象（BLOB）数据类型,用于存储大量的二进制数据,：本文主要介绍MySQL中查询和展示LO... 目录前言1. 查询 LONGBLOB 数据的大小2. 查询并展示 LONGBLOB 数据2.1 转换为十
阅读更多...
在Java中实现线程之间的数据共享的几种方式总结

在Java中实现线程之间的数据共享的几种方式总结

《在Java中实现线程之间的数据共享的几种方式总结》在Java中实现线程间数据共享是并发编程的核心需求,但需要谨慎处理同步问题以避免竞态条件,本文通过代码示例给大家介绍了几种主要实现方式及其最佳实践,... 目录1. 共享变量与同步机制2. 轻量级通信机制3. 线程安全容器4. 线程局部变量（ThreadL
阅读更多...
Django中的函数视图和类视图以及路由的定义方式

Django中的函数视图和类视图以及路由的定义方式

《Django中的函数视图和类视图以及路由的定义方式》Django视图分函数视图和类视图,前者用函数处理请求,后者继承View类定义方法,路由使用path()、re_path()或url(),通过in... 目录函数视图类视图路由总路由函数视图的路由类视图定义路由总结Django允许接收的请求方法http
阅读更多...
Spring Boot 与微服务入门实战详细总结

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三
阅读更多...
Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys
阅读更多...
JavaSE正则表达式用法总结大全

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,：本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta
阅读更多...
SQL中JOIN操作的条件使用总结与实践

SQL中JOIN操作的条件使用总结与实践

《SQL中JOIN操作的条件使用总结与实践》在SQL查询中,JOIN操作是多表关联的核心工具,本文将从原理,场景和最佳实践三个方面总结JOIN条件的使用规则,希望可以帮助开发者精准控制查询逻辑... 目录一、ON与WHERE的本质区别二、场景化条件使用规则三、最佳实践建议1.优先使用ON条件2.WHERE用
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2