patternjavascriptMinor
Ext JS: Avoid duplication
Viewed 0 times
duplicationextavoid
Problem
I have ext_scaffold (
and I have another admin file where grids (answer):
```
var answers_datastore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/answers/index_all_for_question_id/?format=ext_json',
method: 'GET'}),
reader: new Ext.data.JsonReader({
root: 'answers',
id: 'id',
totalProperty: 'results'
},[
{name: 'text', mapping: 'answer.text'},
{name: 'email', mapping: 'answer.respondent.email'}
])
});
var answersGrid = new Ext.grid.GridPanel({
id: 'answers_grid',
store: answers_datastore,
frame: true,
columns: [
{id: 'text', header: "Answer ↓", width: 500, sortable: true, dataIndex: 'text'},
{id: 'email', header: "Email", width: 300, sortable: true, dataIndex: 'email'}
],
listeners: {
rowdblclick: function(answersGrid, rowI, event) {
question.js). When I row click I get answers on this question, so'rowselect': function(sm, row, rec) {
store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/answers/index_all_for_question_id/' + rec.data.id + '?format=ext_json',
method: 'GET'}),
reader: new Ext.data.JsonReader({
root: 'answers',
id: 'id',
totalProperty: 'results'
}, [
{name: 'text', mapping: 'answer.text'},
{name: 'email', mapping: 'answer.respondent.email'}
])
});
grid = Ext.getCmp('answers_grid');
grid.reconfigure(store, new Ext.grid.ColumnModel([
{id: 'text', header: "Answer ↓", width: 500, sortable: true, dataIndex: 'text'},
{id: 'email', header: "Email", width: 300, sortable: true, dataIndex: 'email'}
]));
grid.store.load();
scaffoldPanel.selectedRecordId = rec.data.id;
scaffoldPanel.getFormPanel().getForm().loadRecord(rec);
}and I have another admin file where grids (answer):
```
var answers_datastore = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/answers/index_all_for_question_id/?format=ext_json',
method: 'GET'}),
reader: new Ext.data.JsonReader({
root: 'answers',
id: 'id',
totalProperty: 'results'
},[
{name: 'text', mapping: 'answer.text'},
{name: 'email', mapping: 'answer.respondent.email'}
])
});
var answersGrid = new Ext.grid.GridPanel({
id: 'answers_grid',
store: answers_datastore,
frame: true,
columns: [
{id: 'text', header: "Answer ↓", width: 500, sortable: true, dataIndex: 'text'},
{id: 'email', header: "Email", width: 300, sortable: true, dataIndex: 'email'}
],
listeners: {
rowdblclick: function(answersGrid, rowI, event) {
Solution
The trouble with your question is that the code resembles more config than coding and there is nothing wrong with it except that it is not DRY between those 2 files.
It seems that Ext JS supports
It seems that Ext JS supports
require as of version 4, so you simply need to extract the common logic/config into a file that you will require into both places.Context
StackExchange Code Review Q#2021, answer score: 3
Revisions (0)
No revisions yet.