ExtJS简单使用

最新推荐文章于 2021-02-15 20:18:33 发布

醉卧山林的执刀人

最新推荐文章于 2021-02-15 20:18:33 发布

阅读量615

点赞数

分类专栏： extjs 文章标签： extjs download

extjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.hello World

2014年 Ext JS 5.0 正式版下载地址
下载(Download)
http://cdn.sencha.io/ext/gpl/ext-5.0.0-gpl.zip

国内百度网盘下载地址:
http://pan.baidu.com/s/1pJ5CoOF

导入js文件
1.首先是build文件夹下的ext-all.js文件（注意是build文件夹下的）
2.需要一个主题，不然很难看，我们引用的是清新主题路径如下：
ext-5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css
路径最好是这样的，如果你单独把js文件拿出来，主题自带的图片是不能用的，以免发生错误
楼主初学，有不足之处请指教，楼主也是参照李林峰的园子来的


<script type="text/javascript">
                    Ext.onReady(function(){
Ext.MessageBox.alert('hello','helloworld');
                                        });
</script>

这样就实现了一个窗口

2.窗体window组件

下面楼主出现了第一个错误
Uncaught TypeError: Cannot read property ‘dom’ of null
代码没有放入

Ext.onReady(function(){});

上代码

Ext.onReady(function(){

                            var win = new Ext.Window({
                            title :'窗口',
                            width:476,
                            height:374,
                            html:'<div>内容</div>',
                            resizable:true,
                            modal:true,
                            closable:true,
                            maximizable:true,
                            minimizable:true
                                            });     
                    win.show();         
            });

说明：
(1)var win = new Ext.Window({}):创建一个新的Window窗体对象。
(2)title: ‘窗口’：窗体的标题。
(3)width: 476,height: 374：宽度及高度。
(4)html: 窗体内部显示的html内容。
(5)resizable: true：是否可以调整窗体的大小，这里设置为 true。
(6)modal: true：是否为模态窗体[什么是模态窗体？当你打开这个窗体以后，如果不能对其他的窗体进行操作，那么这个窗体就是模态窗体，否则为非模态窗体]。
(7)closable:true：是否可以关闭，也可以理解为是否显示关闭按钮。
(8)maximizable: true：是否可以最大化，也可以理解为是否显示最大化按钮。
(9)minimizable: true：是否可以最小化，也可以理解为是否显示最小化按钮。
(10)win.show()：窗体展示。
window 组件常用的：属性、方法及事件

一、属性
plain：布尔类型，true表示强制与背景色保持协调，默认值为false。
resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。
maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。
maximized：布尔类型，true表示显示窗体时将窗体最大化，默认值为false。
closable：布尔类型，true表示显示关闭按钮，默认值为true。
bodyStyle：与边框的间距，如：bodyStyle:”padding:3px”。
buttonAlign：窗体中button的对齐方式(left、center、right)，默认值为right。
closeAction：”close”释放窗体所占内存，”hide”隐藏窗体，建议使用”hide”。

二、方法
show：打开窗体。
hide：隐藏窗体。
close：关闭窗体。

三、事件
show：打开窗体时触法。
hide：隐藏窗体时触法。
close：关闭窗体时触法。

表单：FormPanel

    Ext.onReady(function(){

                    Ext.MessageBox.alert('hello','helloworld');

                    var form = new Ext.form.FormPanel({
                                frame:true,
                                title:'标题',
                                style:'margin:10px',
                                html:'<div style="background-color:red">内容在这里</div>'

                                                    });

                    var win = new Ext.Window({
                            title :'窗口',
                            width:476,
                            height:374,
                            html:"<div>内容</div><button>点击</button>",
                            resizable:true,
                            modal:true,
                            closable:true,
                            maximizable:true,
                            minimizable:true,
                            items:form
                                                                });     
                    win.show();         
            });

说明：
(1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。
(2)title: ‘表单标题’：表单的标题，如果不加的话，不会出现上面的浅色表单标题栏。
(3)style: ‘margin:10px’:表单的样式，加了个外10px的外边距。
(4)html:表单内显示html的内容。
(5)items:form 表单在窗体内部

文本框：TextField

楼主又出现第二个错误
Uncaught SyntaxError: Unexpected token ILLEGAL
语法错误，注意英文状态下的逗号，冒号，每句结尾的逗号

    Ext.onReady(function(){
                        Ext.QuickTips.init();
                        Ext.form.Field.prototype.msgTarget = 'side';

                        var username = new Ext.form.TextField({
                                width:240,
                                allowBlank:false,
                                maxLength:20,
                                name:'username',
                                fieldLabel:'用户名称',
                                blankText:'请输入用户名',
                                maxLengthText:'用户名不能超过20个字符'

                                                                                                                                                                   });

                        var password = new Ext.form.TextField({
                                    width:240,
                                    allowBlank:false,
                                    maxLength:20,
                                    inputType:'password',
                                    name:'password',
                                    fieldLabel:'密码',
                                    blankText:'请输入密码',
                                    maxLengthText:'密码不能超过20个字符'
                });

var form = new Ext.form.FormPanel({
                                frame:true,
                                title:'标题',
                                style:'margin:10px',
                                html:'<div style="background-color:red">内容在这里</div>',
                                items:[username,password]
                                                                                    });

                    var win = new Ext.Window({
                            title :'窗口',
                            width:476,
                            height:374,
                            html:"<div>内容</div><button id='vf'>点击</button>",
                            resizable:true,
                            modal:true,
                            closable:true,
                            maximizable:true,
                            minimizable:true,
                            items:form
                                                                });     
                    win.show();         
            });

说明：
(1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
(2)Ext.form.Field.prototype.msgTarget = ‘side’：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为”qtip”,”title”,”under”,”side”,id(元素id)，
side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
(3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
(4)allowBlank: false：不允许文本框为空。
(5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
(6)name: ‘password’：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。
(7)fieldLabel: ‘用户名’：文本框前面显示的文字标题，如“用户名”，“密码”等。
(8)blankText: ‘请输入用户名’：当非空校验没有通过时的提示信息。
(9) maxLengthText: ‘用户不能超过20个字符’：当最大长度校验没有通过时的提示信息。

一、属性

allowBlank：是否允许为空，默认为true
blankText：空验证失败后显示的提示信息
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
maxLength：字段允许输入的最大长度
maxLengthText：最大长度验证失败后显示的提示信息
minLength：字段允许输入的最小长度
minLengthText：最小长度验证失败后显示的提示信息

按钮：Button

两个问题：
1.点击了最大化，再点回来，按钮就不见了
2.重置按钮的点击事件实现不了，一直悬停

Ext.onReady(function () {
            //初始化标签中的Ext:Qtip属性。
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            //提交按钮处理方法
            var btnsubmitclick = function () {
                Ext.MessageBox.alert('提示', '你点了确定按钮!');
            }
            //重置按钮"点击时"处理方法
            var btnresetclick = function () {
                Ext.MessageBox.alert('提示', '你点了重置按钮!');
            }
            //重置按钮"鼠标悬停"处理方法
            var btnresetmouseover = function () {
                Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!');
            }
            //提交按钮
            var btnsubmit = new Ext.Button({
                text: '提交',
                handler: btnsubmitclick
            });
            //重置按钮
            var btnreset = new Ext.Button({
                text: '重置',
                listeners: {
                    'mouseover': btnresetmouseover,
                    'click': btnresetclick
                }
            });
            //用户名input
            var txtusername = new Ext.form.TextField({
                width: 140,
                allowBlank: false,
                maxLength: 20,
                name: 'username',
                fieldLabel: '用户名称',
                blankText: '请输入用户名',
                maxLengthText: '用户名不能超过20个字符'
            });
            //密码input
            var txtpassword = new Ext.form.TextField({
                width: 140,
                allowBlank: false,
                maxLength: 20,
                inputType: 'password',
                name: 'password',
                fieldLabel: '密码',
                blankText: '请输入密码',
                maxLengthText: '密码不能超过20个字符'
            });
            //表单
            var form = new Ext.form.FormPanel({
                frame: true,
                title: '表单标题',
                style: 'margin:10px',
                html: '<div style="padding:10px">这里表单内容</div>',
                items: [txtusername, txtpassword],
                buttons: [btnsubmit, btnreset]
            });
            //窗体
            var win = new Ext.Window({
                title: '窗口',
                width: 476,
                height: 374,
                html: '<div>这里是窗体内容</div>',
                resizable: true,
                modal: true,
                closable: true,
                maximizable: true,
                minimizable: true,
                buttonAlign: 'center',
                items: form
            });
            win.show();
        });

说明：
(1)var btnsubmit = new Ext.Button():创建一个新的Button按钮对象。
(2)handler: btnsubmitclick：当用户点击的时候[即js中的onclick事件]执行方法btnsubmitclick。
(3)listeners: {‘mouseover’: btnresetmouseover,’click’: btnresetclick}：当用户点击的时候[即js中的onclick事件]执行方法btnresetclick，
鼠标悬停时执行方法btnresetmouseover。
(4)handler与listeners的区别：
handler:执行的是首发事件，click是button这个组件的首发事件。这就是handler的运行方式：被某个组件的首要event所触发。
handler是一个特殊的listener。
listener：是一个事件名 + 处理函数的组合，事件监听，如上例代码所示，我们监听了两个事件”click”，与”mouseover”事件，并且会顺序执行。

登陆窗体Demo：Login

   Ext.onReady(function () {
            //初始化标签中的Ext:Qtip属性。
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            //提交按钮处理方法
            var btnsubmitclick = function () {
                if (form.getForm().isValid()) {
                    //通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。
                    Ext.Msg.alert("提示", "登陆成功!");
                }
            }
            //重置按钮"点击时"处理方法
            var btnresetclick = function () {
                form.getForm().reset();
            }
            //提交按钮
            var btnsubmit = new Ext.Button({
                text: '提 交',
                handler: btnsubmitclick
            });
            //重置按钮
            var btnreset = new Ext.Button({
                text: '重 置',
                handler: btnresetclick
            });
            //用户名input
            var txtusername = new Ext.form.TextField({
                width: 240,
                allowBlank: false,
                maxLength: 20,
                name: 'username',
                fieldLabel: '用户名',
                blankText: '请输入用户名',
                maxLengthText: '用户名不能超过20个字符'
            });
            //密码input
            var txtpassword = new Ext.form.TextField({
                width: 240,
                allowBlank: false,
                maxLength: 20,
                inputType: 'password',
                name: 'password',
                fieldLabel: '密　码',
                blankText: '请输入密码',
                maxLengthText: '密码不能超过20个字符'
            });
            //验证码input
            var txtcheckcode = new Ext.form.TextField({
                fieldLabel: '验证码',
                id: 'checkcode',
                allowBlank: false,
                width: 240,
                blankText: '请输入验证码！',
                maxLength: 4,
                maxLengthText: '验证码不能超过4个字符!'
            });
            //表单
            var form = new Ext.form.FormPanel({
                url: '******',
                labelAlign: 'right',
                labelWidth: 45,
                frame: true,
                cls: 'loginform',
                buttonAlign: 'center',
                bodyStyle: 'padding:6px 0px 0px 15px',
                items: [txtusername, txtpassword, txtcheckcode],
                buttons: [btnsubmit, btnreset]
            });
            //窗体
            var win = new Ext.Window({
                title: '用户登陆',
                iconCls: 'loginicon',
                plain: true,
                width: 276,
                height: 174,
                resizable: false,
                shadow: true,
                modal: true,
                closable: false,
                animCollapse: true,
                items: form
            });
            win.show();
            //创建验证码
            var checkcode = Ext.getDom('checkcode');
            var checkimage = Ext.get(checkcode.parentNode);
            checkimage.createChild({
                tag: 'img',
                src: 'image/checkcode.gif',
                align: 'absbottom',
                style: 'padding-left:23px;cursor:pointer;'
            });
        });

(1)88行，iconCls: ‘loginicon’:给窗体加上小图标，样式在第12行定义。
(2)Ext.getDom(‘checkcode’)：根据ID获取Dom。
(3)Ext.get(checkcode.parentNode)：根据Dom获取父节点。
(4)checkimage.createChild()：创建子节点，标签为。
(5)form.getForm().isValid()：校验表单的验证项是否全部通过。
(6)form.getForm().reset()：重置表单。

数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl

醉卧山林的执刀人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS简单使用

1.hello World2014年 Ext JS 5.0 正式版下载地址下载(Download) http://cdn.sencha.io/ext/gpl/ext-5.0.0-gpl.zip国内百度网盘下载地址: http://pan.baidu.com/s/1pJ5CoOF导入js文件 1.首先是build文件夹下的ext-all.js文件（注意是build文件夹下的） 2.需要一个
复制链接

扫一扫