ExtJS样例总结 -3
http://tianya23.blog.51cto.com/1081650/813863
http://tianya23.blog.51cto.com/1081650/821649
1、Ajax标准请求：
Ext.Ajax.request({ url : '../../blackList/deleteBlackLists.do', params : { records : blackListRecords }, success : function(response, opts) { var data = Ext .decode(response.responseText); if (data.success) { Ext.MessageBox.alert('成功', '删除成功!'); } else { Ext.MessageBox.alert('失败', '删除失败!'); } }, failure : function() { Ext.MessageBox.alert('失败', '删除超时!'); } }); 2、登录
Ext.onReady(function() { Ext.QuickTips.init(); var adminRadio = new Ext.form.Radio({ boxLabel : '管理员', inputValue : 'admin', listeners : { 'check' : function() { if (adminRadio.getValue()) { userRadio.setValue(false); adminRadio.setValue(true); } } } }); var userRadio = new Ext.form.Radio({ boxLabel : '普通用户', inputValue : 'user', listeners : { 'check' : function() { if (userRadio.getValue()) { adminRadio.setValue(false); userRadio.setValue(true); } } } }); var _form = new Ext.form.FormPanel({ title : '系统登录', frame : true, width : 290, height : 160, layout : 'form', buttonAlign : 'center', labelAlign : 'center', defaults : { width : 160, labelWidth : 80, xtype : 'textfield' }, items : [{ fieldLabel : '用 户 名', vtype : 'alpha', id : 'name', name : 'name' }, { fieldLabel : '通 行 证', inputType : 'password', vtype : 'alpha', id : 'pass', name : 'pass' }, { xtype : 'radiogroup', fieldLabel : '用户类型', id : 'typeRadio', items : [adminRadio, userRadio] }], buttons : [{ text : '登 录', style : 'margin-right:15' }, { text : '清 除', style : 'margin-left:15', handler : function() { var _name = _form.findById('name').setValue(''); var _pass = _form.findById('pass').setValue(''); } }] }); _form.render('container'); }) 3、column布局中的fieldLabel消失的解决方法：在里面加上layout : 'form',
layout : 'form', items : [item_ListType, { layout : 'column', border : false, labelWidth : 60, items : [{ layout : 'form', items : listType }, { layout : 'form', items : item_simpleQuery }] }, { layout : 'column', border : false, items : [{ layout : 'form', items : item_startTime }, { layout : 'form', items : item_endTime }] }] 4、html的dom节点：body
document.body
5、new Ext.Viewport：
不需要render或show，所以也不需要在html中先定义div；
常用于整体布局
6、window的功能点
7、对话框
confirm对话框：
Ext.Msg.confirm('Name', '确定要删除吗？', function(btn) { if (btn == 'yes') { // process text value and close... Ext.Msg.alert('Status', "确实要删除"); //btn.hide(); } else { Ext.Msg.alert('Status', "不用删除"); } }); prompt对话框：
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ if (btn == 'ok'){ // process text value and close... Ext.Msg.alert('Status', text); //btn.hide(); } }); 模态对话框：modal: true
var window = new Ext.Window({ width : 400, height : 300, modal: true }); window.show(); 8、树展开
var vroot = new Ext.tree.TreeNode({ text : 'root node', expanded : tree, // hidden : true }); var sub11 = new Ext.tree.TreeNode({ text : 'sub node11' }); var sub12 = new Ext.tree.TreeNode({ text : 'sub node12' }); var sub1 = new Ext.tree.TreeNode({ text : 'sub node1' }); sub1.appendChild(sub11); sub1.appendChild(sub12); var sub2 = new Ext.tree.TreeNode({ text : 'sub node1' }); var sub31 = new Ext.tree.TreeNode({ text : 'sub node11' }); var sub32 = new Ext.tree.TreeNode({ text : 'sub node12' }); var sub3 = new Ext.tree.TreeNode({ text : 'sub node1' }); sub3.appendChild(sub31); sub3.appendChild(sub32); var sub4 = new Ext.tree.TreeNode({ text : 'sub node1' }); vroot.appendChild(sub1); vroot.appendChild(sub2); vroot.appendChild(sub3); vroot.appendChild(sub4); var tree = new Ext.tree.TreePanel({ title : 'tree panel', root : vroot, width : 400, height : 300, listeners : { afterrender : function(p) { var root = p.getRootNode(); root.expand(); var children = root.childNodes; Ext.each(children, function(child) { if (!child.isLeaf()) { child.expand(); } }); } } }); tree.render(document.body); 8、Array数组操作： Ext.each
- Ext.each(children, function(child) {
- if (!child.isLeaf()) {
- child.expand();
- }
- });
9、tree总结
隐藏根节点：使用TreePanel中的rootVisible : false
展开所有：TreePanel的expandAll();
收起所有：collapseAll()
10、form回显
Ext.Ajax.request({ url : '../../server/getServerById.do', params : { serverId : serverId }, success : function(response, opts) { console.log(response); var data = Ext.decode(response.responseText).data[0]; server.getComponent(0).getForm().setValues(data); }, failure : function(response, opts) { Ext.Msg.alert("info", "获取server失败"); } }); 11、将textfield变灰
//disabled:true， 不可提交
readOnly : true,
style : "background: #C1C1C1;"
12、表单重置与设置
重置：
text : 'reset', handler : function() { fpanel.getForm().reset(); } 设值：
text : 'set value', handler : function() { fpanel.getForm().setValues([ { id : 'name', value : 'zhangsan' }, { id : 'age', value : '15' }, { id : 'description', value : 'my name is zhangsan!' } ]); } 查找值：
text : 'find value', handler : function() { var nameValue = fpanel.getForm().findField('name').getValue(); alert(nameValue); } 13、远程获取数据
servlet：
含中文的先设置字符集：response.setCharacterEncoding("utf-8");
response.getWriter() .write("{success:true,msg:'成功',data : {name : 'lisi', age :'20',description : 'i am lisi!'}}"); 【注意】格式为：{success:true,msg:'成功',data : {name : 'lisi', age :'20'}}，其中：success、data为关键字
前端load数据：
text : 'load value from remote', handler : function() { fpanel.getForm().load({ url : 'LoginServlet', params : { appId : 5 } }) } 14、启动即加载：监听afterrender事件
listeners : { 'afterrender' : function() { fpanel.getForm().load({ url : 'LoginServlet', params : { appId : 5 }, success : function(response, responseText) { Ext.Msg.alert('success', responseText.msg); }, failure : function(response, responseText) { Ext.Msg.alert('fali', responseText.msg); } }) } }15、动态刷新grid内容
在成功之后，再次调用search方法，将grid的内容再次查询一遍。
16、combo显示和传递不同的值的处理
var listKey = new Ext.form.ComboBox({ fieldLabel : '名单类型', //name : 'listKey', width : 130, typeAhead : true, triggerAction : 'all', lazyRender : true, mode : 'local', allowBlank : false, store : new Ext.data.ArrayStore({ fields : ['listKeyDisplay', 'list_Key'], data : [ ['all', ''],['ip', 'ip'], ['cookie', 'cookie'],['__last_loginid__', '__last_loginid__']] }), hiddenName:'listKey', displayField : 'listKeyDisplay', valueField : 'list_Key', listeners:{ afterrender: function(thiz) { thiz.selectText('all'); } } }); 【注意】hiddenName必须有，否则传递display的值； 设置value的值传递无效为display值，所以使用afterrender进行设值
17、提交表单
方法1：通过获取button，在增加的click事件中使用ajax请求，在request可以增加form属性，获取表单的参数进行提交。
方法2：通过获取form这个组件进行submit操作
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/09/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
