Hi everyone, maybe I'm doing something totally wrong, but you can see in this code, how I use one model and a store to do "things" in the listeners of the checkbox of the Main.js view.
Well, if I want to put these store and model with the MVC architecture, with the folders "model" and "store" and so on, I don't really know how to reference them correctly, because I always have the error that in the listeners, there is a Reference Error.
What am I doing wrong? How I could input a declaration in which I take the store and the model for sure?
Thank you very much in advance. I know is a dumb issue, but I'm getting desperate with this.
Code:
Ext.define("modelomisOpciones", {
extend: "Ext.data.Model",
config: {
fields: [
{name: 'option', type: 'string'},
]
}
});
var storemisOpciones = Ext.create('Ext.data.Store', {
storeId: "storemisOpciones",
model: "modelomisOpciones",
proxy: {
type: 'ajax',
url: 'app/store/misOpciones.json',
reader: {
type: 'json'
},
},
});
Ext.define('Beetoom.view.Main', {
extend: 'Ext.Container',
config: {
items: [
{
// ACTION
xtype: 'checkboxfield',
label: 'Action',
listeners: {
check: function(){
console.log("Añadiendo...");
var index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
storemisOpciones.add({option: 'Action'});
console.log("Action se ha marcado");
index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
console.log(storemisOpciones.getAt(index));
storemisOpciones.sync();
},
uncheck: function(){
console.log("Quitando...");
var index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
var record = storemisOpciones.findRecord('option', 'Action');
storemisOpciones.remove(record);
console.log("Action se ha quitado");
index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
storemisOpciones.sync();
}
}
},
{
// ADVENTURE
xtype: 'checkboxfield',
label: 'Adventure',
listeners: {
check: function(){
console.log("Añadiendo...");
var index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
storemisOpciones.add({option: 'Adventure'});
console.log("Adventure se ha marcado");
index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
console.log(storemisOpciones.getAt(index));
storemisOpciones.sync();
},
uncheck: function(){
console.log("Quitando...");
var index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
var record = storemisOpciones.findRecord('option', 'Adventure');
storemisOpciones.remove(record);
console.log("Adventure se ha quitado");
index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
storemisOpciones.sync();
}
}
},
{
// NOIR
xtype: 'checkboxfield',
label: 'Noir',
listeners: {
check: function(){
console.log("Añadiendo...");
var index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
storemisOpciones.add({option: 'Noir'});
console.log("Noir se ha marcado");
index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
console.log(storemisOpciones.getAt(index));
storemisOpciones.sync();
},
uncheck: function(){
console.log("Quitando...");
var index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
var record = storemisOpciones.findRecord('option', 'Noir');
storemisOpciones.remove(record);
console.log("Noir se ha quitado");
index = storemisOpciones.getCount() - 1;
console.log("Indice: " + index);
storemisOpciones.sync();
}
}
},
{
xtype: 'button',
text: 'Ver!',
handler: ledoy = function(e) {
console.log("Se han metido " + storemisOpciones.getCount() + " opciones");
Ext.Viewport.setActiveItem({
// xclass: ''
xtype: 'list',
itemTpl: '{option}',
store: storemisOpciones
});
}
}
]
}
});