ExtJS初体验

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

这两天体验了一下，如图：

 

其中字典类型组件代码：

//字典类型grid panel
	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的特点只需加两句代码就可以搞定，如下代码中的39,40行，

 

//字典类型添加、修改表单
	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]*$/,
		   regexText : '亲,请输入数字好吗？',</span>
		    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%'
		}]
	});

是不是感觉很简单，来看下效果：

 

 

 

                                           学习的路上，与君共勉！