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%'
}]
});

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

 


 


 

                                           学习的路上，与君共勉！