ExtJS核心组件

ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA 即富 客户端的AJAX应用，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

• 平台依赖的版本为：4.2.1
• 英文API：v4.2.1
• 中文API：v4.1.0，这个API版本有些低，但是对于初学者很实用

Panel组件

Panel是一个容器,具有特定的功能和结构组件，使它使能够完美地为面向应用的用户界面创建部件。 Panel继承自Ext.container.Container,可以设置自身的layout布局,并且可以包含子组件。

示例代码：

//基础Panel组件演示

//1.配置项形式声明组件
var panel1 = {
        xtype:'panel',
        title:'Title',
        html:'Hello World！'
    };
//2.实例化形式声明组件
var panel2 = Ext.create('Ext.panel.Panel',{
        title:'Title',
        html:'Hello World！'
    });

//以上两种形式都是可以使用，以下所有示例都采用第一种形式

//通过平台的API打开一个窗口，展示Panel组件
JE.win({
    title:'Panel组件演示',
    autoShow:true,
    items:[panel1]//panel2
})

Layout布局组件

Layout布局组件，可以方便的设定页面组件的展现方式。以下介绍常用的布局方式，其他布局可以参考API

fit布局

容器只包含一个子元素, 子元素自动填满容器，设置容器layout: 'fit'属性

代码示例：

JE.win({
    title:'Fit Layout',
    layout:'fit',
    autoShow:true,
    items:[{
        title: 'Inner Panel',
        html: 'This is the inner panel content'
    }]
})

column布局

这个布局用于在一个多列格式中创建结构化布局的布局样式, 每列可以用百分比或固定的宽度值来定义, 但允许高度根据内容而改变.设置容器layout: 'column'属性

代码示例：

// 所有列都以百分数配置 -- 他们总和必须为1
JE.win({
    title:'Column Layout - Percentage Only',
    layout:'column',
    autoShow:true,
    items:[{
        title: 'Column 1',
        columnWidth: 0.25
    },{
        title: 'Column 2',
        columnWidth: 0.55
    },{
        title: 'Column 3',
        columnWidth: 0.20
    }]
})

// 参数 width 与 columnWidth 混用 -- 所有columnWidth值之和必须为1.
// 第一列会占用宽度120px, 而后两列会填满容器剩下的宽度.

JE.win({
    title:'Column Layout - Mixed',
    layout:'column',
    autoShow:true,
    items:[{
        title: 'Column 1',
        width: 120
    },{
        title: 'Column 2',
        columnWidth: 0.7
    },{
        title: 'Column 3',
        columnWidth: 0.3
    }]
})

border布局

这是一个多视图的, 面向应用的UI布局样式, 支持多重嵌套面板, 自动在各区域及内嵌展开和收缩 区域之间产生分隔栏.设置容器layout: 'border'属性
布局的区域位置分为：east(东)，west(西)，south(南)，north(北)，center(中)

示例代码：

JE.win({
    title: 'Border Layout',
    layout: 'border',
    autoShow:true,
    items:[{
        title:'North Region',
        region:'north',        // 位置区域
        height:50,
        margin:'0 0 5 0'
    },{
        title:'East Region is resizable',
        region:'east',        // 位置区域
        split: true,        // 允许拖动调整大小
        width:100
    },{
        title: 'South Region is resizable',
        region: 'south',     // 位置区域
        xtype: 'panel',
        height: 100,
        split: true,         // 允许拖动调整大小
        margin:'5 0 0 0'
    },{
        title: 'West Region is collapsible',
        region:'west',
        xtype: 'panel',
        width: 200,
        collapsible: true,   // 允许折叠
        layout: 'fit'
    },{
        title: 'Center Region',
        region: 'center',     // 中间的区域是必须存在的，不需要设置宽高
        xtype: 'panel',
        layout: 'fit',
        margins: '0 5'
    }]
})

card布局

此布局管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个. 此布局样式多用于向导, 实现标签页布局等等.设置容器layout: 'card'属性

示例代码：

JE.win({
    title:'Card Layout',
    layout:'card',
    autoShow:true,
    tbar:{
        defaults:{
            handler:function(btn){
                //获得layout对象
                var layout = btn.up('window').getLayout();
                //切换当前激活的面板
                layout.setActiveItem(btn.itemId);
            }
        },
        items:[{
            text:'Card1',
            itemId:'card-0'
        },{
            text:'Card2',
            itemId:'card-1'
        },{
            text:'Card3',
            itemId:'card-2'
        }]
    },
    items:[
    {
        itemId: 'card-0',
        title:'Card1'
    },{
        itemId: 'card-1',
        title:'Card2'
    },{
        itemId: 'card-2',
        title:'Card3'
    }
    ]
})

Window组件

应用程序窗口的面板，默认窗口是浮动的，可以调整大小(resizable), 并且可以拖动(draggable)。窗口可以最大化(maximized)来充满视口，恢复到他们以前的大小，并且能最小化(minimize)。

Window继承自Panel，拥有Panel的所有属性

示例代码：

//Extjs 原生创建窗口
Ext.create('Ext.window.Window', {
    title: 'Window演示-Extjs原生创建',
    height: 200,
    width: 400,
}).show();

//也可以用平台提供的JE.win()来创建窗口,平台会提供很多默认值
JE.win({
    title:'Window演示-平台JE.win()创建',
    autoShow:true
})

ToolBar组件

基础工具栏类。虽然工具栏的默认类型是按钮， 但是工具栏的元素（工具栏容器中的子项）可以是任何类型的组件。
工具栏元素可以通过它们的构造函数明确地被创建，或者通过它们的xtype类型来创建，并且可以动态地add添加。

常用的工具条按钮组件

示例代码：

//工具条的按钮
var buttons = [{
    // xtype: 'button', // 默认的工具栏类型
    text: '按钮'
    },
    {
    xtype: 'splitbutton',
    text : '分割按钮'
    },
    // 使用右对齐容器
    '->', // 等同 { xtype: 'tbfill' }
    {
    xtype    : 'textfield',
    name     : 'field1',
    emptyText: '输入搜索词'
    },
    // 添加工具栏项之间的垂直分隔条
    '-', // 等同 {xtype: 'tbseparator'} 创建 Ext.toolbar.Separator
    'text 1', // 等同 {xtype: 'tbtext', text: 'text1'} 创建 Ext.toolbar.TextItem
    { xtype: 'tbspacer' },// 等同 ' ' 创建 Ext.toolbar.Spacer
    'text 2',
    { xtype: 'tbspacer', width: 50 }, // 添加一个50像素的空格
    'text 3'
    ];

JE.win({
    title:'Toolbar',
    autoShow:true,
    items:{
        xtype:'panel',
        tbar:Ext.clone(buttons),//顶部工具条
        bbar:Ext.clone(buttons),//底部工具条
        lbar:Ext.clone(buttons),//左侧工具条
        rbar:Ext.clone(buttons),//右侧工具条
    }
})

TabPanel组件

一个基础的标签容器，可以向Ext.panel.Panel一样使用

示例代码

JE.win({
    title:'TabPanel',
    autoShow:true,
    items:{
        xtype:'tabpanel',
        listeners: {
            beforetabchange: function(tabs, newTab, oldTab) {
                //禁止第二个标签页切换
                return newTab.title != 'Tab2';
            }
        },
        items:[{
            title:'Tab1',
            xtype:'panel',
            itemId:'tab-0'
        },{
            title:'Tab2',
            xtype:'panel',
            itemId:'tab-1'
        },{
            xtype:'panel',
            itemId:'tab-2',
            tabConfig: {//自定义标签样式
                title: 'Custom Title',
                tooltip: 'A button tooltip'
            }
        }]
    }
})

Tree组件

TreePanel提供树形结构的UI表示的树状结构数据。 一个TreePanel必须绑定一个Ext.data.TreeStore。TreePanel通过columns配置，支持多列。

示例代码：

//树形store
var store = Ext.create('Ext.data.TreeStore', {
    root: {//根节点
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "algebra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});
//树形面板
var treePanel = Ext.create('Ext.tree.Panel', {
    store: store,
    rootVisible: false
});

JE.win({
    title:'Simple Tree',
    width:280,
    height:540,
    items:treePanel
});

Grid组件

Grid是在客户端上显示大量的表格数据的极佳方式。它本质上是一个超级统计表， GridPanel使其更容易地进行获取、排序和筛选大量的数据。
Grid是由两个主要部分组成的 - 一个含有全部数据的Store和一个要进行渲染列的集合

示例代码：

//列表数据集
var store = Ext.create('Ext.data.Store', {
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',//内存代理，读取本地数据，也可以配置ajax代理，可以查看
        reader: {
            type: 'json',
            root: 'items'//列表展示的数据项配置
        }
    }
});
//创建列表
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 ,
        renderer: function(value) {//列表格式化方法
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
        }},
        { text: 'Phone', dataIndex: 'phone' }
    ]
});
JE.win({
    title:'Simple Grid',
    width:700,
    height:400,
    autoShow:true,
    items:grid
})

Form组件

FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的 Ext.form.field.Field 对象. 可以快捷方便地进行 配置以及处理 BasicForm 和 表单域.

示例代码：

//Extjs 原生form演示
var form = Ext.create('Ext.form.Panel', {
    bodyPadding: 5,
    // 表单域 Fields 将被竖直排列, 占满整个宽度
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },
    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],

    // 重置 和 保存 按钮.
    buttons: [{
        text: '重置',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: '保存',
        formBind: true, //only enabled once the form is valid
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                var vals = form.getValues();
                console.log(vals);
                //ajax交互后台
            }
        }
    }],
});
JE.win({
    title:'Simple Form',
    autoShow:true,
    width:400,
    height:200,
    items:form
})

//通过平台API演示
//平台API中的form，布局默认是column，而且直接是窗口展示，简化了很多操作
//form中提供了两个常用按钮：确定，取消
JE.formWin({
    title:'Simple Form',
    width:400,
    height:200,
    items:[{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],
    //确认方法，
    fn:function(vals){
        console.log(vals);
        //return false;//返回false，取消关闭窗口
    }
})

Menu组件

菜单组件，常见的使用场景为：按钮添加菜单，列表数据右键菜单

示例代码：

//我们以列表组件作为演示

//创建列表右键菜单
var menu = Ext.create('Ext.menu.Menu', {
    shadow: false,
    plain: true,
    cls: 'je-menu-item34h je-menu-arrow je-menu-arrow-t',
    items: [
        {text:'新增',itemId:'insert'},
        {text:'删除',itemId:'remove'},
        {text:'保存',itemId:'save'}
    ],
    defaults: {
        handler: function (item) {
            var _menu = item.ownerCt;
            //获得标记数据，业务处理
            if(_menu.activeRecord){
                JE.msg(_menu.activeRecord.get('email'));
            }else{
            //无数据时，业务处理
                JE.msg(item.text);
            }
        }
    }
})


//列表数据集
var store = Ext.create('Ext.data.Store', {
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',//内存代理，读取本地数据，也可以配置ajax代理，可以查看
        reader: {
            type: 'json',
            root: 'items'//列表展示的数据项配置
        }
    }
});
//创建列表
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    tbar:[{
        text:'菜单按钮',//菜单按钮
        menu:[{
            text:'菜单项1',
            handler:function(){
                JE.msg(this.text);
            }
        },{
            text:'菜单项2'
        },{
            text:'菜单项3'
        }]
    }],
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 ,
        renderer: function(value) {//列表格式化方法
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
        }},
        { text: 'Phone', dataIndex: 'phone' }
    ],
    listeners:{
        //容器内没有右键
        containercontextmenu:function(view,e){
            e.stopEvent();
            //显示新增
            var showItems = ['insert'];
            menu.items.each(function(item){
                item.setVisible(showItems.indexOf(item.itemId) != -1);
            })
            //删除标记的数据
            delete menu.activeRecord;
            menu.showAt(e.getXY());
        },
        //数据项右键菜单
        itemcontextmenu:function(view, record, item, index, e, eOpts ){
            e.stopEvent();
            //显示删除，保存
            var showItems = ['remove','save'];
            menu.items.each(function(item){
                item.setVisible(showItems.indexOf(item.itemId) != -1);
            })
            //标记数据
            menu.activeRecord = record;
            menu.showAt(e.getXY());
        }
    }
});
JE.win({
    title:'Menu Demo',
    width:700,
    height:400,
    autoShow:true,
    items:grid
})

Ajax组件

使用平台的JE.ajax()方法，因为对ajax进行了大量封装，API参考如下

JE.ajax(Object) : Object | void

• 说明：ajax数据请求，默认同步请求，同步请求直接返回请求数据，异步请求需要在回调中获取

• 参数说明：Object

• 返回数据说明：Object | void

  返回请求的业务数据，系统默认通过JE.getAjaxData():Object格式化数据

• 示例：

  //返回对象
  var obj = JE.ajax({url:'',params:{}});
  //返回字符串
  var str = JE.ajax({url:'',params:{},text:true});
  //异步请求
  JE.ajax({
    url:'',
    params:{async:true},
    success:function(response){
        //请求返回的数据
        var text = response.responseText;
        //格式化请求返回的数据，系统默认处理
        var obj = JE.getAjaxData(response);
    }
  });