extjs4基础

最新推荐文章于 2019-04-16 10:16:33 发布

zengshaotao

最新推荐文章于 2019-04-16 10:16:33 发布

阅读量139

点赞数

分类专栏： extjs 文章标签： javascript json ViewUI

本文链接：https://blog.csdn.net/zengshaotao/article/details/84661435

版权

extjs 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

开始学习ExtJs4，陆续记录学习过程，希望有所用处：
特别注意：在这里有些写法还是沿用之前版本，效果依然能够出来，当时最好进行改动，例如new可以改为Ext.create

一、基础知识
1、JAON对象的例子

     Javascript代码   
     
   
<script type="text/javascript">  
        var person  =  { //json对象定义开始  
            name:'tom',  //字符串  
            age:24,     //数字  
            sex:'man',  
            married:false,//布尔值  
            books:[     //数组，在数组中又嵌入了两个json对象  
                {name:'历史',price:30},  
                {name:'文学',price:25}  
            ]  
        }//json对象定义结束  
        //通过点号表示法来取得JSON对象的内部属性  
        alert(person.name + ' ' + person.age + ' ' + person.sex);  
        //通过中括号表示法来取得JSON对象的内部属性  
        //alert(person["name"] + ' ' + person["age"] + ' ' + person["sex"]);  
    </script>  

2、逗号分隔参数列表配置组件的例子

     Javascript代码   
     
Ext.Msg.alert('提示','逗号分隔参数列表');//这种配置方式非常常见

3、JSON对象配置组件的例子

     Javascript代码   
     
   
Ext.onReady(function(){  
        var config = {//定义配置对象  
            title:'case01',  
            msg: '我的配置很简单，不信来看看我的源代码吧！'  
        }  
        Ext.Msg.show(config);//将配置对象传入方法中  
      });  

4、支持HTML格式化的Extjs信息提示框的例子

     Javascript代码   
     
   
Ext.onReady(function(){  
        Ext.Msg.alert('提示','<font color=red>支持HTML格式文本</font>');  
    });  

5、Ext.MessageBox的各种不同用法相关

     Javascript代码   
     
   
Ext.onReady(function(){  
        //Ext.MessageBox.alert('提示','请单击我，确定',callBack);  
                Ext.MessageBox.show({  
           title: '提示',  
                     msg: '请单击我，确定',  
                     buttons: Ext.MessageBox.OKCANCEL,  
                     fn: callBack  
        });  
        function callBack(id){  
            alert('单击的按钮ID是：'+id);  
        }  

     Javascript代码   
     
   
Ext.onReady(function(){  
        Ext.MessageBox.confirm('提示','请单击我，做出选择',callBack);  
        function callBack(id){  
            alert('单击的按钮ID是：'+id);  
        }  
    });  

     Javascript代码   
     
   
Ext.onReady(function(){  
        Ext.MessageBox.prompt('提示','输入一些内容看看：',callBack,this,true,"我是默认值");  
        function callBack(id,msg){  
            alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);  
        }  
      });  

     Javascript代码   
     
   
Ext.MessageBox.show({  
            title:'提示',  
            msg:'我有三个按钮，和一个多行文本区。',  
            modal:true,  
            prompt:true,  
            value:'请输入',  
            fn:callBack,  
            buttons:Ext.Msg.YESNOCANCEL,  
            icon:Ext.Msg.QUESTION    
        })  
        function callBack(id,msg){  
            alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);  
        }  

     Javascript代码   
     
   
//'ok'  
        Ext.MessageBox.msgButtons[0].setText('确定');  
        //'yes'  
        Ext.MessageBox.msgButtons[1].setText('是');  
        //'no'  
        Ext.MessageBox.msgButtons[2].setText('否');  
        //'cancel'  
        Ext.MessageBox.msgButtons[3].setText('取消');  
          
        Ext.MessageBox.show({  
            title:'提示',  
            msg:'自定义按钮文字',  
            modal:true,  
            buttons:Ext.Msg.YESNOCANCEL  
        });  

     Javascript代码   
     
   
//多次设置信息提示框按钮文字//'ok'  
        Ext.MessageBox.msgButtons[0].setText('确认按钮');//第一次设置  
        Ext.MessageBox.alert('提示','提示信息一',function(){  
            Ext.MessageBox.msgButtons[0].setText('新的确认按钮');//第二次设置  
            Ext.MessageBox.alert('提示','提示信息二');  
        });  

     Javascript代码   
     
   
//通过调用updateText方法定时更新提示信息  
        var msgBox = Ext.MessageBox.show({  
            title:'提示',  
            msg:'动态跟新的信息文字',  
            modal:true,  
            buttons:Ext.Msg.OK,  
            fn:function(){  
                //停止定时任务  
                Ext.TaskManager.stop(task);  
            }  
        })  
        //Ext.TaskManager是一个功能类，用来定时执行程序，  
        //在这里我们使用它来定时触发提示信息的更新。  
        var task = {  
            run:function(){  
                msgBox.updateText('会动的时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));  
            },  
            interval:1000  
        }  
        Ext.TaskManager.start(task);  

     Javascript代码   
     
   
//通过调用updateProgress方法同时更新提示信息和进度条  
        var msgBox = Ext.MessageBox.show({  
            title:'提示',  
            msg:'动态跟新的进度条和信息文字',  
            modal:true,  
            width:300,  
            progress:true  
        })  
  
        var count = 0;//滚动条被刷新的次数  
        var percentage = 0;//进度百分比  
        var progressText = '';//进度条信息  
  
        var task = {  
            run:function(){  
                count++;  
                //计算进度  
                percentage = count/10;  
                //生成进度条文字  
                progressText = '当前完成度：'+percentage*100 + "%";  
                //更新信息提示对话框  
                msgBox.updateProgress(percentage,progressText,  
                    '当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));  
                //刷新10次后关闭信息提示对话框  
                if(count > 10){  
                    Ext.TaskManager.stop(task);  
                    msgBox.hide();  
                }  
                  
            },  
            interval:1000  
        }  
  
        Ext.TaskManager.start(task);  

     Javascript代码   
     
   
//等待提示框会显示一个自动更新的进度条  
Ext.MessageBox.wait('请等待，操作需要很长时间！','提示',{  
            text : '进度条上的文字'  
        });  

6、进度条的使用

     Javascript代码   
     
   
//手动模式的进度条  
var ProgressBar = new Ext.ProgressBar({  
            width:300,//设定进度条的宽度  
            renderTo:'ProgressBar'  
        });  
        var count = 0;//滚动条被刷新的次数  
        var percentage = 0;//进度百分比  
        var progressText = '';//进度条信息  
  
        Ext.TaskManager.start({  
            run:function(){  
                count++;  
                //刷新10次后关闭信息提示对话框  
                if(count > 10){  
                    ProgressBar.hide();  
                }  
                //计算进度  
                percentage = count/10;  
                progressText = percentage * 100 + '%'  
                //更新信息提示对话框  
                ProgressBar.updateProgress(percentage,progressText,true);  
            },  
            interval:1000,//设置时间间隔  
            repeat : 6//设置执行次数  
        });  

     Javascript代码   
     
   
//自动模式的进度条  
        var ProgressBar = new Ext.ProgressBar({  
            width:300,//设定进度条的宽度  
            renderTo:'ProgressBar'  
        });  
        ProgressBar.wait({  
            duration:10000,//进度条持续更新10秒钟  
            interval:1000,//每1秒钟更新一次  
            increment:10,//进度条分10次更新完毕  
            scope:this,//回调函数的执行范围  
            text : 'waiting',//进度条上的文字  
            fn:function(){//更新完成后调用的回调函数  
                alert('更新完毕');  
            }  
        });  

     Css代码   
     
   
<STYLE TYPE="text/css">  
    .custom .x-progress-inner {  
        height:17px;  
        background: #fff;  
    }  
    .custom .x-progress-bar {  
        height:15px;  
        background:transparent url(images/custom-bar-red.gif) repeat-x 0 0;  
        border-top:1px solid #BEBEBE;  
        border-bottom:1px solid #EFEFEF;  
        border-right:0;  
    }     
  </STYLE>  

     Javascript代码   
     
   
//自定义样式的进度条样式  
        var ProgressBar = new Ext.ProgressBar({  
            width:300,//设定进度条的宽度  
            renderTo:'ProgressBar',  
            cls:'custom'//使用自定义样式  
        });  
        ProgressBar.wait({  
            duration:10000,//进度条持续更新10秒钟  
            interval:1000,//每1秒钟更新一次  
            increment:10//进度条分10次更新完毕  
        });  

7、工具栏、菜单栏相关

     Javascript代码   
     
   
//简单的工具栏  
        var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
            renderTo:'toolbar',  
            width:300  
        });  
  
        toolbar.add([//向工具栏中添加按钮  
            {  
                text:'新建',//按钮上显示的文字  
                handler:onButtonClick,//点击按钮的处理函数  
                iconCls:'newIcon'//在按钮上显示的图标  
            },  
            {text:'打开',handler:onButtonClick,iconCls:'openIcon'},  
            {text:'保存',handler:onButtonClick,iconCls:'saveIcon'}  
        ]);  
  
        function onButtonClick(btn){//点击按钮时调用的处理函数  
            alert(btn.text);//取得按钮上的文字  
        }  

     Javascript代码   
     
   
//使用add方法加入多种元素的复杂工具栏  
        var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
            renderTo:'toolbar',  
            width:500  
        });  
        toolbar.add(  
            {text:'新建'},{text:'打开'},  
            {text:'编辑'},{text:'保存'}, //加入按钮  
            '-',                          //加入工具栏分隔符  
            {     //加入表单元素  
                xtype:'textfield',  
                hideLabel : true,  
                width:150  
            },  
            '->',                        //加入一个充满工具栏的空白元素  
            '<a href=#>超连接</div>',    //加入一个Element元素  
            {xtype: 'tbspacer', width: 50},//加入一个空白元素，宽度为50像素  
            '静态文本'                   //加入一个简单字符串  
        );  

     Html代码   
     
   
<HTML>  
 <HEAD>  
  <TITLE>启用和禁用工具栏</TITLE>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  <script type="text/javascript">  
    Ext.onReady(function(){  
        var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
            renderTo:'toolbar',  
            width:200,  
            items :[{  
                text:'新建',//按钮上显示的文字  
                handler:onButtonClick//点击按钮的处理函数  
            },  
            {text:'打开',handler:onButtonClick},  
            {text:'保存',handler:onButtonClick}]  
        });  
  
        function onButtonClick(btn){//点击按钮时调用的处理函数  
            alert(btn.text);//取得按钮上的文字  
        }  
          
        Ext.get('enabledBtn').on('click',function(){  
            //启用工具栏  
            toolbar.enable();  
        });  
        Ext.get('disabledBtn').on('click',function(){  
            //禁用工具栏  
            toolbar.disable();  
        });  
    });  
  </script>  
 </HEAD>  
 <BODY STYLE="margin: 10px">  
    <div id='toolbar'></div>  
    <input type=button value='启用工具栏' id='enabledBtn'>  
    <input type=button value='禁用工具栏' id='disabledBtn'>  
 </BODY>  
</HTML>  

     Html代码   
     
   
<HTML>  
 <HEAD>  
  <TITLE>简单的菜单栏</TITLE>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  <script type="text/javascript">  
    Ext.onReady(function(){  
        var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
            renderTo:'toolbar',  
            width:300  
        });  
        var fileMenu = new Ext.menu.Menu({//文件创建菜单  
            shadow : 'frame',//设置菜单四条边都有阴影  
            allowOtherMenus : true,  
            items : [  
                new Ext.menu.Item({  
                    text: '新建',//菜单项名称  
                    menuHideDelay:1000,  
                    handler:onMenuItem//菜单项处理函数  
                }),//添加菜单项  
                {text: '打开',handler:onMenuItem},  
                {text: '关闭',handler:onMenuItem}  
            ]  
        });  
        var editMenu = new Ext.menu.Menu({//编辑创建菜单  
            shadow : 'drop',//设置菜单在右下两条边有阴影  
            allowOtherMenus : true,  
            items : [  
                {text: '复制',handler:onMenuItem},//添加菜单项  
                {text: '粘贴',handler:onMenuItem},  
                {text: '剪切',handler:onMenuItem}  
            ]  
        });  
        toolbar.add(  
            {text : '文件',   menu : fileMenu},//将菜单加入工具栏  
            {text : '编辑',   menu : editMenu}  
        );  
        function onMenuItem(item){//菜单项的回调方法  
            alert(item.text);//取得菜单项的text属性  
        }  
    });  
  </script>  
 </HEAD>  
 <BODY STYLE="margin: 10px">  
    <div id='toolbar'></div>  
 </BODY>  
</HTML>  

     Html代码   
     
   
<HTML>  
 <HEAD>  
  <TITLE>多级菜单栏</TITLE>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  <script type="text/javascript">  
    Ext.onReady(function(){  
        var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
            renderTo:'toolbar',  
            width:300  
        });  
        var infoMenu = new Ext.menu.Menu({//一级菜单  
            ignoreParentClicks : true,//忽略父菜单的单击事件  
            plain : true,  
            items : [  
                {  
                    text: '个人信息',  
                    menu: new Ext.menu.Menu({//二级菜单  
                        ignoreParentClicks : true,//忽略父菜单的单击事件  
                        items:[  
                            {  
                                text: '基本信息',  
                                menu : new Ext.menu.Menu({//三级菜单  
                                    items:[  
                                        {text: '身高',handler:onMenuItem},  
                                        {text: '体重',handler:onMenuItem}  
                                    ]  
                            })}  
                        ]  
                    })  
                },//添加菜单项  
                {text: '公司信息'}  
            ]  
        });  
        Toolbar.add(  
            {text : '设置',   menu : infoMenu}//将菜单加入工具栏  
        );  
        function onMenuItem(item){//选择菜单项的处理函数  
            alert(item.text);//取得菜单项的text属性  
        }  
    });  
  </script>  
 </HEAD>  
 <BODY STYLE="margin: 10px">  
    <div id='toolbar'></div>  
 </BODY>  
</HTML>  

     Html代码   
     
   
<HTML>  
 <HEAD>  
  <TITLE>将更多组件加入菜单</TITLE>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  <STYLE TYPE="text/css">  
    .userManagerIcon { background-image: url(images/userManager.gif) !important; }  
    .newIcon { background-image: url(images/new.gif) !important; }  
    .openIcon { background-image: url(images/open.gif) !important; }  
    .saveIcon { background-image: url(images/save.gif) !important; }  
  </STYLE>  
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  <script type="text/javascript">  
    Ext.onReady(function(){  
  
        var Toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
            renderTo:'toolbar',  
            width:300  
        });  
  
        var fileMenu = new Ext.menu.Menu({//文件创建菜单  
            items : [{  
                    xtype : 'textfield',//创建表单字段  
                    hideLabel: true,  
                    width : 100  
                },{  
                    text:"颜色选择",   
                    menu : new Ext.menu.ColorPicker()  
                },  
                {xtype: 'datepicker'},//添加日期选择器组件  
                {  
                    xtype: 'buttongroup',//添加按钮组组件  
                    columns: 3,  
                    title: '按钮组',  
                    items: [{  
                        text: '用户管理',  
                        scale: 'large',  
                        colspan : 3,  
                        width : 170,  
                        iconCls: 'userManagerIcon',  
                        iconAlign: 'top'  
                    },{  
                        text: '新建', iconCls: 'newIcon'  
                    },{  
                        text: '打开', iconCls: 'openIcon'  
                    },{  
                        text: '保存', iconCls: 'saveIcon'  
                    }]  
                }  
            ]  
        });  
  
        Toolbar.add(  
            {text : '文件',   menu : fileMenu}//将菜单加入工具栏  
        );  
    });  
  </script>  
 </HEAD>  
 <BODY STYLE="margin: 10px">  
    <div id='toolbar'></div>  
 </BODY>  
</HTML>  

     Html代码   
     
   
<HTML>  
 <HEAD>  
  <TITLE>具有选择框的菜单</TITLE>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  <script type="text/javascript">  
    Ext.onReady(function(){  
  
        var toolbar = new Ext.toolbar.Toolbar({//创建工具栏  
            renderTo:'toolbar',  
            width:300  
        });  
        var themeMenu = new Ext.menu.Menu({//文件创建菜单  
            items : [{  
                text:'主题颜色',  
                menu:new Ext.menu.Menu({  
                    items:[{  
                        text: '红色主题',  
                        checked: true,//初始为选中状态  
                        group: 'theme',//为单选项进行分组  
                        checkHandler: onItemCheck  
                    },{  
                        text: '蓝色主题',  
                        checked: false,//初始为未选中状态  
                        group: 'theme',  
                        checkHandler: onItemCheck  
                    },{  
                        text: '黑色主题',  
                        checked: false,  
                        group: 'theme',  
                        checkHandler: onItemCheck  
                    }]  
                })  
            },{  
                text:'是否启用',  
                checked : false  
            }]  
        });  
  
        toolbar.add(  
            {text : '风格选择', menu : themeMenu}//将菜单加入工具栏  
        );  
        function onItemCheck(item){//菜单项的回调方法  
            alert(item.text);//取得菜单项的text属性  
        }  
    });  
  </script>  
 </HEAD>  
 <BODY STYLE="margin: 10px">  
    <div id='toolbar'></div>  
 </BODY>  
</HTML>  