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.
 * licensing@sencha.com
 * 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>