HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Ext JS: Avoid duplication

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
duplicationextavoid

Problem

I have ext_scaffold (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 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.