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的功能点

模态窗口：modal : Boolean

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

1. Ext.each(children, function(child) { 
2.                 if (!child.isLeaf()) { 
3.                     child.expand(); 
4.                 } 
5.             }); 

 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操作