I work with extjs 4,
I want to do autocomplete with combobox
meaning when I entered a text in the combobox a request will send to database in order to display a list of emplyees ( in my case ) according to text entered in the combobox
in emplyeesModel.js I have
Ext.define('GenericComboModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'label', type: 'string'},
{name: 'value', type: 'string'}
]
});
var employeesStore= Ext.create('Ext.data.Store', {
model: 'GenericComboModel',
proxy: {
type: 'ajax',
url: 'employeesService',
reader: {
type: 'json',
root: 'users'
}
}
});
in emplyeesView.js I have
{
xtype: 'combobox',
store: employeesStore,
displayField: 'label',
valueField: 'value',
queryMode: 'remote',
fieldLabel: 'test',
editable: false,
id: 'employees_IdCombo',
hideTrigger:true
queryParam: 'searchStr'
}
in the service employeesService.java I have
public class employeesService{
public List<employees> getEmployeesListByLibelle(String libelle) {
// TODO Auto-generated method stub
Query query = getSession().createQuery("FROM employees emp where emp.libelle=:libelle ");
query.setParameter("libelle", libelle);
List result = query.list();
if(result.size()!=0 && result !=null)
return result;
else
return null;
}
}
but when I run my example I have this errror :
GET http://localhost:8080/employeesService.getEmployeesListByLibelle?_dc=1376728740208&searchStr=testSearch&page=1&start=0&limit=25&filter=%5B%7B%22property%22%3A%22label%22%7D%5D 404 (Introuvable) ext-all-rtl.js:21
Related
I have a list reading from a Json store which contains a grouper on a field of type int. This field is called "req" in the sample model below. However, rather than group by the int value, I would like to assign a text value instead, so for example, in case of "1" I would group by "Yes" and in case of "0" I would group by "No". The conversion can be hard coded as it will not change. Where do I make this conversion in my code? Thanks for your help
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyData'
],
config: {
model: 'MyApp.model.MyData',
storeId: 'MyStore',
proxy: {
type: 'ajax',
url: '/path/to/data.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'req',
sortProperty: 'req'
},
groupDir: 'DESC'
}
});
Model:
Ext.define('Mypp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'example',
type: 'string'
},
{
name: 'req',
type: 'int'
}
]
}
});
Add to the Model a calculated field with convert() function:
Ext.define('Mypp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'example',
type: 'string'
},
{
name: 'req',
type: 'int'
},
{
name: 'reqDisplay',
type: 'string',
convert: function (value, record) {
if (value == null) {
var req = record.get('req');
value = req ? 'Yes' : 'No'
}
return value;
}
}
]
}
});
... and use it instead
grouper: {
property: 'reqDisplay',
sortProperty: 'reqDisplay'
},
Cheers, Oleg
I have a combobox, i need to populate data from the server. In the server side i have the following data to be displayed.
PersonID
PersonFName
PersonLName
In the combobox, i need to display the text as PersonFName + PersonLName (Like James Smith- This is what it will display in the drop down) , and when a user selects a record, I need to display the corresponding PersonID (Like Person with PersonFName and PersonLName has the PersonID of 1) of that user.
I am unable to figure this out, here's my code
View :
{
xtype: 'combobox',
id: 'personcombo',
readOnly: false,
selectOnFocus: true,
forceSelection: true,
store: 'Person'
}
Store :
Ext.define('MyApp.store.PersonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Person'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.Person',
proxy: {
type: 'ajax',
api: {
read: 'person.php',
create: 'person.php'
},
reader: {
type: 'array'
}
}
}, cfg)]);
}
});
Model :
Ext.define('MyApp.model.Person', {
extend: 'Ext.data.Model',
fields: [
{
name: 'PersonID'
},
{
name: 'PersonFName'
},
{
name: 'PersonLName'
}
]
});
I think your question is: how to display PersonFName + PersonLName in the combobox but keep the PersonID field as the value.
You should add a converted field which joins the first and last names in your data model and then make that one your combobox displayField config.
Though the other answer did bring up a good point that the defined store in your combo is Person but you are showing code for a store named PersonStore.
It would look something like this:
Model:
Ext.define('MyApp.model.Person', {
extend: 'Ext.data.Model',
fields: [
{
name: 'PersonID'
},
{
name: 'PersonFName'
},
{
name: 'PersonLName'
},
{
name: 'PersonName',
convert: function(value, record) {
return record.data.PersonFName + ' ' +
record.data.PersonLName;
}
}
]
});
Store:
// changed to "Person" instead of "PersonStore"
Ext.define('MyApp.store.Person', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Person'
],
model: 'MyApp.model.Person',
proxy: {
type: 'ajax',
api: {
read: 'person.php',
create: 'person.php'
},
reader: 'array'
}
});
View:
{
xtype: 'combobox',
id: 'personcombo',
readOnly: false,
selectOnFocus: true,
forceSelection: true,
store: 'Person',
valueField: 'PersonID',
displayField: 'PersonName' // the converted field
}
Your combobox has 'Person' as the store, but I don't see you create a store called Person anywhere. Try store: Ext.create('MyApp.store.PersonStore', {autoLoad: true}).
You can also simplify your store:
Ext.define('MyApp.store.PersonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Person'
],
model: 'MyApp.model.Person',
proxy: {
type: 'ajax',
api: {
read: 'person.php',
create: 'person.php'
},
reader: 'array'
}
});
I need to inform a selectfield sencha element from callback of Ext.Ajax.request({})
I have a this code, for example,
Ext.Ajax.request({
url: '/express/EXPRESSVE00007_es.jsp',
timeout: 90000,
params: {
evento : action,
cookie: document.cookie,
NAME : Ext.getCmp("txtName").getValue(),
LAST : Ext.getCmp("txtLast").getValue(),
SEX : Ext.getCmp("txtSex").getValue()
},
success: function(r, o) {
var response = r.responseText
response = response.trim()
response = response.replace('\n', '').replace('\r', '')
var jsonResponse = Ext.decode(response)
Ext.Msg.alert(jsonResponse)
},
failure: function() {
Ext.Msg.show({
title: "Failure",
msg: "Error, failed response",
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
})
}
})
and my selectfield,
{
xtype: 'selectfield',
id: 'selSex',
name: 'select',
label: '*Sex',
placeHolder: 'Select...',
displayField: 'desc',
hiddenName: 'second-select',
options: [
{desc: '', value: ''},
{desc: '', value: ''}
]
}
In this case, I need to inform "desc" and "value" field from callback Ext.Ajax.request, but I don't know. Please help me.
You can inform the selectfield from an Ext.Ajax.request by updating it's store.
You could declare a store to store all the field values and then on response from the request, you can shuffle the data store to which selectfield is binded.
E.g
{
xtype: 'selectfield',
store: sampleStore,
valueField:'value',
displayField:'desc',
}
and update the store values on Ext.Ajax.request's response like this,
Ext.StoreMgr.get('sampleStore').load();
You can do below
Test = Ext.regModel('Test', {
fields: [{
name: 'desc',
type: 'string'
}, {
name: 'value',
type: 'string'
}]
});
exStores = new Ext.data.Store({
model: 'Test',
autoLoad: false });
and select field
{
xtype: 'selectfield',
store: exStores,
id: 'selSex',
name: 'select',
label: '*Sex',
placeHolder: 'Select...',
valueField:'value',
displayField:'desc',
}
and ajax request
Ext.Ajax.request({
...
success: function(r, o) {
var response = r.responseText
response = response.trim()
response = response.replace('\n', '').replace('\r', '')
var jsonResponse = Ext.decode(response)
exStores.loadData(jsonResponse, false);
Ext.Msg.alert(jsonResponse)
},
...
})
Hope this help.
I have a form and a grid to submit a query,like this:
items:[
{
fieldLabel: 'query the month',
xtype : 'textfield',
name : 'query_year_month',
id: 'query_year_month'
} ],
buttons: {
text: 'submit',
formBind: true, //only enabled once the form is valid
disabled: false,
handler: function() {
//some code
}
var store = Ext.create('Ext.data.Store', {
model: //uncertain,
region : 'south',
pageSize: 15,
proxy: {
type: 'ajax',
url : 'brokee/brokagequery/',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: false
});
I'd like to load data to a grid after submiting the form.The return data is a json
structure,I don't want to define the static model bind to the store and neither the grid columns,because the data returned is uncertained. The store model and grid columns should be generated from the json data,
for example: json: {'field1':data1, 'field2':data2}
the model should be generated like this:
Ext.define('somemodel', {
extend: 'Ext.data.Model',
fields: [
{name: 'field1', type: 'string'},
{name: 'field2', type: 'string'}
]
});
In the official demo, the store and model are predefined, then call the store.load method to refresh the grid throuth the proxy.But how can I do that when the store and model need to be generated?
When you have your json loaded, you can create store store/model like this.... use record .raw to extract values and :
Ext.create("Ext.data.JsonStore",{
id:record.raw.storeID,
model: Ext.define('App.dataGridModel', {
extend: 'Ext.data.Model',
fields: [record.raw.id, record.raw.first]...
})
...
});
the same with the grid etc..
I have created a local store and model for remembering username and password:
Store:
ToolbarDemo.stores.localsettingsstore = new Ext.data.Store({
model: 'UserSettings',
proxy: new Ext.data.LocalStorageProxy(
{
id: 'data',
proxy:
{
idProperty: 'id'
}
}),
autoLoad: true,
autoSave: true,
listeners:
{
beforesync: function()
{
console.log("SYNCING");
console.log("Number of data: ");
console.log(this.getCount());
},
datachanged: function()
{
console.log(this.getProxy());
console.log("DATA CHANGED");
console.log("Number of data: ");
console.log(this.getCount());
}
}
});
Model:
Ext.regModel('UserSettings', {
fields: [
{name: 'username', type: 'string'},
{name: 'password', type: 'string'},
{name: 'storeUsernamePassword', type: 'boolean'}
]
});
If the user want to store the username and password, this function is invoked:
function setLocalUsernameAndPassword(localUsername, localPassword, bStoreUsernameAndPassword)
{
removeLocalUsernameAndPassword(false); // Remove all previous inputs (Should just be one)
ToolbarDemo.stores.localsettingsstore.add({username: localUsername, password: localPassword, storeUsernamePassword: bStoreUsernameAndPassword});
}
The store is set to autoload and autosave, so it should not be nessecary to run a .sync() on the store.
If the user chooses to not store the username and password, i remove all records from the store by invoking:
function removeLocalUsernameAndPassword(bClearFields)
{
//ToolbarDemo.stores.localsettingsstore.removeAll();
ToolbarDemo.stores.localsettingsstore.each(function(record)
{
console.log("Removing " + record.data.username);
ToolbarDemo.stores.localsettingsstore.remove(record);
});
if(bClearFields)
{
Ext.getCmp("usernameField").value = "";
Ext.getCmp("passwordField").value = "";
Ext.getCmp("checkboxStoreUserInfo").checked = false;
}
}
Afterwards i can see that the store is empty, BUT if i refresh the page (Start the app once again), all the records are back plus the one i stored.
Can anyone see what i'm missing to do this properly?
Thanks in advance.
I finally found a guy that had exactly the same problem.
The solution:
You have to add a field with name "id", and type "int".
This makes sencha able to delete the record.
Ext.regModel('UserSettings', {
fields: [
{name: 'id', type: 'int'},
{name: 'username', type: 'string'},
{name: 'password', type: 'string'},
{name: 'storeUsernamePassword', type: 'boolean'}
]
});
After i did this, i also had to do a store.save() after each update.