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添加。

常用的工具条按钮组件

快捷方式 xtype class 描述
-> tbfill Ext.toolbar.Fill 使用右对齐容器
- tbseparator Ext.toolbar.Separator 添加垂直分隔条在工具栏之间
空格 tbspacer Ext.toolbar.Spacer 添加横空格在元素之间

示例代码:

//工具条的按钮
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

参数名 类型 必填 默认值 说明
url String 请求链接
method String POST 请求类型
params Object 请求参数
async Boolean false 异步请求
timeout Number 30000 请求超时时间,毫秒
success Function 系统默认 请求成功回调
failure Function 系统默认 请求失败回调
text Boolean false 返回值不做格式化处理,返回原始数据
mask Boolean false 请求时的遮罩层
maskMsg String 正在请求,请稍等… 遮罩层文字
maskCmp Ext组件 激活窗体或者window.body 遮罩层的父元素
  • 返回数据说明: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);
      }
    });
最后编辑: 肖海杰  文档更新时间: 2024-08-21 10:58   作者:肖海杰