2010-10-10 9 views
0

Quand je fais quelques composants dans ma page web, j'ai trouvé là tellement de codes en double, par exemple, dans ma page je veux faire deux graphiques. La plus grande différence d'entre eux est le magasin de données et le titre, mais ils ont beaucoup de mêmes attributs.réutiliser les codes javascript (réduire les codes en double)

Je le fais par une nouvelle définir instance de Ext.chart:

var chart1=new Ext.chart.LineChart{config1}; 

var chart2=new Ext.chart.LineChart{config2}; 

Il y a tellement de même contenu dans le config1 et config2, est-il des idées pour éviter cela?

BTW, j'ai pensé le mécanisme d'extension en ext, mais je ne peux pas obtenir plus de détails sur la façon de l'utiliser uniquement à partir de l'API ext3.2.

Répondre

1

Vous pouvez étendre config

var config = { 
    // do you shared config here 
} 

// and apply any different/extending configs here 
var config1 = Ext.apply(config, { title: "Title of config 1" } 
var config2 = Ext.apply(config, { title: "Title of config 2" } 

var chart1 = new Ext.chart.LineChart(config1); 
var chart2 = new Ext.chart.LineChart(config2); 

Et si vous voulez encore plus court:

var chart1 = new Ext.chart.LineChart(Ext.apply(config, { 
    title: "Title of config 1" 
}); 
var chart2 = new Ext.chart.LineChart(Ext.apply(config, { 
    title: "Title of config 2" 
}); 

Edit: Avec Ext.extend:

Ext.chart.LineChart = Ext.extend(Ext.chart.LineChart, { 
    // put your shared config in here 
}); 

var chart1 = new Ext.chart.LineChart({ 
    title: "Title of chart 1", 
    store: new Ext.data.Store({ ... }); 
}); 
var chart2 = new Ext.chart.LineChart({ 
    title: "Title of chart 2", 
    store: new Ext.data.Store({ ... }); 
}); 
+0

Merci, c'est un bonne manière. Je veux aussi savoir si cela peut être mis en œuvre par le mécanisme d'extension? – hguser

+0

Oui, vous pouvez. Vous pouvez déjà placer toutes les config par défaut dans le LineChart, puis seulement écraser celles qui ont été modifiées – Tseng

Questions connexes