Ext.ux.form.SearchField bug in MVC enviroment?

[icebergdelphi]

Hello, I have a doubt, the ux.searchfield not work properly in MVC environment, if i assign the grid store, to make a query, an error rise in searchfield: Store.getProxy is not a function, but if I make an instance of the Store it works perfectly. So is a bug or how I can solve this problem?
Thanks and i hope you can help me.:-?

this is My MVC Code with no Store Instance, and the SearchField Rise an error:Store.getProxy is not a function


Ext.define('Mocaci.view.Ciudadanos.GrdCiudadanos',{
extend: 'Ext.grid.Panel',
alias:'widget.gridCiudadanos',
store:'Ciudadanos.Ciudadanos', ////MVC an inside Controller
border: false,
listeners: {
'selectionchange': function(view, records) {
this.down('#delete').setDisabled(!records.length);//Se Habilita el Boton Delete
}
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns : [//Definimos las Columnas del Grid y las Columnas de la Tabla
{header:"Id",dataIndex:"IdCiudadano",flex:1,hidden:true},
{header:"CURP",dataIndex:"Curp",flex:1},
{header:"IFE",dataIndex:"IFE",flex:1},
{header:"Ape. Paterno",dataIndex:"apellidop",flex:1},
{header:"Ape. Materno",dataIndex:"apellidom",flex:1},
{header:"Nombre",dataIndex:"nombre",flex:1}

],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
itemId: 'Add',
text: 'Agregar',
iconCls: 'add',
action:'actAgregar'//Accion manejado por el Controlador
},'-',{
itemId: 'edit',
text: 'Editar',
iconCls: 'edit',
scope: this,
action:'actEditar'
},'-',{
itemId: 'delete',
text: 'Borrar',
iconCls: 'delete',
disabled: true,
action:'actBorrar' //Accion manejado por el Controlador
},'-',{
xtype: 'searchfield',
emptyText: 'Buscar Por Nombres',
store:me.store,
params: {start: 0, limit: 100 },
width: 400,
fieldLabel: 'Buscar',
labelWidth: 50
}


]
},
{
xtype: 'pagingtoolbar',//Barra Paginadora al fondo del Grid
dock: 'bottom',
displayInfo: true,
store:me.store
}
],

});

me.callParent(arguments);
me.store.load({//Cargamos el Store, al crear la ventana
params:{
start:0,
limit: 100 //Muestra hasta 100 Registros Maximo
}
});

}


});


This is My code with a store instance, with this code the searchfield works perfectly, but some times, not alwalys, the instance of the store rise a new error C is not a constructor:


var storeCiudadanos=Ext.create('Mocaci.store.Ciudadanos.Ciudadanos'); // New Instance.
Ext.define('Mocaci.view.Ciudadanos.GrdCiudadanos',{
extend: 'Ext.grid.Panel',
alias:'widget.gridCiudadanos',
store:storeCiudadanos, //'Ciudadanos.Ciudadanos', //Store with new instance.
border: false,
listeners: {
'selectionchange': function(view, records) {
this.down('#delete').setDisabled(!records.length);//Se Habilita el Boton Delete
}
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns : [//Definimos las Columnas del Grid y las Columnas de la Tabla
{header:"Id",dataIndex:"IdCiudadano",flex:1,hidden:true},
{header:"CURP",dataIndex:"Curp",flex:1},
{header:"IFE",dataIndex:"IFE",flex:1},
{header:"Ape. Paterno",dataIndex:"apellidop",flex:1},
{header:"Ape. Materno",dataIndex:"apellidom",flex:1},
{header:"Nombre",dataIndex:"nombre",flex:1}

],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
itemId: 'Add',
text: 'Agregar',
iconCls: 'add',
action:'actAgregar'//Accion manejado por el Controlador
},'-',{
itemId: 'edit',
text: 'Editar',
iconCls: 'edit',
scope: this,
action:'actEditar'
},'-',{
itemId: 'delete',
text: 'Borrar',
iconCls: 'delete',
disabled: true,
action:'actBorrar' //Accion manejado por el Controlador
},'-',{
xtype: 'searchfield',
emptyText: 'Buscar Por Nombres',
store:me.store,
params: {start: 0, limit: 100 },
width: 400,
fieldLabel: 'Buscar',
labelWidth: 50
}


]
},
{
xtype: 'pagingtoolbar',//Barra Paginadora al fondo del Grid
dock: 'bottom',
displayInfo: true,
store:me.store
}
],

});

me.callParent(arguments);
me.store.load({//Cargamos el Store, al crear la ventana
params:{
start:0,
limit: 100 //Muestra hasta 100 Registros Maximo
}
});

}


});

[scottmartin]

If you add 'requires' to your define, does this help? You need to let know how/where to find your store.

Regards,
Scott.

[vadimv]

If it's in MVC then probably the store is declared in controller in store configs, I suppose, if so, then the require won't help, and may be optional, knowing that using a instance is working....,the problem might be in the searchfield ux and how it's given to it the store. Have looked in it's code and there's no lookup in case if the store is given as string, so I think you better give the store to searchfiled by using the store manager or Ext.getStore.

[icebergdelphi]

Thanks scottmartin, but i'm working in MVC enviroment, the require won't help, my stores are located in the Controller file.
Thanks vadimv, yep my Stores are inside the controller declarations:


Ext.define('Mocaci.controller.Ciudadanos.Ciudadanos',{
extend : 'Ext.app.Controller',
stores : ['Ciudadanos.Ciudadanos','Entidad.Entidad','Municipios.QryComboMunicipios', 'Localidad.QryComboLocalidad'],
models : ['Ciudadanos.Ciudadanos','Entidad.Entidad','Municipios.QryComboMunicipios', 'Localidad.QryComboLocalidad'],
views : ['Ciudadanos.GrdCiudadanos','Ciudadanos.CapturaEdicionCiudadanos'],


i think is a Searchfield BUG, but as you say vadimv, i'm gonna try a storemanager. Till now the only solution but not the best is create a new instance of the store.
here is the Searchfield code and the line where rise the error:



Ext.define('Ext.ux.form.SearchField', {
extend: 'Ext.form.field.Trigger',

alias: 'widget.searchfield',

trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',

trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

hasSearch : false,
paramName : 'query',

initComponent: function(){
this.callParent(arguments);
this.on('specialkey', function(f, e){
if(e.getKey() == e.ENTER){
this.onTrigger2Click();
}
}, this);
},

afterRender: function(){
this.callParent();
this.triggerEl.item(0).setDisplayed('none');
},

onTrigger1Click : function(){
var me = this,
store = me.store,
proxy = store.getProxy(),
val;

if (me.hasSearch) {
me.setValue('');
proxy.extraParams[me.paramName] = '';
proxy.extraParams.start = 0;
store.load();
me.hasSearch = false;
me.triggerEl.item(0).setDisplayed('none');
me.doComponentLayout();
}
},

onTrigger2Click : function(){
var me = this,
store = me.store, >>>>>>>>RISE ERROR>>>>>
proxy = store.getProxy(),>>>>>>>>RISE ERROR>>>>>
value = me.getValue();

if (value.length < 1) {
me.onTrigger1Click();
return;
}
proxy.extraParams[me.paramName] = value; >>>>>>RISE ERROR>>>>>>
proxy.extraParams.start = 0;
store.load();
me.hasSearch = true;
me.triggerEl.item(0).setDisplayed('block');
me.doComponentLayout();
}
});

Thanks both.

[vadimv]

I suggest you to use Ext.getStore, in this case, the best solution. Better than overriding(or modifing) the searchfield in order to add support for storeIds, eventually lookup will be used here too.

Vadim.