ExtJS初体验

最近公司的一个系统有用到Extjs框架,对于之前完全用JQuery的js插件的我来说,对Extjs的api并不熟悉。extjs是个富客户端框架,一般用来做后台管理系统,封装了非常多的控件,很庞大,很复杂,学习门槛高。jquery是一个前后台都可以用的框架,是对js的封装,js轻量级框架。没有封装任何控件,学习曲线小,程序员和前端必须要掌握的。 这两天体验了一下,如图:

其中字典类型组件代码:

var group_grid = Ext.create('Ext.grid.Panel', {  
        title:'字典类型列表',  
        region:'west',  
        width:'50%',  
        columnLines : true,  
        striped : true,  
        store : group_store,  
        selModel:group_selModel,  
        columns : [ {  
            xtype : 'rownumberer'  
        }, {  
            text : '编号',  
            dataIndex : 'dim_id',  
            sortable:false,  
            hideable : false,  
            flex : 1  
        }, {  
            text : '名称',  
            dataIndex : 'dim_name',  
            sortable:false,  
            hideable : false,  
            flex : 1  
        }, {  
            text : '描述',  
            dataIndex : 'dim_description',  
            sortable:false,  
            hideable : false,  
            flex : 1  
        }],  
        bbar : Ext.create('Ext.PagingToolbar', {  
            store : group_store,  
            displayInfo : true  
        }),  
        tbar: [{  
            text: '新增',  
            handler: function() {  
                Ext.getCmp('group_add').show();  
                Ext.getCmp('group_edit').hide();  
                group_win.setTitle('新增字典类型');  
                group_Form.form.reset();  
                Ext.getCmp('group_dim_id').setValue(-1);//新增时默认为-1,空字符会报错  
                group_win.show();  
            }  
        },{  
            text: '修改',  
            handler: function() {  
                var selections = group_selModel.getSelection();  
                if (selections.length == 0) {  
                    showWarningMsg("请先选择一条记录!");  
                    return;  
                }  
                group_Form.loadRecord(selections[0]);  
                Ext.getCmp('group_add').hide();  
                Ext.getCmp('group_edit').show();  
                group_win.setTitle('修改字典类型');  
                group_win.show();  
            }  
        },{  
                text: '删除',  
                handler: function() {  
                    var selections = group_selModel.getSelection();  
                    if (selections.length == 0) {  
                        showWarningMsg("请先选择一个数据字典!");  
                        return;  
                    }  

当我们在左侧点击编号为3的选择框时,会通过ajax方式从后台取数据显示在右侧维度字典列表组件中,如图

通过ajax取数据的代码,返回的数据是json形式的:

//数据字典store  
    var items_store = Ext.create('Ext.data.Store', {  
        fields:['sor_id', 'sor_name', 'sor_state','sor_attr', 'sor_description', 'sor_loadtime'],  
        proxy : {  
            type : 'ajax',  
            url : ctx + '/data/getItemsByTableName.do',  
            reader : {  
                type : 'json',  
                totalProperty : 'totalCount',  
                root : 'data'  
            }  
        }  
    });  

从上面的例子可以看到ExtJs框架非常的组件化,Ext JS库有着丰富且漂亮的UI组件,大大缩短了我们的开发周期,而且组件拥有漂亮的布局,经过简单的调用与配置就可以实现不错的界面布局。ExtJS提供的各种组件可以用更加标准的方式展示数据降低了开发难度。

继续演示ExtJS给我们带来的便利,当我们在右侧点击新增时,要求数据字典的值必须为值,否则弹框提醒用户,由于Extjs的特点只需加两句代码就可以搞定,如下代码中的标记处1和标记处2,

//字典类型添加、修改表单  
    var item_Form = Ext.create('Ext.form.Panel', {  
        width : 400,  
        height : 200,  
        frame : true,  
        layout:'anchor',  
        labelWidth:60,  
        items: [{  
            xtype : 'hiddenfield',  
            id:'sor_id',  
            name : 'sor_id',  
            anchor:'90%'  
        },  
        {  
            xtype : 'hiddenfield',  
            id:'dim_id',  
            name : 'dim_id',  
            anchor:'90%'  
        },  
            {  
            xtype : 'textfield',  
            id:'dim_name',  
            name : 'dim_name',  
            fieldLabel:'表名',  
            enabled:false,  
            anchor:'90%'  
        },{  
            xtype : 'textfield',  
            id : 'sor_name',  
            name : 'sor_name',  
            fieldLabel:'名称',  
            allowBlank:false,  
            anchor:'90%'  
        },{  
            xtype : 'textfield',  
            id : 'sor_state',  
            name : 'sor_state',  
            fieldLabel:'值',<span style="font-size:14px;color:#ff0000;">  
           regex: /^[0-9]*$/, (标记处1)
           regexText : '亲,请输入数字好吗?',</span>    (标记处2)
            allowBlank:false,  
            anchor:'90%'  
        },{  
            xtype : 'textfield',  
            id : 'sor_attr',  
            name : 'sor_attr',  
            fieldLabel:'属性',  
            allowBlank:true,  
            anchor:'90%'  
        },{  
            xtype : 'textfield',  
            id : 'sor_description',  
            name : 'sor_description',  
            fieldLabel:'描述',  
            allowBlank:true,  
            anchor:'90%'  
        }]  
    });  

是不是感觉很简单,来看下效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

eclipse集成html5插件

1. 在线安装:Help->Install New Software...->Add...-> Name: "Aptana",  Location: http:...

27480
来自专栏LinXunFeng的专栏

RxSwift + MJRefresh 打造自动处理刷新控件状态

25730
来自专栏c#开发者

打包并自动安装sql数据库

打包,并自动安装SQL数据库 应一位网友的需求,并修正了MVP李洪根".NET平台下WEB应用程序的部署(安装数据库和自动配置)"中的osql用法错误,已测试通...

33130
来自专栏技术博客

Knockout.Js官网学习(简介)

最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下。然后刚刚发现在建立a...

14220
来自专栏数据结构与算法

My Vim

noip考完啦 不管成绩怎么样,以后不用Dev啦。 尝试一下传说中的Vim 我的Vim配置 Vim8.0 https://files.cnblogs.com/f...

63370
来自专栏菩提树下的杨过

ExtJs学习笔记(24)-Drag/Drop拖动功能

直接给代码吧,主要重点已经在代码里注释了 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio...

24990
来自专栏Google Dart

为Flutter应用程序添加交互性 顶

你如何修改你的应用程序,使其对用户输入做出反应? 在本教程中,您将为仅包含非交互式小部件的应用添加交互性。 具体来说,您将通过创建一个管理两个无状态小部件的自定...

23820
来自专栏一个会写诗的程序员的博客

bootstrap-table 前端分页,刷新事件代码实例

参考文档: http://bootstrap-table.wenzhixin.net.cn/

1.3K10
来自专栏hbbliyong

WPF命令(Command)介绍、命令和数据绑定集成应用

要开始使用命令,必须做三件事:                                               一:定义一个命令       ...

58130
来自专栏Jerry的SAP技术分享

BSP和JSP里的UI元素ID生成逻辑

WebClient UI渲染出来的DOM元素的这些C#_W#格式的id是在哪行ABAP代码被生成出来的?

36350

扫码关注云+社区

领取腾讯云代金券