最近公司的一個(gè)系統(tǒng)有用到Extjs框架舰始，對(duì)于之前完全用JQuery的js插件的我來說，對(duì)Extjs的api并不熟悉。extjs是個(gè)富客戶端框架厕氨，一般用來做后臺(tái)管理系統(tǒng)，封裝了非常多的控件汹粤，很龐大命斧，很復(fù)雜，學(xué)習(xí)門檻高嘱兼。jquery是一個(gè)前后臺(tái)都可以用的框架国葬，是對(duì)js的封裝，js輕量級(jí)框架芹壕。沒有封裝任何控件汇四，學(xué)習(xí)曲線小，程序員和前端必須要掌握的踢涌。
這兩天體驗(yàn)了一下通孽，如圖：
其中字典類型組件代碼：
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 : '編號(hào)',
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);//新增時(shí)默認(rèn)為-1，空字符會(huì)報(bào)錯(cuò)
group_win.show();
}
},{
text: '修改',
handler: function() {
var selections = group_selModel.getSelection();
if (selections.length == 0) {
showWarningMsg("請(qǐng)先選擇一條記錄睁壁！");
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("請(qǐng)先選擇一個(gè)數(shù)據(jù)字典背苦！");
return;
}
當(dāng)我們?cè)谧髠?cè)點(diǎn)擊編號(hào)為3的選擇框時(shí)，會(huì)通過ajax方式從后臺(tái)取數(shù)據(jù)顯示在右側(cè)維度字典列表組件中潘明，如圖
通過ajax取數(shù)據(jù)的代碼行剂，返回的數(shù)據(jù)是json形式的：
//數(shù)據(jù)字典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組件钳降，大大縮短了我們的開發(fā)周期厚宰，而且組件擁有漂亮的布局，經(jīng)過簡單的調(diào)用與配置就可以實(shí)現(xiàn)不錯(cuò)的界面布局牲阁。ExtJS提供的各種組件可以用更加標(biāo)準(zhǔn)的方式展示數(shù)據(jù)降低了開發(fā)難度固阁。
繼續(xù)演示ExtJS給我們帶來的便利，當(dāng)我們?cè)谟覀?cè)點(diǎn)擊新增時(shí)城菊，要求數(shù)據(jù)字典的值必須為值备燃，否則彈框提醒用戶，由于Extjs的特點(diǎn)只需加兩句代碼就可以搞定凌唬，如下代碼中的標(biāo)記處1和標(biāo)記處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]*$/, （標(biāo)記處1）
regexText : '親,請(qǐng)輸入數(shù)字好嗎客税？',</span> (標(biāo)記處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%'
}]
});
是不是感覺很簡單况褪，來看下效果：
