For internal reasons, I have to send back from the server to the combo the following json string:
{"root":[{"employeeId":1,"user":{"userName":"admin"}}]}
As you can see, the user is actually an object, any way that the combobox will be able to read it?
the combo is configured as the following:
,displayField:'user.userName'
,title:'Manager'
,xtype: 'numberfield'
,hiddenName: 'employeeId'
,valueField : 'employeeId'
this is the store:
var store = new Ext.data.JsonStore({
autoLoad: true,
url: "/some_data",
root: 'root',
methos:'POST',
fields:[{name:"employeeId"},{name:"user.userName"}] });
the ext wont render it, any solution for that?
Use the 'mapping' property on fields in your store to remap the "deep" values to simple names the ComboBox can then reference:
new Ext.form.ComboBox({
fieldLabel: 'Manager',
hiddenName: 'employeeId',
store: new Ext.data.JsonStore({
root: 'root',
url: '/some_data',
method: 'POST',
fields: [
{name: 'employeeId'},
{name: 'userName', mapping: 'user.userName'}
]
}),
displayField: 'userName',
valueField: 'employeeId'
});
Related
I know that this is a simple question, but I got stuck looking for a solution.
First, I got the FormPanel, that obtains data passed by JSON that looks like:
var formPanel = new Ext.FormPanel({
....
[
{name: 'country', mapping: 'country'}
]
...
Then, I populate the store with data from an external file that has a list of countries
var countryStore = new Ext.data.SimpleStore({
fields: ['vcountry', 'vcountrydesc'],
data : Ext.ms.data.countries,
id:1,
});
What I want to do is to set a default value in a Ext.form.ComboBox, which is defined as name: 'country', precisely, I want to do something like this:
var countryFld = new Ext.form.ComboBox({
store: countryStore,
.....
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select Country',
value: 'country', **<---I WANT TO DO THIS, BUT TO DISPLAY A VALUE, NOT A STRING!**
....
}
});
I assume that solution is very simple, but I got stuck on it.
SIMPLE, very stupid of me to ask...
Solution is just like for any other form
dataIndex: 'country',
instead of
value:'country',
I've just started to get into the framework of Sails for Node. But it seems like I can't get the unique- requirements to work when adding for example users to the sails-mysql database. I can atm add unlimited number of new users with the same username and email.
From what I have read it should work, I did also try with sails-memory and there this exact code did work. Is it something I have missed out?
module.exports = {
attributes: {
username: {
type: 'string',
required: true,
unique: true
},
firstname: {
type: 'string',
required: true
},
lastname: {
type: 'string',
required: true
},
password: {
type: 'string',
required: true
},
birthdate: {
type: 'date',
required: true
},
email: {
type: 'email',
required: true,
unique: true
},
phonenumber: 'string',
// Create users full name automaticly
fullname: function(){
return this.firstname + ' ' + this.lastname;
}
}
};
As I mentioned above, this does work with the memory-storage. And now I have also tried with mongodb where it does work fins as well.
Got support from Sails.js on twitter: "it uses the db layer- suspect it's an issue with automigrations. Would you try in a new MySQL db?"
This answer did work, a new db and everything was just working :)
Just to add to this, since sails uses auto-migrations, if you initially start the server and your model does not have an attribute as unique, the table is built without the unique (index) switch. If you then change an existing attribute in the model to unique, the table will not be rebuilt the subsequent times you start the server.
One remedy during development is to set migrations in your model to drop like this:
module.exports = {
migrate: 'drop' // drops all your tables and then re-create them Note: You loose underlying.
attributes: {
...
}
};
That way, the db would be rebuilt each time you start the server. This would of course drop any existing data as well.
I'm using ExtJS 4.2 and I have some records in a MySql database. My question is: How can I create a grid that displays the records in the database?
I tried using ResultSet in a servlet to retrieve the records from the database, but I'm not sure how to proceed from there.
How can i populate the fields in the grid with the records in my database?
I'm new to ExtJS and I'm finding it difficult to come up with a solution for this. Does this have something to do with the store field? If so, how do i go about achieving the above said requirement?
You need to create store, bind to the grid and then load data from server. And sure you need backend for this ExtJS4 do not provide any tools for working with databases
For example( taken from sencha docs ):
Ext.onReady(function(){
Ext.define('Book',{
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
reader: 'xml'
},
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: '#author.name'},
'Title', 'Manufacturer', 'ProductGroup'
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: 'sheldon.xml',
// the return will be XML, so lets set up a reader
reader: {
type: 'xml',
// records will have an "Item" tag
record: 'Item',
idProperty: 'ASIN',
totalRecords: '#total'
}
}
});
// create the grid
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Author", flex: 1, dataIndex: 'Author'},
{text: "Title", width: 180, dataIndex: 'Title'},
{text: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
{text: "Product Group", width: 100, dataIndex: 'ProductGroup'}
],
renderTo:'example-grid',
width: 540,
height: 200
});
});
The main idea is - models are for defining structure of the record and validation(read about it here), stores - for storing and fetching(by parsing response from server or local defined data) records that match model structure(Basic store) and finally grid handles some events(like "load" or "refresh") and updating rows based on grids column defenition(docs)
I've trouble with my Combobox. I've build a simple combobox which is configured with a JsonStore to provide remote data. The combobox opens at the first click without problems, the JSON data is requested and Ext shows me the full dropdown list.
But sporadly at the second (sometimes third) click, the combobox neither open nor load any remote data.
Here's my config:
var config = {
autoLoad: true,
fields: [{
name: 'name',
type: 'string'
}, {
name: 'count',
type: 'int'
}, {
name: 'created_at',
type: 'int'
}, {
name: 'updated_at',
type: 'int'
}],
root: 'result',
idProperty: 'id',
proxy: new Ext.data.HttpProxy({
method: 'GET',
url: '/myHandler/loadDropDownList'
})
};
The combobox itself is loaded in a toolbar:
var config = {
height: 27,
items: [{
xtype: 'tbtext',
text: 'Your preference?:',
// #todo inline style -> CSS
style: {
'font-weight': 'bold',
'color': '#15428B',
'font-family': 'tahoma,arial,verdana,sans-serif',
'font-size': '11px'
}
},
'->',
// align the following items on the right side of the toolbar
{
xtype: 'combo',
itemId: 'table-combobox',
store: new myStore(),
valueField: 'name',
displayField: 'name',
value: ' - Please Choose - '
}]
}
Many thanks in advance!
The combobox may be running into trouble querying the database everytime you select it. If you don't need the combobox data to be updated throughout a user's session (i.e. the dropdown values don't change in between the times the user clicks the combobox), you can add this config to the combobox:
mode:'local',
(ExtJS4: queryMode:'local')
It will take the data that the remote store has autoLoaded and will not requery the database store every time it is dropped down.
I have an ExtJs combobox. Its store loaded using JSON (using MyStore class below). I want to load all the values to the store, and then filter them with the text entered in the combo's textfield (preferably using the typeAhead feature).
The problem is that I want to do the filtering on the client side (combo's mode property is 'remote', by default). I don't want my combo to reload its store every time I type something.
How can I do that?
Thanks.
Here's my store class :
MyStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(jsonUrl, storeId, id, description, isAutoLoad, cfg) {
cfg = cfg || {};
GenericStore.superclass.constructor.call(this, Ext.apply({
storeId: storeId,
root: 'result',
url: jsonUrl,
autoLoad: isAutoLoad,
fields: [
{
name: id
},
{
name: description
}
]
}, cfg));
}
});
And the combo :
xtype: 'combo',
fieldLabel: 'The Combo',
width: 150,
store: myStoreData,
valueField: 'id',
displayField: 'name',
minChars : 0,
editable : false,
itemId : 'my-combo'
To achieve this you must:
Construct MyStore class with "isAutoLoad" config option as "true"
In your combobox config set the "mode" config option to "local" (see Built the combo config code bellow for another config)
Here is my short example:
Construct myStoreData variable
var myStoreData = new MyStore({
autoLoad: true, //so the store will load automatically
...any_other_config_option...
});
Built the combo config
{
xtype: 'combo',
fieldLabel: 'The Combo',
width: 150,
store: myStoreData,
// myStoreData is already loaded before as it have 'autoLoad' config set to true
// and act as localstore to populate the combo box item
// when the combo "mode" config set to 'local'
valueField: 'id',
displayField: 'name',
minChars : 0,
editable : true, //before was editable : false,
itemId : 'my-combo',
mode: 'local', // by default this was mode: 'remote'
typeAhead: true // by default this was typeAhead: false
}
You will want to use the store.filter() method. You can use this to use user-entered information to filter your store that the combo box uses. This is taken from the ExtJS API documentation for data.store.
store.filter([
{
property : 'name',
value : 'Ed',
anyMatch : true, //optional, defaults to true
caseSensitive: true //optional, defaults to true
},
//filter functions can also be passed
{
fn : function(record) {
return record.get('age') == 24
},
scope: this
}
]);
In my case I had to add the config option lastQuery:'' to the combo.
explanation : http://progex.wordpress.com/2010/03/26/extjs-combo-dropdown-does-not-filter-on-first-trigger/
Add listener to your store on 'load' event, do filtering, by removing or flagging records, if removing it is clear load to combo component, if flagging you need to recognize those flaggs in combo and display or not...
It hard to go with more details if I do not see your code for store and combo, so I can give you only general idea