BlogJava-梦幻之旅-随笔分类-EXThttp://www.blogjava.net/hwpok/category/35397.htmlDEBUGzh-cnWed, 31 Dec 2008 22:49:00 GMTWed, 31 Dec 2008 22:49:00 GMT60Ext form http://www.blogjava.net/hwpok/archive/2008/12/31/249405.html惠万鹏惠万鹏Wed, 31 Dec 2008 14:44:00 GMThttp://www.blogjava.net/hwpok/archive/2008/12/31/249405.htmlhttp://www.blogjava.net/hwpok/comments/249405.htmlhttp://www.blogjava.net/hwpok/archive/2008/12/31/249405.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/249405.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/249405.html阅读全文

惠万鹏 2008-12-31 22:44 发表评论
]]>Ext Toolbar 练习http://www.blogjava.net/hwpok/archive/2008/12/28/248748.html惠万鹏惠万鹏Sun, 28 Dec 2008 08:03:00 GMThttp://www.blogjava.net/hwpok/archive/2008/12/28/248748.htmlhttp://www.blogjava.net/hwpok/comments/248748.htmlhttp://www.blogjava.net/hwpok/archive/2008/12/28/248748.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/248748.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/248748.html阅读全文

惠万鹏 2008-12-28 16:03 发表评论
]]>Ext show,progresshttp://www.blogjava.net/hwpok/archive/2008/12/28/248736.html惠万鹏惠万鹏Sun, 28 Dec 2008 06:21:00 GMThttp://www.blogjava.net/hwpok/archive/2008/12/28/248736.htmlhttp://www.blogjava.net/hwpok/comments/248736.htmlhttp://www.blogjava.net/hwpok/archive/2008/12/28/248736.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/248736.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/248736.htmlExt.BLANK_IMAGE_URL = "/learn/ext/resources/images/default/s.gif";
function alertE() {
    Ext.Msg.confirm("<font size='4'>提示</font>",
            "<font color='red'>ExtJs世界你好,这是我的第一个Ext程序!</font>", callBack);
    function callBack(id) {
        alert("你点击的ID是:" + id);
    }
};
function promptE() {
    Ext.Msg.prompt("<font size='4'>输入</font>",
            "<font color='red'>ExtJs世界你好,这是我的第一个Ext程序!</font>", callBack, this,
            true);
    function callBack(id, msg) {
        alert("你点击的ID是:" + id + ",消息:" + msg);
    }
};
function wateE() {
    Ext.Msg.wait("等待时间长的操作", "提示", {
                text : "进度条上的文字"
            })
}
function showE() {
    Ext.Msg.buttonText.yes = "保存";
    Ext.Msg.buttonText.no = "清除";
    var msgBox = Ext.Msg.show({
                title : "提示",
                msg : "自我介绍一下,我是HuyVanpull哈!!",
                modal : true,
                prompt : true,
                value : "请输入内容..",
                progress : true,
                progressText : "保存进度0%",
                buttons : Ext.Msg.YESNOCANCEL,
                fn : callBack
            })
    function callBack(id, msg) {
        alert("按钮的ID是:" + id + ",内容:" + msg);
    }
    var count = 0;
    Ext.TaskMgr.start({
                run : function() {
                    count++;
                    if (count > 100) {
                        msgBox.hide();
                    }
                    // msgBox.updateText("时间:"+new Date().format('Y-m-d g:i:s
                    // A'));
                    msgBox.updateProgress(count / 100, "还剩" + (100 - count)
                                    + "秒关闭窗口", "当前时间:"
                                    + new Date().format('Y-m-d g:i:s A'));
                },
                interval : 1000
            })
}
function progressBarE1() {
    var ProgressBar = new Ext.ProgressBar({
                text : "working",
                width : 300,
                applyTo : "ProgressBar"
            });
    var count = 0;
    var percentage = 0;
    var progressText = "";
    Ext.TaskMgr.start({
                run : function() {
                    count++;
                    if (count > 100) {
                        ProgressBar.hide();
                    }
                    percentage = count / 100;
                    progressText = percentage * 100 + "%";
                    ProgressBar.updateProgress(percentage, progressText)
                },
                interval : 1000
            })
}
function progressBarE2() {
    var ProgressBar = new Ext.ProgressBar({
                text : "working",
                width : 300,
                applyTo : "ProgressBar"
            });
    ProgressBar.wait({
                duration : 100000,
                interval : 10,
                increment : 1000,
                scope : this,
                fn : function() {
                    alert("更新完毕");
                }
            })
}
Ext.onReady(progressBarE2);

惠万鹏 2008-12-28 14:21 发表评论
]]>Ext Grid 综合http://www.blogjava.net/hwpok/archive/2008/11/12/240178.html惠万鹏惠万鹏Wed, 12 Nov 2008 14:32:00 GMThttp://www.blogjava.net/hwpok/archive/2008/11/12/240178.htmlhttp://www.blogjava.net/hwpok/comments/240178.htmlhttp://www.blogjava.net/hwpok/archive/2008/11/12/240178.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/240178.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/240178.html
function listStudent() {
    function renderSex(value) {
        if (value == 'boy') {
            return "男";
        } else {
            return "女";
        }
    }
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
                header : '编号',
                dataIndex : 'id',
                width : 80,
                sortable : true
            }, {
                header : '名称',
                dataIndex : 'name',
                width : 80
            }, {
                header : '性别',
                dataIndex : 'sex',
                renderer : renderSex
            }, {
                header : '日期',
                dataIndex : 'date',
                width : 100,
                renderer : Ext.util.Format.dateRenderer('Y-m-d')
            }, {
                header : '描述',
                dataIndex : 'descn',
                width : 200
            }]);
    var ds = new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
                            url : '/ext/list.jspa'
                        }),
                reader : new Ext.data.JsonReader({
                            totalProperty : 'total',
                            root : 'persons'
                        }, [{
                                    name : 'id'
                                }, {
                                    name : 'name'
                                }, {
                                    name : 'sex'
                                }, {
                                    name : 'date',
                                    type : 'date',
                                    dateFormat : 'Y-m-dTH:i:s'
                                }, {
                                    name : 'descn'
                                }])
            });
    ds.load({
                params : {
                    start : 0,
                    limit : 18
                }
            });
            
    ds.on('beforeload',function(){
      Ext.apply(
      this.baseParams,
      {
           title:Ext.get('title').dom.value
      });
    });

    var grid = new Ext.grid.GridPanel({
                el : 'grid',
                ds : ds,
                cm : cm,
                sm : sm,
                border : false,
                autoExpandColumn : 5,
                tbar : ['关键字查询：', {
                            xtype : 'textfield',
                            width : 200,
                            id : 'title',
                            name : 'title'
                        }, {
                            text : '搜索',
                            iconCls : 'search',
                            handler : function() {
                                ds.load({
                                            params : {
                                                start : 0,
                                                limit : 18,
                                                title : Ext.get('title').dom.value
                                            }
                                        })
                            }
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '发布',
                            iconCls : 'edit'
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '查看',
                            iconCls : 'copy'
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '刷新',
                            iconCls : 'refresh'
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '回复',
                            iconCls : 'post'
                        }, {
                            xtype : 'tbseparator'
                        }, {
                            text : '删除',
                            iconCls : 'del'
                        }],
                bbar : new Ext.PagingToolbar({
                            pageSize : 18,
                            store : ds,
                            displayInfo : true,
                            displayMsg : '第{0} 到 {1} 条数据 共{2}条',
                            emptyMsg : '没有数据'
                        })
            });
    grid.render();
}
Ext.onReady(listStudent);






惠万鹏 2008-11-12 22:32 发表评论
]]>Ext 提交一个Form到Servlethttp://www.blogjava.net/hwpok/archive/2008/11/09/239484.html惠万鹏惠万鹏Sat, 08 Nov 2008 17:38:00 GMThttp://www.blogjava.net/hwpok/archive/2008/11/09/239484.htmlhttp://www.blogjava.net/hwpok/comments/239484.htmlhttp://www.blogjava.net/hwpok/archive/2008/11/09/239484.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/239484.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/239484.htmlfunction myForm_1() {
    Ext.QuickTips.init();
    Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8'
    var form = new Ext.FormPanel({
        frame : true,
        width : 300,
        monitorValid : true,// 绑定验证
        layout : "form",
        labelWidth : 70,
        title : "添加个人信息",
        labelAlign : "left",
        renderTo : Ext.getBody(),
        submit : function() {
            this.getEl().dom.action = '/ext/servlet/Login.do', this.getEl().dom.method = 'POST', this
                    .getEl().dom.submit();
        },
        items : [{
                    xtype : "textfield",
                    fieldLabel : "用户名",
                    id : "userName",
                    allowBlank : false,
                    blankText : "不能为空，请正确填写",
                    name : "userName",
                    anchor : "90%"
                }, {
                    xtype : "textfield",
                    fieldLabel : "昵称",
                    id : "smallName",
                    name : "smallName",
                    anchor : "90%"
                }, {
                    xtype : "datefield",
                    fieldLabel : "注册日期",
                    id : "regDate",
                    name : "regDate",
                    anchor : "90%"
                }],
        buttons : [{
                    text : "确定",
                    handler : function() {
                        form.form.submit();
                    },
                    formBind : true
                }, {
                    text : "取消",
                    handler : function() {
                        form.form.reset();
                    }
                }]
    });
}
Ext.onReady(myForm_1);

惠万鹏 2008-11-09 01:38 发表评论
]]>Ext FormPanel 独孤九剑-第九式 http://www.blogjava.net/hwpok/archive/2008/11/09/239479.html惠万鹏惠万鹏Sat, 08 Nov 2008 16:26:00 GMThttp://www.blogjava.net/hwpok/archive/2008/11/09/239479.htmlhttp://www.blogjava.net/hwpok/comments/239479.htmlhttp://www.blogjava.net/hwpok/archive/2008/11/09/239479.html#Feedback3http://www.blogjava.net/hwpok/comments/commentRss/239479.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/239479.html阅读全文

惠万鹏 2008-11-09 00:26 发表评论
]]>关于Spket插件的安装 心得http://www.blogjava.net/hwpok/archive/2008/11/06/239124.html惠万鹏惠万鹏Thu, 06 Nov 2008 14:30:00 GMThttp://www.blogjava.net/hwpok/archive/2008/11/06/239124.htmlhttp://www.blogjava.net/hwpok/comments/239124.htmlhttp://www.blogjava.net/hwpok/archive/2008/11/06/239124.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/239124.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/239124.html
1、选择Help -> Software Updates -> Find and Install...-> Search for new features to install ->New remote site...
Name: "Spket", Url: "http://www.spket.com/update/"下载完毕重启 Eclipse

2、Window -> Preferences -> Spket -> JavaScript Profiles -> New ；
输入“ExtJS”点击OK；
选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”；
选择 “ExtJS”并点击“Add File”，然后在你的./ext-2.x/source目录中选取“ext.jsb” 文件；

3、设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮(千万别忘了这步)；

4、 JS打开方式为 Window -> Preferences ->General-> Editors-> File...选择JS 为 Spket JavaScript Editor(default)*********(千万别忘了这步)

5、新建个js试一试吧！ 嘿嘿

惠万鹏 2008-11-06 22:30 发表评论
]]>Ext Grid 独孤九剑-第八式http://www.blogjava.net/hwpok/archive/2008/11/03/238248.html惠万鹏惠万鹏Sun, 02 Nov 2008 16:14:00 GMThttp://www.blogjava.net/hwpok/archive/2008/11/03/238248.htmlhttp://www.blogjava.net/hwpok/comments/238248.htmlhttp://www.blogjava.net/hwpok/archive/2008/11/03/238248.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/238248.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/238248.htmlvar index = 1;
/** write by Huy Vanpull */
function mylayout_1() {
    /** 初始化提示信息 */
    Ext.QuickTips.init();
    /** 设置中间内容的tabPanel */
    var cPanel = new Ext.TabPanel({
                title : '主面板',
                region : 'center',
                contentEl : 'center-div',
                split : true,
                activeTab : 0,
                border : true,
                frame : true,
                collapsible : true,
                enableTabScroll : true,
                items : [{
                            title : "tab advantage",
                            autoLoad : {
                                url : "/ext/page/base/index.jsp",
                                scripts : true
                            }
                        }]
            });
    /** 这里不能只设置一个变量 */
    var tree_1 = myTree_1(cPanel);
    var tree_2 = myTree_1(cPanel);
    var tree_3 = myTree_1(cPanel);

    var viewport = new Ext.Viewport({
                layout : 'border',
                items : [{
                            title : 'LOG',
                            region : 'north',
                            contentEl : 'north-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            height : 50,
                            minSize : 50,
                            maxSize : 120
                        }, {
                            title : '状态栏',
                            region : 'south',
                            contentEl : 'south-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            height : 50,
                            minSize : 50,
                            maxSize : 120
                        }, {
                            title : '帮助',
                            region : 'east',
                            contentEl : 'east-div',
                            split : true,
                            border : true,
                            collapsed : true,// 东面帮助菜单默认折叠
                            collapsible : true,
                            width : 120,
                            minSize : 120,
                            maxSize : 200
                        }, {
                            title : '菜单栏',
                            region : 'west',
                            contentEl : 'west-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            width : 170,
                            minSize : 150,
                            maxSize : 200,
                            layout : "accordion",// 右边菜单的布局方式
                            items : [tree_1, tree_2, tree_3]
                        }, cPanel]
            });
}
Ext.onReady(mylayout_1);

function myTree_1(cPanel) {
    var root = new Ext.tree.TreeNode({
                text : '主菜单'
            });
    /** 学籍管理及其子菜单 */
    var root_1 = new Ext.tree.TreeNode({
                text : '学籍管理',
                icon : '/ext/img/girl.gif'
            });
    var root_1_1 = new Ext.tree.TreeNode({
                text : '添加学生',
                qtip : '添加学生',
                listeners : {
                    "click" : function(node, e) {
                        cPanel.add({
                                    title : "newtab",
                                    id : "newtab" + index,
                                    closable : true,
                                    autoLoad : {
                                        url : "/ext/page/base/index.jsp",
                                        scripts : true
                                    }
                                });
                        cPanel.setActiveTab("newtab" + index);
                        index++;
                    }
                }

            });
    var root_1_2 = new Ext.tree.TreeNode({
                text : '删除学生',
                qtip : '删除学生'
            });
    var root_1_3 = new Ext.tree.TreeNode({
                text : '浏览学生',
                qtip : '浏览学生'
            });
    root_1.appendChild(root_1_1);
    root_1.appendChild(root_1_2);
    root_1.appendChild(root_1_3);
    /** 考勤管理及其子菜单 */
    var root_2 = new Ext.tree.TreeNode({
                text : '考勤管理',
                qtip : '考勤管理',
                icon : '/ext/img/boy.gif'
            });
    var root_2_1 = new Ext.tree.TreeNode({
                text : '添加考勤'
            });
    var root_2_2 = new Ext.tree.TreeNode({
                text : '删除考勤'
            });
    var root_2_3 = new Ext.tree.TreeNode({
                text : '浏览考勤'
            });
    root_2.appendChild(root_2_1);
    root_2.appendChild(root_2_2);
    root_2.appendChild(root_2_3);

    /** 添加到主菜单 */
    root.appendChild(root_1);
    root.appendChild(root_2);

    /** 创建树面板 */
    var tree = new Ext.tree.TreePanel({
                title : '系统设置',
                border : false,// 是否有边框
                rootVisible : false,// 是否显示跟结点
                useArrows : true,
                qtip : "提示"
            });
    /** 把上面的数据设置到树面板中去 */
    tree.setRootNode(root);
    return tree;
}

惠万鹏 2008-11-03 00:14 发表评论
]]>Ext Grid 独孤九剑-第七式 http://www.blogjava.net/hwpok/archive/2008/10/31/237919.html惠万鹏惠万鹏Fri, 31 Oct 2008 15:31:00 GMThttp://www.blogjava.net/hwpok/archive/2008/10/31/237919.htmlhttp://www.blogjava.net/hwpok/comments/237919.htmlhttp://www.blogjava.net/hwpok/archive/2008/10/31/237919.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/237919.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/237919.html/** write by Huy Vanpull */
function mylayout_1() {
    /** 初始化提示信息 */
    Ext.QuickTips.init();
    /** 这里不能只设置一个变量 */
    var tree_1 = myTree_1();
    var tree_2 = myTree_1();
    var tree_3 = myTree_1();
    var viewport = new Ext.Viewport({
                layout : 'border',
                items : [{
                            title : 'LOG',
                            region : 'north',
                            contentEl : 'north-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            height : 50,
                            minSize : 50,
                            maxSize : 120
                        }, {
                            title : '状态栏',
                            region : 'south',
                            contentEl : 'south-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            height : 50,
                            minSize : 50,
                            maxSize : 120
                        }, {
                            title : '帮助',
                            region : 'east',
                            contentEl : 'east-div',
                            split : true,
                            border : true,
                            collapsed : true,//东面帮助菜单默认折叠
                            collapsible : true,
                            width : 120,
                            minSize : 120,
                            maxSize : 200
                        }, {
                            title : '菜单栏',
                            region : 'west',
                            contentEl : 'west-div',
                            split : true,
                            border : true,
                            collapsible : true,
                            width : 170,
                            minSize : 150,
                            maxSize : 200,
                            layout : "accordion",//右边菜单的布局方式
                            items : [tree_1,tree_2,tree_3]
                        }, {
                            title : '主面板',
                            region : 'center',
                            contentEl : 'center-div',
                            split : true,
                            border : true,
                            collapsible : true
                        }]
            });
}
Ext.onReady(mylayout_1);

function myTree_1() {
    var root = new Ext.tree.TreeNode({text:'主菜单'});
    /** 学籍管理及其子菜单 */
    var root_1 = new Ext.tree.TreeNode({text:'学籍管理'});
    var root_1_1 = new Ext.tree.TreeNode({text:'添加学生'});
    var root_1_2 = new Ext.tree.TreeNode({text:'删除学生'});
    var root_1_3 = new Ext.tree.TreeNode({text:'浏览学生'});
    root_1.appendChild(root_1_1);
    root_1.appendChild(root_1_2);
    root_1.appendChild(root_1_3);
    /** 考勤管理及其子菜单 */
    var root_2 = new Ext.tree.TreeNode({text:'考勤管理'});
    var root_2_1 = new Ext.tree.TreeNode({text:'添加考勤'});
    var root_2_2 = new Ext.tree.TreeNode({text:'删除考勤'});
    var root_2_3 = new Ext.tree.TreeNode({text:'浏览考勤'});
    root_2.appendChild(root_2_1);
    root_2.appendChild(root_2_2);
    root_2.appendChild(root_2_3);
    
    /** 添加到主菜单 */
    root.appendChild(root_1);
    root.appendChild(root_2);

    /** 创建树面板 */
    var tree = new Ext.tree.TreePanel({
                title : '系统设置',
                border : false,//是否有边框
                rootVisible:false,//是否显示跟结点
                useArrows:true,
                qtip:"提示"
            });
    /** 把上面的数据设置到树面板中去 */
    tree.setRootNode(root);
    return tree;
}

惠万鹏 2008-10-31 23:31 发表评论
]]>Ext Grid 独孤九剑-第六式http://www.blogjava.net/hwpok/archive/2008/10/26/236770.html惠万鹏惠万鹏Sun, 26 Oct 2008 14:31:00 GMThttp://www.blogjava.net/hwpok/archive/2008/10/26/236770.htmlhttp://www.blogjava.net/hwpok/comments/236770.htmlhttp://www.blogjava.net/hwpok/archive/2008/10/26/236770.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/236770.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/236770.html<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script> 
        function a()
        {
            function renderSex(value) {
                if (value == 'boy') {
                    return "<span style='color:red;font-weight:bold;'>男</span>";
                } else {
                    return "<span style='color:green;font-weight:bold;'>女</span>";
                }
            }
            var sm = new Ext.grid.CheckboxSelectionModel();
            var cm = new Ext.grid.ColumnModel(
                [
                    new Ext.grid.RowNumberer(),
                    sm,
                    {header:'编号',dataIndex:'id',width:80,sortable:true},
                    {header:'名称',dataIndex:'name',width:80},
                    {header:'性别',dataIndex:'sex',renderer:renderSex},
                    {header:'日期',dataIndex:'date',width:100,renderer: Ext.util.Format.dateRenderer('Y年m月d日')},
                    {header:'描述',dataIndex:'descn',width:200}
                ]);
            alert(cm);
            var data = [
                ['1','name1','girl','1970-01-15T02:58:04','descn1'],
                ['2','name2','boy','1970-01-15T02:58:04','descn2'],
                ['3','name3','girl','1970-01-15T02:58:04','descn3'],
                ['4','name4','girl','1970-01-15T02:58:04','descn4'],
                ['5','name5','boy','1970-01-15T02:58:04','descn5']
            ];
            alert(data);
            var ds = new Ext.data.Store({
                proxy: new Ext.data.MemoryProxy(data),
                reader: new Ext.data.ArrayReader({}, [
                    {name: 'id'},
                    {name: 'name'},
                    {name: 'sex'},
                    {name: 'date', type:'date',dateFormat:'Y-m-dTH:i:s'},
                    {name: 'descn'}
                ])
            });
            ds.load();
    
            var grid = new Ext.grid.GridPanel({
                el: 'grid',
                ds: ds,
                cm: cm,
                sm: sm,
                autoExpandColumn: 6,
                bbar: new Ext.PagingToolbar({
                    pageSize: 10,
                    store: ds,
                    displayInfo: true,
                    displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                    emptyMsg: "没有记录"
                })
            });
            grid.render();
        }
        Ext.onReady(a); 
        </script>
    </head>
    <body>
        <div id="grid"></div>
    </body>
</html>

惠万鹏 2008-10-26 22:31 发表评论
]]>ext 布局 独孤九剑-第五式 http://www.blogjava.net/hwpok/archive/2008/10/26/236769.html惠万鹏惠万鹏Sun, 26 Oct 2008 14:28:00 GMThttp://www.blogjava.net/hwpok/archive/2008/10/26/236769.htmlhttp://www.blogjava.net/hwpok/comments/236769.htmlhttp://www.blogjava.net/hwpok/archive/2008/10/26/236769.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/236769.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/236769.html<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>extDemo</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script type="text/javascript">
         Ext.onReady(function(){
            //创建一个工具条
            var tb=new Ext.Toolbar('toolbar-div');
            tb.add(new Ext.Toolbar.SplitButton({
                  text: '文件',
                  cls: 'x-btn-text-icon blist',
                menu : {items: [
                 {text: '新建', handler: onItemClick},
                 {text: '保存', handler: onItemClick},
                 {text: '加载', handler: onItemClick}
           ]}}),
           new Ext.Toolbar.MenuButton({
               text: '编辑',
               cls: 'x-btn-text-icon blist',
               menu : {items: [
                 {text: '复制', handler: onItemClick},
                 {text: '粘贴', handler: onItemClick}
           ]}})
         );
        
        //创建树型菜单
        var root = new Ext.tree.TreeNode({
            text: '文件夹',
            allowDrag:false,
            allowDrop:false
        });
        root.appendChild(
            new Ext.tree.TreeNode({text:'收件箱',allowDrag:false}),
            new Ext.tree.TreeNode({text:'发件箱',allowDrag:false}),
            new Ext.tree.TreeNode({text:'联系人',allowDrag:false}),
            new Ext.tree.TreeNode({text:'已删除的邮件',allowDrag:false})
        );
        //创建表格的数据
        var myData = [['张三','测试','2006-1-1'],
                     ['李四','测试一','2006-5-6'],
                     ['王五','测试二','2007-12-1'],
                     ['刘六','测试三','2006-12-1'],
                     ['张三','测试四','2007-6-1'],
                     ['李四','测试五','2007-7-1'],
                     ['刘六','测试六','2007-8-1'],
                     ['张三','测试七','2007-9-1'],
                     ['李四','测试八','2007-10-1'],
                     ['王五','测试九','2007-11-1'],
                     ['刘六','测试六','2007-8-1']];
        
        //生成表格
        var ds = new Ext.data.Store({
            proxy: new Ext.data.MemoryProxy(myData),
            reader: new Ext.data.ArrayReader({},
                [{name:'sender'},
                   {name:'title'},
                   {name:'sendtime'}])
        });
        ds.load();
        var colModel = new Ext.grid.ColumnModel(
            [{header:'发送人',width:100,sortable:true,dataIndex:'sender'},
             {id:'title',header:'标题', width:100,sortable:true,dataIndex:'title'},
             {header:'发送时间',width:75,sortable:true,dataIndex:'sendtime'}
            ]);
            
        //把以上的元素布局
        var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                new Ext.BoxComponent({
                     region:'north',
                     el:'north-div',
                    tbar:tb,
                    height:26
             }),
                //树型列表
                new Ext.tree.TreePanel({
                    region:'west',
                    contentEl:'west-div',
                    title:'树列表',
                    split:true,
                    width: 200,
                    minSize: 175,
                    maxSize: 400,
                    collapsible: true,
                    margins:'0 0 0 0',
                    root:root
             }),
             {
             region:'center',
             layout:'border',
             items:[
                    //条目列表
                    new Ext.grid.GridPanel({
                           region:'center',
                           el:'center-center',
                           title:'条目列表',
                           ds: ds,
                           cm: colModel,
                           autoScroll: true
                    })
                    //内容
                    /**
                    {
                        region:'south',
                        contentEl:'center-south',
                        title:'内容',
                        split:true,
                        collapsible:true,
                        titlebar:true,
                        height:200,
                        minSize: 100,
                        maxSize:400,
                        collapsedTitle:'内容'
                     }*/
                 ]
            },
            new Ext.BoxComponent({
                 region:'south',
                 el:'south-div',
                 height:24
            })]
        });
        root.expand()
            function onItemClick(item){
                 alert(item.text);
        }
     });
    </script>
    </head>
    <body>
        <div id="north-div">
            <div id='toolbar-div'></div>
        </div>
        <div id="west-div"></div>
        <div id='center-center'></div>
        <div id='center-south'></div>
        <div id="south-div"></div>
    </body>
</html>

惠万鹏 2008-10-26 22:28 发表评论
]]>Ext.form.FormPanel 独孤九剑-第四式 http://www.blogjava.net/hwpok/archive/2008/10/22/236057.html惠万鹏惠万鹏Wed, 22 Oct 2008 15:18:00 GMThttp://www.blogjava.net/hwpok/archive/2008/10/22/236057.htmlhttp://www.blogjava.net/hwpok/comments/236057.htmlhttp://www.blogjava.net/hwpok/archive/2008/10/22/236057.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/236057.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/236057.html<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script> 
            Ext.onReady(function(){
              Ext.QuickTips.init();
              var form=new Ext.FormPanel({
                 frame:true,
                 width:300,
                 //monitorValid:true,//绑定验证
                 layout:"form",
                 labelWidth:70,
                 title:"添加个人信息",
                 labelAlign:"left",
                 renderTo:Ext.getBody(),
                 submit: function(){
                                this.getEl().dom.action = '/servlet/Login.do',
                                this.getEl().dom.method='POST',
                                this.getEl().dom.submit();
                          },
                 items:[{
                           xtype:"textfield",
                           fieldLabel:"用户名",
                           //id:"UserName",
                           allowBlank:false,
                           blankText:"不能为空，请正确填写",
                           name:"UserName",
                           anchor:"90%"
                       },{
                           xtype:"textfield",
                           fieldLabel:"昵称",
                           //id:"SmallName",
                           name:"SmallName",
                           anchor:"90%"
                       },{
                           xtype:"datefield",
                           fieldLabel:"注册日期",
                           //id:"RegDate",
                           name:"RegDate",
                           anchor:"90%"
                       }],
                buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]
                });
                  function login(){
                     form.form.submit();
                     }
                function reset(){
                    form.form.reset();
                   }
                });
        </script>
    </head>
    <body>
    </body>
</html>
 servlet:
public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        String userName = request.getParameter("UserName");
        String smallName = request.getParameter("SmallName");
        String regDate = request.getParameter("RegDate");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.print(userName + "--------->");
        out.print(smallName + "--------->");
        out.print(regDate + "--------->");
        out.flush();
        out.close();
    }



惠万鹏 2008-10-22 23:18 发表评论
]]>Ext.form.FormPanel 独孤九剑-第三式http://www.blogjava.net/hwpok/archive/2008/10/22/236006.html惠万鹏惠万鹏Wed, 22 Oct 2008 11:44:00 GMThttp://www.blogjava.net/hwpok/archive/2008/10/22/236006.htmlhttp://www.blogjava.net/hwpok/comments/236006.htmlhttp://www.blogjava.net/hwpok/archive/2008/10/22/236006.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/236006.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/236006.html<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script type="text/javascript">
            function myPanel()
            {
                itemsA = [
                         {
                            fieldLabel:"UserName",//文本框标题
                            name:"user",
                            id:"user",
                         },
                          {
                            fieldLabel:"PassWord",
                            inputType:"password",
                            name:"pass",
                            id:"pass",
                          }
                        ];
                itemsB = [
                          {
                            xtype:'fieldset',
                            title: '个人信息',
                            collapsible: true,
                            autoHeight:true,
                            width:330,
                            defaults: {width: 150},
                            defaultType: 'textfield',
                            items :[{
                                    fieldLabel: '爱好',
                                    name: 'hobby',
                                    value: 'www.cnblogs.com'
                                },{
                                    xtype:"combo",
                                    name: 'sex',
                                    store:["男","女","保密"],//数据源为一数组
                                    fieldLabel:"性别",
                                    emptyText:'请选择性别.'
                                }]
                            }
                           ];
                var form1 = new Ext.form.FormPanel(
                            {
                                   width:350,
                                   frame:true,//圆角和浅蓝色背景
                                   renderTo:"form1",//呈现
                                   title:"FormPanel",
                                   bodyStyle:"padding:5px 5px 0",
                                   defaults:{width:200,xtype:"textfield"},
                                   items:itemsB,
                                   buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}]
                                });
             }
             Ext.onReady(myPanel); 
        </script>
    </head>
    <body>
        <div id="form1"></div>
    </body>
</html>

惠万鹏 2008-10-22 19:44 发表评论
]]>Ext.Window 独孤九剑-第二式http://www.blogjava.net/hwpok/archive/2008/10/22/235846.html惠万鹏惠万鹏Wed, 22 Oct 2008 01:12:00 GMThttp://www.blogjava.net/hwpok/archive/2008/10/22/235846.htmlhttp://www.blogjava.net/hwpok/comments/235846.htmlhttp://www.blogjava.net/hwpok/archive/2008/10/22/235846.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/235846.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/235846.html<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ext.Window</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script type="text/javascript">
             function myWindow()
             {
                 var tabPanel=new Ext.TabPanel(
                         {
                             width:300,
                             height:200,
                             items:[
                                    {
                                        contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
                                        title:"HuyVanpull's Panel",
                                         activeTab:1, //当前激活标签
                                         height:30,
                                         closable:true
                                    },
                                    {
                                        contentEl:"tabTwo",//标签页的页面元素id(加入你想显示的话)
                                        title:"Hui Wanpeng's Panel",
                                         height:30,
                                         closable:true
                                    }

                                  ]
                         });
                //window组件，它继承自pane.
                var win=new Ext.Window(
                        {
                               contentEl:"container",
                               width:300,
                               height:200,
                               items:tabPanel,
                               plain:true,//true则主体背景透明，false则主体有小差别的背景色，默认为false
                               title:"My Window",
                               buttons:[{text:"OK"},{text:"CANCEL",handler:function(){win.close();}}],
                               buttonAlign:"center",
                               collapsible:true
                        });
                win.show();
             }
             Ext.onReady(myWindow); 
        </script>
    </head>
    <body>
        <div id="container"></div>
        <div id="tabOne" class="x-hide-display">
            i am Huyvanpull!
        </div>
        <div id="tabTwo" class="x-hide-display">
            i am Hui Wanpeng!
        </div>
    </body>
</html>

惠万鹏 2008-10-22 09:12 发表评论
]]>Ext.tabPanel 独孤九剑-第一式http://www.blogjava.net/hwpok/archive/2008/10/22/235829.html惠万鹏惠万鹏Tue, 21 Oct 2008 16:27:00 GMThttp://www.blogjava.net/hwpok/archive/2008/10/22/235829.htmlhttp://www.blogjava.net/hwpok/comments/235829.htmlhttp://www.blogjava.net/hwpok/archive/2008/10/22/235829.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/235829.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/235829.html<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script type="text/javascript">
            function myPanel()
            {
                var panel = new Ext.Panel(
                            {
                                id: 'myPanel_1',        //通过id可以找到这个组件
                                 title: 'My Panel',      //标题
                                 collapsible: true,      //右上角上的那个收缩按钮，设为false则不显示
                                 renderTo: 'hello',      //这个panel显示在html中id为container的层中
                                 draggable:true,         //是否可以拖动
                                 titleCollapse: true,    //是否点击标题栏的任何地方都能收缩
                                 autoScroll:true,        //设为true则内容溢出的时候产生滚动条，默认为false
                                 width:400,
                                 height:200,
                                 html: "<p>我是内容，我包含的html可以被执行！</p>"//panel主体中的内容，可以执行html代码
                             });
             }
             //实现的延迟加载
             function myTabPanel_A()
             {
                 var panel=new Ext.TabPanel(
                         {width:300,height:200,items:[
                                                         {
                                                             contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
                                                             title:"HuyVanpull's Panel",
                                                              activeTab:1, //当前激活标签
                                                              height:30,
                                                              closable:true
                                                         },
                                                         {
                                                             contentEl:"tabTwo",//标签页的页面元素id(加入你想显示的话)
                                                             title:"Hui Wanpeng's Panel",
                                                              height:30,
                                                              closable:true
                                                         }
                                                     ]});
                 panel.render("container");
             }
             function myTabPanel_B()
             {
                 var panel=new Ext.TabPanel(
                         {width:300,height:200,items:[
                                                         {
                                                             contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
                                                             title:"HuyVanpull's Panel",
                                                              activeTab:1, //当前激活标签
                                                              height:30,
                                                              closable:true
                                                         },
                                                         {
                                                             contentEl:"tabTwo",//标签页的页面元素id(加入你想显示的话)
                                                             title:"Hui Wanpeng's Panel",
                                                              height:30,
                                                              closable:true
                                                         }
                                                     ]});
                 panel.render("container");
             }
             Ext.onReady(myTabPanel_A); 
        </script>
    </head>
    <body>
        <div id="container"></div>
        <div id="tabOne" class="x-hide-display">
            i am Huyvanpull!
        </div>
        <div id="tabTwo" class="x-hide-display">
            i am Hui Wanpeng!
        </div>
    </body>
</html>

惠万鹏 2008-10-22 00:27 发表评论
]]>Ext.MessageBoxhttp://www.blogjava.net/hwpok/archive/2008/10/21/235821.html惠万鹏惠万鹏Tue, 21 Oct 2008 15:42:00 GMThttp://www.blogjava.net/hwpok/archive/2008/10/21/235821.htmlhttp://www.blogjava.net/hwpok/comments/235821.htmlhttp://www.blogjava.net/hwpok/archive/2008/10/21/235821.html#Feedback0http://www.blogjava.net/hwpok/comments/commentRss/235821.htmlhttp://www.blogjava.net/hwpok/services/trackbacks/235821.html<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script type="text/javascript">
            function myAlert()
            {
                //alert(title, msg ,function(){})
                //其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后触发。
                 Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出！")});
            }
            function myConfirm()
            {
                //clickValue是点击后返回的值
                Ext.MessageBox.confirm("title","msg",function(clickValue){alert(clickValue);});
            }
            function myPrompt()
            {
                //true为多行，this表示作用域
                Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true);
            }
            function myShow()
            {
                Ext.MessageBox.show({
                    title:"标题",
                    msg:"内容的消息",
                    buttons:{"ok":"我不再显示OK了"},
                    fn:function(e){alert(e);},
                    animEl:"test1",
                     width:500,
                    icon:Ext.MessageBox.INFO,
                    closable:false,
                    progress:true,
                    wait:true,
                    progressText:"进度条"
                       //prompt:true
                       //multiline:true
                });
            }
            Ext.onReady(myShow);
            
         </script>
    </head>
    <body style="font:10px;color:red;">
        <div id="test1">Ext.MessageBox.show</div>
        <div>
        1.animEl:对话框弹出和关闭时的动画效果，比如设置为“id1”，则从id1处弹出并产生动画，收缩则相反<br/>
        2.buttons:弹出框按钮的设置，主要有以下几种：Ext.Msg.OK,Ext.Msg.OKCANCEL,Ext.Msg.CANCEL,Ext.Msg.YESNO,Ext.Msg.YESNOCANCEL,你也可以自定义按钮上面的字：{"ok","我本来是ok的"}。若设为false，则不显示任何按钮.<br/>
        3.closable:如果为false，则不显示右上角的小叉叉，默认为true。<br/>
        4.msg:"消息的内容"<br/>
        5.title:"标题"<br/>
        6.fn:关闭弹出框后执行的函数<br/>
        7.icon：弹出框内容前面的图标，取值为Ext.MessageBox.INFO，Ext.MessageBox.ERROR,Ext.MessageBox.WARNING,Ext.MessageBox.QUESTION<br/>
        8.width:弹出框的宽度，不带单位<br/>
        9.prompt：设为true，则弹出框带有输入框<br/>
        10.multiline：设为true，则弹出框带有多行输入框<br/>
        11.progress:设为true，显示进度条，（但是是死的）<br/>
        12.progressText:显示在进度条上的字<br/>
        13.wait：设为true，动态显示progress<br/>
        14.waitConfig:配置参数，以控制显示progress<br/>
        </div>
    </body>
</html>

惠万鹏 2008-10-21 23:42 发表评论
]]>