脉脉的Ext之旅

最新推荐文章于 2024-07-27 18:51:22 发布
最新推荐文章于 2024-07-27 18:51:22 发布
阅读量92 收藏
点赞数
分类专栏： EXT 文章标签： EXT FP json Ajax PHP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_18107/article/details/81970291
版权
:lol: 好久没写点东西了，今天花了点时间整理了最近这段时间的ext应用开发， :arrow: 分享分享！

[b]通过Ext.Ajax.request来获取初始化数据或进行异步请求：[/b] 

Ext.Ajax.request({
				async : false,
				method : "post",
				url : URL_Index.getInitData,
				params : {},
				success : function(response, opts) {
					try{
						window.initJsonData = Ext.util.JSON
								.decode(response.responseText);
					}catch(e){
						alert("初始化数据获取错误!");
					}
				},
				failure : function(response, opts) {
					alert("初始化数据获取失败!");
				}
			});


[b]创建Ext.form.ComboBox：[/b]
[img]http://dl.iteye.com/upload/attachment/364101/f2f59222-fb66-3798-9588-62ebd87fdffb.gif[/img] 


new Ext.form.ComboBox({
	//fieldLabel : 'State',
	hiddenName : 'rparammap.managerType',
	editable : false,
	name : 'rparammap.managerType',
	store : new Ext.data.JsonStore({
				id : 0,
				fields : ['stateCode', 'stateName'],
				data : [{"stateCode":"2","stateName":"普通用户"},{"stateCode":"1","stateName":"管理员"},{"stateCode":"0","stateName":"超级管理员"}]
			}),
	valueField : 'stateCode',
	displayField : 'stateName',
	typeAhead : true,
	allowBlank:false,
	mode : 'local',
	triggerAction : 'all',
	selectOnFocus : true
})
									})



[b]window窗体封装：[/b] 


/**
 * window 弹出窗体
 * 
 */
PanelWindow = function(config) {
	config = config || {};

	Ext.applyIf(config, {
		loadMask: {msg: '正在加载数据......'},
		columnLines	: true,
		stripeRows	: true,
		view: new Ext.grid.GroupingView({
			autoFill: true,
			forceFit: true,
			showGroupName: true,
			enableNoGroups: false,
			hideGroupedColumn: true
		})
	});

	var vWidth=config.vWidth ? config.vWidth : 500;
	var vHeight = config.vHeight ? config.vHeight : 300;
	var vTitle = config.vTitle ? config.vTitle : "无标题";
	var vIconCls = config.vIconCls ? config.vIconCls : "";

	this.viewWindow = new Ext.Window({
                layout:'fit',
                title : vTitle,
                iconCls : vIconCls,
                width:vWidth,
                height:vHeight,
                closeAction:'hide',
                plain: true,
				frame: true,
				modal: true,
				buttonAlign: 'center',
				items:config.formPanel
            });

	PanelWindow.superclass.constructor.call(this, config);
};

Ext.extend(PanelWindow, Ext.grid.GridPanel, {
	openWindow:function(){         
        this.viewWindow.show();
	},
	closeWindow: function(){
		 this.viewWindow.hide();
	}
});



[b]封装了PanelWindow的表单基类BaseFormPanel：[/b] 

/**
 * 表单基类
 * 
 * @type Form
 */
BaseFormPanel = function(config) {
	Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
	config = config || {};
	Ext.applyIf(config, {
				loadParam : {
					id : 'id',
					field : 'id'
				},
				varientParam : {} //变量参数
			});

	BaseFormPanel.superclass.constructor.call(this, config);

	this.viewWindow = new PanelWindow({
				formPanel : this,
				vWidth : config.vWidth,
				vHeight : config.vHeight,
				vTitle : config.vTitle,
				vIconCls : config.vIconCls
			});
};

Ext.extend(BaseFormPanel, Ext.form.FormPanel, {
			state : 0,
			//设置变量参数
			setVarientParam:function(v){
				this.varientParam = v;
			},
			//获得变量参数
			getVarientParam:function(){
				return this.varientParam;
			},
			openWindow : function() {
				this.viewWindow.openWindow();
			},
			closeWindow : function() {
				this.viewWindow.closeWindow();
			},
			reset : function() {

				this.form.items.each(function(f) {
							if(!f.isVisible() || !f.isXType("displayfield")){
								f.originalValue = '';
							}
						});

				this.form.reset();
			},
			/**
			 * 加载数据失败
			 */
			loadFailure : function(form, action) {
				if(action.result && action.result.msg){
					Ext.Msg.alert('提示信息', action.result.msg);
				}else{
					Ext.Msg.alert('提示信息', '数据加载失败！');
				}
			},

			submitFailure : function(form, action) {
				if(action.result && action.result.msg){
					Ext.Msg.alert('提示信息', action.result.msg);
				}else{
					Ext.Msg.alert('提示信息', '数据保存失败！');
				}
			},
			/**
			 * 加载数据成功
			 */
			loadSuccess : function(form, action) {

			},

			submitSuccess : function(form, action) {

				this.state = 0;
				if (!this.isSaveAndAdd) {
					var task = new Ext.util.DelayedTask(function(){
					    //window.location.reload();
					    this.reload();
					});
					this.closeWindow();
					Ext.example.msg('温馨提示', '操作成功!');
					task.delay(2200); 
					/*
					Ext.Msg.show({
								title : '温馨提示',
								msg : '操作成功!',
								buttons : Ext.Msg.OK,
								fn : function() {
									window.location.reload();
								},
								animEl : 'elId',
								icon : Ext.MessageBox.OK
							});
*/
					// this.closeWindow();
				}
				// this.grid.store.reload();
				this.reset();

			},
			_success : function(form, action) {
				if (action.type === 'load') {
					this.loadSuccess(form, action);
				} else {
					this.submitSuccess(form, action);

				}
			},
			_failure : function(form, action) {
				if (action.failureType == action.CLIENT_INVALID)
					if (action.result) {
						if (action.result.exception) {
							Ext.Msg.alert("错误提示", action.result.exception);
							return;
						}
						if (action.result.message) {
							Ext.Msg.alert("错误提示", action.result.message);
							return;
						}
					}
				if (action.type === 'load') {
					this.loadFailure(form, action);
				} else {
					this.submitFailure(form, action);
				}
			},
			/**
			 * 加载数据
			 */
			loadData : function(options) {
				options = options || {};
				// var record = this.grid.selModel.getSelected();
				// var field = record.get(this.loadParam.field);
				// var params = Ext.util.JSON.decode("{'" + this.loadParam.id +
				// "' : '" + field + "'}");
				Ext.applyIf(options, {
							method : 'post',
							url : this.loadUrl,
							// params: params,
							scope : this,
							success : this._success,
							failure : this._failure,
							waitTitle : this.loadWaitTitle || '请稍候',
							waitMsg : this.loadWaitMsg || '正在加载表单数据，请稍候...'
						});

				this.form.load(options);
				this.state = 1;
			},
			/**
			 * 提交数据
			 */
			submitData : function(options) {
				options = options || {};
				this.isSaveAndAdd = options.isSaveAndAdd || false;
				Ext.applyIf(options, {
							params:{"annexSeq":this.annexSeq},
							method : 'post',
							url : this.url,
							scope : this,
							timeout : 10,
							clientValidation : true,
							success : this._success,
							failure : this._failure,
							waitTitle : this.submitWaitTitle || '请稍候',
							waitMsg : this.submitWaitMsg || '正在保存表单数据，请稍候...'
						});
				this.form.submit(options);
			}

			,
			/**
			 * 更新数据
			 */
			commitDate : function(options) {

				options = options || {};
				this.isSaveAndAdd = options.isSaveAndAdd || false;
				Ext.applyIf(options, {
							method : 'post',
							url : this.url,
							scope : this,
							timeout : 10,
							clientValidation : true,
							success : this._success,
							failure : this._failure,
							waitTitle : this.submitWaitTitle || '请稍候',
							waitMsg : this.submitWaitMsg || '正在更新表单数据，请稍候...'
						});
				this.form.submit(options);

			},

			uploadData : function(options) {
				// alert(document.all.file.value)
				options = options || {};
				this.isSaveAndAdd = options.isSaveAndAdd || false;

				Ext.applyIf(options, {
							method : 'post',
							url : this.uploadUrl,
							scope : this,
							//timeout : 10,
							clientValidation : true,
							success : function(form, action) {
								if(action.success){
									//Ext.Msg.alert("温馨提示", "文件上传成功!");
									 Ext.example.msg('温馨提示', '文件上传成功!');
								}else{
									Ext.Msg.alert("温馨提示", "文件上传失败!");
								}
							},
							failure : function(form, action) {
								Ext.Msg.alert("温馨提示", "文件上传失败!")
							},
							waitTitle : this.submitWaitTitle || '请稍候',
							waitMsg : this.submitWaitMsg || '正在上传数据，请稍候...'
						});
				this.form.submit(options);

			}
		});


例子：ImageUploadFormPanel继承了BaseFormPanel，并使用PanelWindow的openWindow方法打开窗体：
先看效果图：
[img]http://dl.iteye.com/upload/attachment/364126/704401f4-08c1-3193-ada5-4e45919cbaea.gif[/img] 


/**
* 图片上传
*/

ImageUploadFormPanel = function(config){
	config = config || {};

	Ext.applyIf(config, {
		//renderTo: 'fi-form',
        fileUpload: true,
        width: 500,
        frame: false,
        autoHeight: true,
        vHeight : 135,
		vWidth : 310,
		vTitle : "上传图片",
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 40,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'textfield',
            emptyText: '请输入保存的名称(请勿使用中文名称)',
            name: 'saveName',
            fieldLabel: '名称'
        },{
            xtype: 'fileuploadfield',
            emptyText: '请选择上传的图片',
            fieldLabel: '图片',
            name: 'image',
            buttonText: '',
            buttonCfg: {
                iconCls: 'upload-icon'
            }
        }],
        buttons: [{
            text: '上传',
            handler: function(){
            /*
                if(fp.getForm().isValid()){
	                fp.getForm().submit({
	                    url: 'file-upload.php',
	                    waitMsg: 'Uploading your photo...',
	                    success: function(fp, o){
	                        msg('Success', 'Processed file "'+o.result.file+'" on the server');
	                    }
	                });
                }
              */
            }
        },{
            text: '重置',
            handler: function(){
                //fp.getForm().reset();
            }
        }]
	});

	ImageUploadFormPanel.superclass.constructor.call(this, config);
};

Ext.extend(ImageUploadFormPanel, BaseFormPanel, {

});

实例化ImageUploadFormPanel: 

imgUpload = new ImageUploadFormPanel({
	buttons: [{
            text: '上传',
            handler: function(){
                if(imgUpload.getForm().isValid()){
	                imgUpload.getForm().submit({
	                    url: URL_Fileupload.uploadImage,
	                    waitMsg: '正在上传...',
	                    success: function(iu, o){
	                         Ext.example.msg('温馨提示', '上传成功!');
	                         imgUpload.closeWindow();
	                         imgUpload.getForm().reset();
	                         chooser.store.load();
	                    },
	                    failure : function(iu, o){
	                    	Ext.Msg.alert('温馨提示', o.result.msg);
	                    }
	                });
                }
            }
        },{
            text: '重置',
            handler: function(){
                imgUpload.getForm().reset();

            }
        }]});

[b]
同理，也可以将PanelWindow封装到Grid中，看一效果图：[/b]
[img]http://dl.iteye.com/upload/attachment/364143/1f43c7f8-a0b3-32c9-a80a-0e7f84557aff.gif[/img]


[b]Ext.tree.TreePanel中loader的使用（异步请求）[/b]：通过beforeload事件对请求参数进行处理，通过processResponse 事件对请求成功后返回的数据进行处理并添加到当前树节点中。 

new Ext.tree.TreeLoader({
			preloadChildren: false,
			clearOnLoad: false,
			dataUrl : URL_Category.list,
			listeners : {
				beforeload : function(loader, node) {
					this.baseParams['rparammap.type'] = node.attributes['type'];
					if(node.attributes['pid'] == -1){
						this.baseParams['rparammap.id'] = '0';
					}else{
						this.baseParams['rparammap.id'] = node.id;
					}

				}
			},

			processResponse : function(response, node, callback) {
				var json = response.responseText;
				try {
					var o = Ext.decode(json).object;
					node.beginUpdate();
					for (var i = 0, len = o.length; i < len; i++) {
						var n = this.createNode(o[i]);
						if (n) {
							node.appendChild(n);
						}
					}
					node.endUpdate();
					if (typeof callback == "function") {
						callback(this, node);
					}
				} catch (e) {
					this.handleFailure(response);
				}
			}
		})
iteye_18107
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模拟登陆获取脉脉好友信息
jixn的博客
01-15 6817
代码已经上传到github上 简介： 这是一个基于python3而写的爬虫，爬取的网站的脉脉网(https://maimai.cn/)，在搜索框中搜索“CHO”，并切换到“人脉”选项卡，点击姓名，进入详情页，爬取其详细信息 获取的具体信息有： 基本信息、工作经历、教育经历、职业标签及其认可数、点评信息 几度关系：一度、二度、三度等 写给用户的 注意：如果你只是想使用这个项目，那么你可以看这里 如...
脉脉标签布局
02-05
"脉脉标签布局"是一个特定的布局方案，模仿了知名职业社交应用脉脉中的个人标签展示方式。这个布局的主要特点是TextView的自适应功能，它可以根据内容自动换行，以适应不同的屏幕尺寸和文本长度，同时保持界面的整洁...
[发布] GT-Grid 1.12 版 (080904发布) ★
大城小胖的大城
09-03 168
GT-Grid 1.12版 说明文档. 这篇文档主要说明一些这个版本的变化(新增功能 新特性) ======================================== 首先来说一下关于列表的创建函数. 在以前的示例中, 有这样的代码: [code="javascript"] GT.Utils.onLoad( GT.Grid.render(mygrid) )...
脉脉模拟登陆
yunlongl的博客
02-26 1498
说明 最近弄得最热的就是什么互联网寒冬，裁员等关键字，于是脉脉，领英的平台的热度就上去了，我就做了脉脉，领英的爬虫。 操作 脉脉模拟登陆难度不大，只是需要验证码处理 我用的云打码，数字的加减法  1、通过抓包分析，登陆的地址为 https://acc.maimai.cn/login ，一个post请求。其中包含用户名，密码，验证码。其中验证码是有时候需要，有时候不需要。 data...
iOS 学习之旅 - OC 篇
z240336124的专栏
09-04 818
我开始一边做 Android 的需求一边学习 OC 基础，一周后接了两个小需求（不是很难），我们主要是用的 OC 语言，很多同学新项目可能用的是 swift 我目前还没学，因为移动端大部分逻辑都在底层，由于之前写过一点点 C 和 C++ ，所以总的回顾起来压力不算太大。我们还需要了解编译与汇编的一些简单知识，这里我们只需要了解一些简单的指令就可以了，因为苹果只开源了部分代码，有些内容我们只能去看汇编，还有比如 OC 方法的执行过程中有部分代码就是汇编写的。关于 objc 的源码配置我这里提供一个。
仿脉脉PHP源码,脉脉——一个让你能够学习工作的平台
weixin_32126033的博客
03-28 486
在现在 21 世纪 , 越来越多的人有职场社交的需求 , 想要听不同的业内人士的经验分享 , 从而提升自己的能力。脉脉就给大家提供了这样一个平台 , 在这里还有机会认识一些志同道合的朋友 , 这些朋友能够帮助提升自己的能力 , 为自己的职业发展带来了很大的好处。脉脉 , 是社交还是工具 ?职场社交 , 可谓是每个人都需要的 , 也是很让人头疼的一件事。如果把它当成社交平台 , 那完全可以在其他的平...
脉脉林凡“开喷”，BOSS直聘慌了？猎聘输了？
yidiancaijing的博客
03-20 628
顺势而为，才能行稳致远。
脉脉
nature_ph的博客
02-23 383
笔试题： 1.二叉树 n0=n2+1 2.计算机网络：网络地址和广播地址 3. android的层级结构 activity的过程 4.取数据库中200条连续数据 top,limit 5.Linux命令 netstat -nap , ps -ef 6.测试的时候，android和iOS分别需要关注什么不同的点,app和web需要关注什么不同的点 7.使用的各种测试工具（接口、埋点）详...
Python爬虫设计之职业社交网站——脉脉
qq_36767053的博客
10-09 2559
本文旨在介绍简单的脉脉爬虫，用作学习交流，侵删~ 1. 基本知识 1.1Python基本语法 链接自寻????Python3 中文手册 1.2爬虫基本原理 具体一些内容参考博客????爬虫基本原理 1.3爬虫基本模块 1.3.1Requests模块 pip安装方法： pip install requests 导入requests模块： import requests Requ...
升级的脉脉，正在以招聘业务铺开商业化版图
07-18 218
脉脉能做成职场版的“大众点评”吗？
脉脉职位行业标签分类大全
04-20
脉脉的高级搜索标签，职位分类大全。 分类规则：顶级行业名称-->细分行业名称-->职业方向 - 金融业->银行业->（银行柜员、销售、理财经理/顾问、保险代理人、信贷业务、财务/审计/税务、基金经理、技术/研发、人力...
脉脉-2019未来职场出行报告-2019.4-40页.pdf
05-17
脉脉-2019未来职场出行报告-2019.4-40页.pdf
10-脉脉 相关面试题目
10-29
脉脉相关面试题目知识点 知识点1：数据表设计 在这个面试题目中，我们可以看到两个表：dau 表和 users 表。dau 表记录了每天脉脉活跃用户的uid和不同模块的活跃时长，users 表记录了脉脉所有注册用户的一些属性。...
脉脉和赤兔竞品分析.docx
12-23
【脉脉和赤兔竞品分析】 脉脉与赤兔是中国市场上两款主要的职场社交应用，它们都旨在为用户提供一个专业交流的平台。然而，两者在产品定位、市场表现、功能设计以及商业化策略上存在显著差异。 1. 产品介绍： - ...
【Node.js基础05】包的理解与使用
大前端开发工程师、互联网方向创业者
07-24 474
包的介绍与理解，以及详细阐述npm包管理工具的使用
HTTP请求入参类型解读
Bekind2010的专栏
07-24 1073
在HTTP请求中，请求头用于指示资源的MIME类型，即请求体的媒体类型。它告诉服务器实际发送的数据类型是什么，以便服务器能够正确地解析和处理这些数据。可以有多种值，每种值都对应着不同的媒体类型。以下是一些常见的?enctypeenctypeform-datatext/plaintext/plaintext/htmltext/htmltext/xmltext/xmltext/xml每种都对应着不同的数据格式和用途，选择合适的对于确保数据被正确解析和处理至关重要。
开源项目推荐：C++序列化库cereal
$firecat利白的代码足迹$
07-24 206
cereal 是仅有头文件的 C++11 序列化库。cereal 可以接受任意数据类型并可逆地将它们转换为不同的表示形式，例如紧凑的二进制编码、XML 或 JSON。cereal 的设计目标是快速、轻量且易于扩展 - 它没有外部依赖，可以轻松地与其他代码捆绑或单独使用。
PyCharm 常用 的插件
最新发布
u013934107的博客
07-27 162
PyCharm 常用 的插件
脉脉职场社交分析：领军之路与市场洞察
"产品分析|脉脉——领跑的职场社交独角兽" 本文主要分析了职场社交应用脉脉的产品架构、用户使用路径、市场分析以及用户和功能特性。脉脉作为中国最大的实名职场社交平台，经过六年的深耕，已经成为该领域的领头羊...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值