ExtJS は jQuery よりも冗長で、jQuery に比べて何かを行うために多くのことを書く必要があります。jQuery と ExtJS を比較すべきではないことはわかっていますが、ExtJS は最も完全な Javascript UI フレームワークであり、jQuery はライブラリです。しかし、jQuery をかなり長い間使用した後、ExtJS に移行すると生産性が低下するようです。
var panel = Ext.create('Ext.panel.Panel',{
height: 500,
width: 500,
renderTo: Ext.getBody(),
...
ここでいくつかのキーストロークを保存できませんか? フォームやその他のコンポーネントでテキストボックスを作成する場合も同様です。
編集
@詳細コード:
function createPanel(){
var panel = Ext.create('Ext.panel.Panel',{
height: 500,
width: 500,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'tabpanel',
itemId: 'mainTabPanel',
flex: 1,
items: [{
xtype: 'panel',
title: 'Users',
id: 'usersPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
tbar: [{
xtype: 'button',
text: 'Edit',
itemId: 'editButton'
}],
items: [{
xtype: 'form',
border: 0,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Email',
allowBlank: false
}],
buttons: [{
xtype: 'button',
text: 'Save',
action: 'saveUser'
}]
}, {
xtype: 'grid',
flex: 1,
border: 0,
columns: [{
header: 'Name',
dataIndex: 'Name',
flex: 1
}, {
header: 'Email',
dataIndex: 'Email'
}],
store: Ext.create('Ext.data.Store',{
fields: ['Name', 'Email'],
data: [{
Name: 'Indian One',
Email: 'one@qinfo.com'
}, {
Name: 'American One',
Email: 'aone@info.com'
}]
})
}]
}]
},{
xtype: 'component',
itemId: 'footerComponent',
html: 'Footer Information',
extraOptions: {
option1: 'test',
option2: 'test'
},
height: 40
}]
});
}
@コンパクトコード
// Main global object holding
var q = {
// config object templates
t: {
layout: function(args) {
args = args || {};
var o = {};
o.type = args.type || 'vbox';
o.align = args.align || 'stretch';
return o;
},
panel: function(args) {
args = args || {};
var o = {};
o.xtype = 'panel';
o.title = args.title || null;
o.id = args.id || null;
o.height = args.height || null;
o.width = args.width || null;
o.renderTo = args.renderTo || null;
o.tbar = args.tbar || null;
o.layout = args.layout || q.t.layout();
o.items = args.items || [];
return o;
},
button: function(text, args) {
args = args || {};
var o = {};
o.xtype = 'button';
o.text = text;
o.itemId = args.itemId;
return o;
},
tabPanel: function(args) {
args = args || {};
var o = {};
o.xtype = 'tabpanel';
o.itemId = args.itemId;
o.flex = args.flex;
o.layout = args.layout;
o.tbar = args.tbar;
o.items = args.items || [];
return o;
},
form: function(args) {
args = args || {};
var o = {};
o.xtype = 'form';
o.border = args.border || 0;
o.items = args.items || [];
o.buttons = args.buttons || [];
return o;
},
grid: function(args) {
args = args || {};
var o = {};
o.xtype = 'grid';
o.flex = args.flex || 1;
o.border = args.border || 0;
o.columns = args.columns || [];
o.store = args.store || null;
return o;
},
gColumn: function(header, dataIndex, args) {
args = args || {};
var o = {};
o.header = header;
o.dataIndex = dataIndex;
o.flex = args.flex || undefined;
return o;
},
fTextBox: function(label, optional, args) {
args = args || {};
var o = {};
o.xtype = 'textfield';
o.fieldLabel = label;
o.allowBlank = optional || true;
return o;
},
component: function(args) {
args = args || {};
var o = {};
o.xtype = 'component';
o.itemId = args.itemId;
o.html = args.html;
o.extraOptions = args.extraOptions;
return o;
}
},
// Helper methods for shortening Ext.create for containers.
h: {
panel: function(args) {
return Ext.create('Ext.panel.Panel',
args);
}
}
};
function createPanel(){
var panel = q.h.panel({
height: 500,
width: 500,
renderTo: Ext.getBody(),
layout: q.t.panel(),
items: [q.t.tabPanel({
itemId: 'mainTabPanel',
items: [q.t.panel({
title: 'Users',
id: 'usersPanel',
tbar: [
q.t.button('Edit',{itemId: 'editButton'})
],
items: [
q.t.form({
items: [ q.t.fTextBox('Name') , q.t.fTextBox('Email')],
buttons: [ q.t.button('Save', {action:'saveUser'} )]
}),
q.t.grid({
columns: [ q.t.gColumn('Name','name'), q.t.gColumn('Email', 'email', {flex: null}) ],
store: Ext.create('Ext.data.Store',{
fields: ['name', 'email'],
data: [{
name: 'Indian One',
email: 'one@qinfo.com'
}, {
name: 'American One',
email: 'aone@info.com'
}]
})
})]
})]
}),
q.t.component({
itemId: 'footerComponent',
html: 'Footer Information',
extraOptions: {
option1: 'test',
option2: 'test'
},
height: 40
})
]
});
}
@Compact コードを使用することで、たとえば「createPanel」という関数の行数を約 40% 節約できます。全員にさまざまなアイデアを考えてもらいたかったので、構成オブジェクトを作成することは私の最初のアイデアの 1 つでしたが、オーバーライドできるものにしたかったので、上記のアプローチを思いつきました。
関数と Firebug (プロファイリング機能) ごとの両方のベンチマークを行いましたが、非コンパクト バージョンでは 178 ミリ秒かかり、コンパクト バージョンでは 184 ミリ秒かかりました。
はい、確かにもう少し時間がかかります。この例では 8 ミリ秒以上の価値があるように見えますが、このアプローチでエンタープライズ アプリケーションをいつ構築するかはわかりません。より良いアプローチはありますか? はいの場合は、共有してください。