ext3学习小结

先介绍一下ext3和ext4的一些区别吧，初看ext4相对于ext3源码还是有很多不同的，ext4加入的define和create两个强大的类，ext4为了让源码容易看，特意将所有的类进行了define。源码的ext3用的是new出实例，而ext4大量用了create。其他的书写还是差不多的。

　　第一步先将ext3的环境建立起来，在下载的ext中需要引用

　　

 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>

这三条即可，需要注意的是上面的第三条与第二条调换位置，会报错。系统提示EXT未定义。这里还是需要注意的。
环境建立起来后，可以写个简单的messageBox来测试一下

Ext.onReady(function(){
        Ext.MessageBox.confirm(‘Confirm‘, ‘Are you sure you want to do that?‘);
});

测试成功了说明你的ext环境建立起来了，这里的onReady和js中的window.onload类似，但是还是有区别的。onReady是当页面的dom框架加载完成后就可以执行，不需要等待页面的图片等元素加载。而onload是在图片等元素加载完成后才去执行的。这样相对来说onready还是比较高效的。

下面介绍一些ext的一些核心，首先ext3是对js的封装，一个大型的js框架。就是提供了对界面ui，js基本类型的操作和一些操作的方法，Dom，事件，继承都进行了一系列的封装，框架的使用是为了更高效。对于dom的操作，ext进行了很好的封装让程序更加完美。

对于dom，ext祭出了get和fly，get和fly都是根据id或者节点找得相应的元素。而相对getElementByID,get和fly是十分高效的。get用到了缓存，fly用到了享元模式。如果想用ext对dom操作封装的方法要用get或fly，这两个方法得到的是ext封装的dom元素，并不是html的dom元素。关于dom无非就是一些是对父节点和子节点的增删改查，和加入css样式罢了，知道了一些操作就可以去api找到相应的方法，

js基本类型的操作， number，string，，object，function，对这几个类型的遍历，删除元素，增加元素，产生随机数，还是对数组的操作，Array

一些ext中的各种提示框，消息框，输入框，进度条等一些小的组件就不介绍了，api中很是全面。

下面重点来看一些ext ui的操作，当然这也是工作中最常用到的。。。。。。

根据需求来一点一点写代码

我们需要实现一种在全屏的，左面有导航栏的那种效果

首先这是一整个viewport，分为左面和右面，layout需要‘border’ 格式。左面用到region为‘west’，右面region为‘center’。下面是代码

  var accordion = new Ext.Panel({
                region:‘west‘,
                margins:‘5 0 5 5‘,
                split:true,
                width: 210,
                layout:‘accordion‘,
                items: [item1, item2, item3, item4, item5]
            });

            var viewport = new Ext.Viewport({
                layout:‘border‘,
                items:[
                    accordion, {
                    id:‘contend-panel‘,
                    region:‘center‘,
                    layout:‘card‘,
                    margins:‘5 5 5 0‘,
                    cls:‘empty‘,
                    bodyStyle:‘background:#f1f1f1‘,
                    activeItem:0,
                    items:[aObj,bObj,cObj]
                }],
                renderTo:Ext.getBody()
            });

上面的item1-item5都是一个个panel，而第一个item1下面有树的结构，这是一个treepanel，treepanel继承了panel。下面代码

            var item1 = new Ext.tree.TreePanel({
                title: ‘Accordion Item 1‘,
                cls:‘empty‘,
                autoScroll: true,
                split: true,
                useArrows:true,
                loader: new Ext.tree.TreeLoader(),
                root: new Ext.tree.AsyncTreeNode({
                expanded: true,
                children: [{
                text: ‘Menu Option 1‘,
                leaf: true
                }, {
                text: ‘Menu Option 2‘,
                leaf: true
                }, {
                text: ‘Menu Option 3‘,
                leaf: true
            }]
        }),
            rootVisible: false,
          /*  listeners: {
            click: function(n) {
            Ext.Msg.alert(‘Navigation Tree Click‘, ‘You clicked: "‘ + n.attributes.text + ‘"‘);
            }
        }*/
            });

我们需要点击上面的menu option1 或者menu option2在右面显示不同的画面，这里需要在右面设置layout：‘card’。上面已经设置完了，还要将想在右面显示的所有的画面写入items，上面已写入  这句 activeItem:0,表示首页是aObj这个页面，下面来设置点击事件

 item1.on(‘click‘,function(n){
                var sn=this.selModel.selNode || {};
                if(n.leaf && n.id != sn.id){
                    Ext.getCmp(‘contend-panel‘).layout.setActiveItem(n.id+‘-content‘);
                }
            });

            var aObj=new Ext.Panel({
                id:‘item1of‘,
                title:‘this is my title‘,
                html:‘<span>this is 1my title</span>‘
            });
 var cObj={
                id:‘xnode-36-content‘,
                title:‘this is my Menu2 title‘,
                html:‘<span>this is my Menu2 text</span>‘
            }

这样就实现了。

我们点击menu option1

这里我们来写aobj的代码

右面的代码我们需要一个表格框来装数据，这里用到了Ext.data.Store先来存储这数据再用到Ext.grid.GridPanel来装数据

/*!
 * Ext JS Library 3.4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * [email protected]
 * http://www.sencha.com/license
 */
SampleGrid = function(limitColumns){

    function italic(value){
        return ‘<i>‘ + value + ‘</i>‘;
    }

    function change(val){
        if(val > 0){
            return ‘<span style="color:green;">‘ + val + ‘</span>‘;
        }else if(val < 0){
            return ‘<span style="color:red;">‘ + val + ‘</span>‘;
        }
        return val;
    }

    function pctChange(val){
        if(val > 0){
            return ‘<span style="color:green;">‘ + val + ‘%</span>‘;
        }else if(val < 0){
            return ‘<span style="color:red;">‘ + val + ‘%</span>‘;
        }
        return val;
    }

    var columns = [
        {id:‘company‘,header: "公司", width: ‘20%‘, sortable: true, dataIndex: ‘company‘},
        {header: "价格", width: ‘20%‘, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: ‘price‘},
        {header: "Change", width: ‘20%‘, sortable: true, renderer: change, dataIndex: ‘change‘},
        {header: "% Change", width: ‘20%‘, sortable: true, renderer: pctChange, dataIndex: ‘pctChange‘},
        {header: "Last Updated", width: ‘20%‘, sortable: true, renderer: Ext.util.Format.dateRenderer(‘m/d/Y‘), dataIndex: ‘lastChange‘}
    ];

    // allow samples to limit columns
    if(limitColumns){
        var cs = [];
        for(var i = 0, len = limitColumns.length; i < len; i++){
            cs.push(columns[limitColumns[i]]);
        }
        columns = cs;
    }

    SampleGrid.superclass.constructor.call(this, {
        store: new Ext.data.Store({
            reader: new Ext.data.ArrayReader({}, [
                   {name: ‘company‘},
                   {name: ‘price‘, type: ‘float‘},
                   {name: ‘change‘, type: ‘float‘},
                   {name: ‘pctChange‘, type: ‘float‘},
                   {name: ‘lastChange‘, type: ‘date‘, dateFormat: ‘n/j h:ia‘}
              ]),
            data: [
                [‘3m Co‘,71.72,0.02,0.03,‘9/1 12:00am‘],
                [‘Alcoa Inc‘,29.01,0.42,1.47,‘9/1 12:00am‘],
                [‘Altria Group Inc‘,83.81,0.28,0.34,‘9/1 12:00am‘],
                [‘American Express Company‘,52.55,0.01,0.02,‘9/1 12:00am‘],
                [‘American International Group, Inc.‘,64.13,0.31,0.49,‘9/1 12:00am‘],
                [‘AT&T Inc.‘,31.61,-0.48,-1.54,‘9/1 12:00am‘],
                [‘Boeing Co.‘,75.43,0.53,0.71,‘9/1 12:00am‘],
                [‘Caterpillar Inc.‘,67.27,0.92,1.39,‘9/1 12:00am‘],
                [‘Citigroup, Inc.‘,49.37,0.02,0.04,‘9/1 12:00am‘],
                [‘E.I. du Pont de Nemours and Company‘,40.48,0.51,1.28,‘9/1 12:00am‘],
                [‘Exxon Mobil Corp‘,68.1,-0.43,-0.64,‘9/1 12:00am‘],
                [‘General Electric Company‘,34.14,-0.08,-0.23,‘9/1 12:00am‘],
                [‘General Motors Corporation‘,30.27,1.09,3.74,‘9/1 12:00am‘],
                [‘Hewlett-Packard Co.‘,36.53,-0.03,-0.08,‘9/1 12:00am‘],
                [‘Honeywell Intl Inc‘,38.77,0.05,0.13,‘9/1 12:00am‘],
                [‘Intel Corporation‘,19.88,0.31,1.58,‘9/1 12:00am‘],
                [‘International Business Machines‘,81.41,0.44,0.54,‘9/1 12:00am‘],
                [‘Johnson & Johnson‘,64.72,0.06,0.09,‘9/1 12:00am‘],
                [‘JP Morgan & Chase & Co‘,45.73,0.07,0.15,‘9/1 12:00am‘],
                [‘McDonald\‘s Corporation‘,36.76,0.86,2.40,‘9/1 12:00am‘],
                [‘Merck & Co., Inc.‘,40.96,0.41,1.01,‘9/1 12:00am‘],
                [‘Microsoft Corporation‘,25.84,0.14,0.54,‘9/1 12:00am‘],
                [‘Pfizer Inc‘,27.96,0.4,1.45,‘9/1 12:00am‘],
                [‘The Coca-Cola Company‘,45.07,0.26,0.58,‘9/1 12:00am‘],
                [‘The Home Depot, Inc.‘,34.64,0.35,1.02,‘9/1 12:00am‘],
                [‘The Procter & Gamble Company‘,61.91,0.01,0.02,‘9/1 12:00am‘],
                [‘United Technologies Corporation‘,63.26,0.55,0.88,‘9/1 12:00am‘],
                [‘Verizon Communications‘,35.57,0.39,1.11,‘9/1 12:00am‘],
                [‘Wal-Mart Stores, Inc.‘,45.45,0.73,1.63,‘9/1 12:00am‘]
            ]
        }),
        columns: columns,
        autoExpandColumn: ‘company‘,
        //layout:‘fit‘
        width:‘100%‘,
        height:570,
        stripeRows: true,
        listeners: {
                    viewready: function(g) {
                        g.getSelectionModel().selectRow(0);
                    } // Allow rows to be rendered.
                },

             sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true,
                    listeners: {
                        rowselect: function(sm, row, rec) {
                            Ext.getCmp("xnode-35-content").getForm().loadRecord(rec);
                        }
                    }
                })
    });

}

Ext.extend(SampleGrid, Ext.grid.GridPanel);

我们还需要点击一条数据将数据实现到上面的文本框中，上面是一个toolbar，一个个文本框是textfield，这一操作写起来很方便，ext封装的很好
上面的sm: new Ext.grid.RowSelectionModel  已经写出了。只需要文本框的name与数据columns的dataIndex对应起来就可以了

下面是aObj的具体代码

var bObj={
                id:‘xnode-35-content‘,
                xtype:‘form‘,
                title:‘this is my 2 title‘,
                //new SampleGrid([0, 1,2,3,4])
                items: [
                                 new Ext.Toolbar({
                                    items:[
                                        {
                                        xtype:‘label‘,
                                        text:‘公司:‘},{
                                        xtype:‘textfield‘,
                                        name: ‘company‘,
                                    },‘-‘,
                                    {xtype:‘label‘,
                                    text:‘价格:‘},
                                    {
                                        xtype:‘textfield‘,
                                        name: ‘price‘
                                    },‘-‘,
                                    {xtype:‘label‘,text:‘%Change:‘},
                                    {
                                        xtype:‘textfield‘,
                                        name: ‘pctChange‘
                                    },‘-‘,
                                    {xtype:‘label‘,text:‘Last Updated:‘},
                                    {
                                        xtype: ‘datefield‘,
                                        xtype:‘textfield‘,
                                        name: ‘lastChange‘
                                    }
                                    ]
                        })
                    ,{
                    layout:‘fit‘,
                    items:new SampleGrid([0, 1,2,3,4])
                }]
                //this is gridplane
            };

看上面的name和数据的dataIndex是对应的

这样就实现了这一整体功能

下面是连起来的代码

<html>
<head>
    <meta charset="utf-8">
    <title>Accordion Layout</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="sample-grid.js"></script>
    <style type="text/css" >
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
        .empty .x-panel-body {
            padding-top:0px;
            text-align:left;
            font-style:italic;
            color: gray;
            font-size:11px;
        }
        .x-grid3-row-over .x-grid3-cell-inner {   //鼠标移动到的该行的效果
            font-weight: bold;
            color: red;
        }
    </style>
    <script type="text/javascript">
        Ext.onReady(function() {

            var item1 = new Ext.tree.TreePanel({
                title: ‘Accordion Item 1‘,
                cls:‘empty‘,
                autoScroll: true,
                split: true,
                useArrows:true,
                loader: new Ext.tree.TreeLoader(),
                root: new Ext.tree.AsyncTreeNode({
                expanded: true,
                children: [{
                text: ‘Menu Option 1‘,
                leaf: true
                }, {
                text: ‘Menu Option 2‘,
                leaf: true
                }, {
                text: ‘Menu Option 3‘,
                leaf: true
            }]
        }),
            rootVisible: false,
          /*  listeners: {
            click: function(n) {
            Ext.Msg.alert(‘Navigation Tree Click‘, ‘You clicked: "‘ + n.attributes.text + ‘"‘);
            }
        }*/
            });

            item1.on(‘click‘,function(n){
                var sn=this.selModel.selNode || {};
                if(n.leaf && n.id != sn.id){
                    Ext.getCmp(‘contend-panel‘).layout.setActiveItem(n.id+‘-content‘);
                }
            });

            var aObj=new Ext.Panel({
                id:‘item1of‘,
                title:‘this is my title‘,
                html:‘<span>this is 1my title</span>‘
            });

            var bObj={
                id:‘xnode-35-content‘,
                xtype:‘form‘,
                title:‘this is my 2 title‘,
                //new SampleGrid([0, 1,2,3,4])
                items: [
                          new Ext.Toolbar({
                                    items:[
                                        {
                                        xtype:‘label‘,
                                        text:‘公司:‘},{
                                        xtype:‘textfield‘,
                                        name: ‘company‘,
                                    },‘-‘,
                                    {xtype:‘label‘,
                                    text:‘价格:‘},
                                    {
                                        xtype:‘textfield‘,
                                        name: ‘price‘
                                    },‘-‘,
                                    {xtype:‘label‘,text:‘%Change:‘},
                                    {
                                        xtype:‘textfield‘,
                                        name: ‘pctChange‘
                                    },‘-‘,
                                    {xtype:‘label‘,text:‘Last Updated:‘},
                                    {
                                        xtype: ‘datefield‘,
                                        xtype:‘textfield‘,
                                        name: ‘lastChange‘
                                    }
                                    ]
                        })
                    ,{
                    layout:‘fit‘,
                    items:new SampleGrid([0, 1,2,3,4])
                }]
                //this is gridplane
            };

            var cObj={
                id:‘xnode-36-content‘,
                title:‘this is my Menu2 title‘,
                html:‘<span>this is my Menu2 text</span>‘
            }

            var item2 = new Ext.Panel({
                title: ‘Accordion Item 2‘,
                html: ‘<empty panel>‘,
                cls:‘empty‘
            });

            var item3 = new Ext.Panel({
                title: ‘Accordion Item 3‘,
                html: ‘<empty panel>‘,
                cls:‘empty‘
            });

            var item4 = new Ext.Panel({
                title: ‘Accordion Item 4‘,
                html: ‘<empty panel>‘,
                cls:‘empty‘
            });

            var item5 = new Ext.Panel({
                title: ‘Accordion Item 5‘,
                html: ‘<empty panel>‘,
                cls:‘empty‘
            });

            var accordion = new Ext.Panel({
                region:‘west‘,
                margins:‘5 0 5 5‘,
                split:true,
                width: 210,
                layout:‘accordion‘,
                items: [item1, item2, item3, item4, item5]
            });

            var viewport = new Ext.Viewport({
                layout:‘border‘,
                items:[
                    accordion, {
                    id:‘contend-panel‘,
                    region:‘center‘,
                    layout:‘card‘,
                    margins:‘5 5 5 0‘,
                    cls:‘empty‘,
                    bodyStyle:‘background:#f1f1f1‘,
                    activeItem:0,
                    items:[aObj,bObj,cObj]
                }],
                renderTo:Ext.getBody()
            });
        });
    </script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>
时间： 2024-11-04 10:41:22

ext3学习小结的相关文章

git学习小结

背景:最近因为工作原因,需要将以前的代码库由bitbucket重新布置在一台服务器上,所以就学习了下git,特此记录下 在167这台机器上搭建apache,用做git server,由于以前apache都已经搭好了,所以这里只配置git server 就可以了,此处贴出配置: 服务器搭好了,来到配置中的root目录,git clone https://[email protected]/XXXX 此时,库和服务器都搭好了,用于新库测试的机器也可以从git server上克隆库了,来,我们来试试从

网络编程学习小结

几种网络编程方式: ISAPI.CGI.WinInet.Winsock 它们之间的差别: 1)  ISAPI主要是开发基于浏览器client与server端程序.效率比CGI方式高,并且也扩展了CGI没有的一些功能.(基于TCP/IP模型中的应用层) 2)  CGI主要是开发基于浏览器client与server端程序.(基于TCP/IP模型中的应用层) 3)  WinInet主要是开发client程序.(基于TCP/IP模型中的应用层) 4)  Winsock主要是基于socket来开发clie

MogileFS学习小结

大纲: 一.关于MogileFS 二.常见分布式文件系统 三.MogileFS基本原理 四.MogileFS的实现 一.关于MogileFS 当下我们处在一个互联网飞速发展的信息社会,在海量并发连接的驱动下每天所产生的数据量必然以几何方式增长,随着信息连接方式日益多样化,数据存储的结构也随着发生了变化.在这样的压力下使得人们不得不重新审视大量数据的存储所带来的挑战,例如:数据采集.数据存储.数据搜索.数据共享.数据传输.数据分析.数据可视化等一系列问题. 传统存储在面对海量数据存储表现出的力不从

201671010130 2016-2017-2 《Java程序设计》第四周学习小结

第四周学习小结 本次实验巩固了上次实验分隔数并求和的题,目前这个题有两种做法,一种是不断对数10求余,余数保存在sum中,然后左移一位,直到余数为零.另一种就是将数字强制转换成一个字符串数组String s=String.valueOf(num),根据方法s.toCharArray()将字符分离出来,据"x"-"0"=x,unicode码值相减即可得x的值. 父类和子类能够看两个交集,super关键字是否能够看做一个子类和超类的接口呢? 在子类中可以增加域.增加方法

初识ASP.NET---点滴的积累---ASP.NET学习小结

差不多十多天前学习完了北大青鸟的学习视频,没想到没几天的时间就看完了XML视频和牛腩的Javascript视频.学习完了也该总结总结,理理自己的思路,消化一下自己学习到的东西. 视频中的理论知识并不是很多,以例子驱动学起来也不会他过于乏味.全部的学习内容大概的可以用下图表示. 个人感觉这套视频的体系感不是很强,每一集之间老师的串联并不是做得很好,向我等没有教材的有些小的知识无从知晓.但是不能不说这套视频确很适合初学者学习,老师讲解的也不错,从此我也算是入门. 当然要想进一步的了解ASP.NET并

8086汇编学习小结———实时更新

初学IBM-PC 8086,对INT指令不是很理解.现从网上总计如下: 表:DOS系统功能调INT 21H AH 功能 调用参数 返回参数 00 程序终止(同INT 20H) CS=程序段前缀 01 键盘输入并回显 AL=输入字符 02 显示输出 DL=输出字符 03 异步通迅输入 AL=输入数据 04 异步通迅输出 DL=输出数据 05 打印机输出 DL=输出字符 06 直接控制台I/O DL=FF(输入)DL=字符(输出) AL=输入字符 07 键盘输入(无回显) AL=输入字符 08 键盘

《Pro AngularJS》学习小结-01

<Pro AngularJS>该书以一个SportsStore案例为主线铺开. 一.开发环境设置 该书中所用的server开发环境是Deployed,从来没听说过,而且作者也说该server没什么人用,我干脆弃用之.其他的环境包括 NodeJS--这个必须装 karma--测试环境,前期还没有用到,以后认真研究,毕竟AngularJS一大特点是Unit Test bootstrap--这个现在应该普遍使用了,O(∩_∩)O webstorm--现在唯一支持AngularJS插件的IDE 我基本

自动化测试Selenium Webdriver （JAVA）学习小结

自动化测试--Selenium学习小结 一.自动化测试的概念及意义: 1.什么是自动化测试: 一般是指软件测试的自动化,软件测试就是在预设条件下运行系统或应用程序,评估运行结果,预先条件应包括正常条件和异常条件. 2.意义: 让测试更有效率,利用更多的空余时间,减少人力资源. 二.selenium工具 我用的是java语言,所以接下来的例子和方法都是基于java的. 1.环境配置 (1)Jdk的配置: 我用的是1.7的jdk,配置方法都一样,新建一个JAVA_HOME,把你装好的jdk的路径复制

点滴的积累---J2SE学习小结

点滴的积累---J2SE学习小结 什么是J2SE J2SE就是Java2的标准版,主要用于桌面应用软件的编程:包括那些构成Java语言核心的类.比方:数据库连接.接口定义.输入/输出.网络编程. 学习感受 近半个月的坎坷,总算是将马士兵的<J2SE教程>视频看完了,期间一些其它的事一些不得不处理的事总是打断我的安排.看了视频之后认为东西确实都非常基础给我印象最深的是关于程序执行的内存分析.IO和线程,这谁在之前不管是学习VB.VB.NET还是C#中都没怎么设计到的东西. 首先,我想对于一个初学