Develop Reference

How to get all values from combobox selected record?

I've a combobox which returns 10 values from DB;
Ext.define('Iso3Combo', {
extend:'',
xtype:'iso3combo',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
name: iso3
fieldLabel: iso3,
displayField:'iso3', // takes from DB
valueField:'id', // takes from DB
store: {
proxy: {
type: 'ajax',
url: ...getUrl() + '/country/list',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
},
queryMode: 'local',
autoLoad:true,
bind: '{currRec.iso3}',
listeners: {
fn: function () {
console.log('isocombo listeners...');
},
select: this.getIso3,
change: this.getIso3,
scope: this
}
});
As you will notice above; combobox's displayed content is iso3 and gets id as primary key. Therefore I can not change valueField. So tried this function to reach some other value for that selected combobox record;
getIso3: function () {
var me = this;
// var rec = me.getSelectedRecords(); //says getSelectedRecords is not a function
var country = me.down('[name=iso3]').getValue(); // returns 'id'
// var isoCode = rec.data.iso3; //Couldn't be success to verify if I get correct value..
How can i be able to load all values of DB from selected combobox record and select one of them?

You need to use combobox.getSelection() or combobox.getSelectedRecord(). This both method will return you selected record. Or inside of select event you will get selected record in second parameter so also you can get iso3 value like this record.get('iso3').
Here is an FIDDLE, I have created a demo using form and combobox. This will help you or guide you to solve your problem.
I am using this COUNTRY JSON.
Code Snippet
// The data store containing the list of Country
var country = Ext.create('Ext.data.Store', {
fields: ['iso3', 'id'],
proxy: {
type: 'ajax',
url: 'countryList.json',
reader: {
type: 'json',
rootProperty: 'countrylist'
}
},
autoLoad: true
});
// Create form with the combo box, attached to the country data store
Ext.create('Ext.form.Panel', {
title: 'Country List Example with ComboBox',
bodyPadding: 10,
items: [{
xtype: 'combo',
fieldLabel: 'Choose Country',
store: country,
queryMode: 'local',
displayField: 'iso3',
valueField: 'id',
listeners: {
select: function (field, record) {
Ext.Msg.alert('Success', `Selected country <br> iso3 : <b>${record.get('iso3')}</b> <br> id : <b>${record.get('id')}</b>`);
}
}
}],
renderTo: Ext.getBody(),
buttons: [{
text: 'Get Combo Value/Record on button click',
handler: function () {
var record = this.up('form').down('combo').getSelectedRecord();
if (record) {
Ext.Msg.alert('Success', `Selected country <br> iso3 : <b>${record.get('iso3')}</b> <br> id : <b>${record.get('id')}</b>`)
} else {
Ext.Msg.alert('Info', 'Please select contry first.. :)');
}
}
}]
});

handler: function () {
var selectionmodel=this.up().down('multiselect');
var values=selectionmodel.values;
}

Combobox Render with optional params

I am solving a requirement which can be simplified as following. I am fairly new to Ext.js and I need help in achieving the below.
I have 4 tables as follows.
So, I have 3000 companies and 9000 users mapped across various companies. I need to map moderators for each company in a grid.
I have an add button, which adds a row in the grid.
I achieved displaying the companies in the first column of a grid. Easy. So user can pick one.
I achieved displaying users belonging to that company in the second column of the grid. FYI, User can multi select moderators here.
Problem:
At this point, when I add a new row, pick a new company, the companyusers store gets refreshed, so, the values selected in 1st row are not valid values anymore and the first row's user column is displaying empty text (or) only the id's
My models are as follows
Ext.define('Mine.CompanyModel', {
extend: 'Ext.data.Model',
fields: ['Id', {name: 'Name', type:'string'}]});
Ext.define('Mine.UsersModel', {
extend: 'Ext.data.Model',
fields: ['Id', {name: 'Name', type:'string'}]});
Ext.define('Mine.CompanyUsersModel', {
extend: 'Ext.data.Model',
fields: ['company_user_id', 'UserName']}); //<companyuser Id>
Ext.define('Mine.CompanyModeratorModel', {
extend: 'Ext.data.Model',
fields: ['Id', 'CompanyUserId']});
My stores are
Ext.define('Mine.CompanyStore', {
extend: 'Ext.data.Store',
model: 'Mine.CompanyModel',
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/somecontroller/someaction',
reader: {
type: 'json',
root: 'Data'
}
})
});
Ext.define('Mine.UsersStore', {
extend: 'Ext.data.Store',
model: 'Mine.UsersModel',
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/somecontroller/someaction',
reader: {
type: 'json',
root: 'Data'
}
}),
});
Ext.define('Mine.CompanyUserStore', {
extend: 'Ext.data.Store',
model: 'Mine.CompanyUserModel',
autoLoad: false,
proxy: new Ext.data.HttpProxy({
url: '/somecontroller/someaction',
reader: {
type: 'json',
root: 'Data'
}
}),
//will add extra params here
});
Ext.define('Mine.CompanyModeratorStore', {
extend: 'Ext.data.Store',
model: 'Mine.CompanyModeratorModel',
autoLoad: false,
proxy: new Ext.data.HttpProxy({
url: '/somecontroller/someaction',
reader: {
type: 'json',
root: 'Data'
}
}),
});
My grid columns are
{
text: 'Company', width: '10%', dataIndex: 'id',
renderer: companyRenderer(combo_company), editor: combo_company
},
{
text: 'Users', width: '16%', dataIndex: 'company_user_id',
renderer: companyUsersRenderer(companyUsersCbo), editor: companyUsersCbo
}
My editor is
var companyUsersCbo = Ext.create('Ext.form.ComboBox', {
xtype: 'combo',
id: 'company_users',
name: 'company_users',
valueField: 'Id',
displayField: 'name',
allowBlank: false,
store: 'Mine.CompanyUsersStore',
multiSelect: false,
editable: true,
queryMode: 'local',
pickerAlign: 'bl',
listConfig: {
getInnerTpl: function (display) {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {' + display + '} </div>';
}
}
listeners: {
expand: function () {
var mainGrid = Ext.getCmp('mygrid');
var selmodel = mainGrid.getSelectionModel();
var record = selmodel.getSelection();
if (record[0].get('id') != null) {
this.getStore().getProxy().setExtraParam('company_id', record[0].get('id')); // am storing the company id in a model
this.getStore().load();
}
}
}
});
My renderer is
var companyUsersRenderer = function (combo) {
return function (resources) {
var result = [];
resources = resources || [];
for (var idx = 0, len = resources.length; idx < len; idx++) {
var value = combo.getStore().find(combo.valueField, resources[idx]);
if (value != -1) {
var rec = combo.getStore().getAt(value);
result.push(rec.get(combo.displayField));
}
}
return result.join(', ');
}
}
What am I missing? What should I do so that the values (names) displayed in the combo box remain independent of the next rows.
What have I tried:: I have added a separate hidden column and set it to the names, added to the record. It worked fine, but its not the correct way. Also, when I double click the cell for editing, it shows the numbers (id's and not text) but after I expand, it shows the text.

naga Sandeep,
try to send params with your URL to get filtered records.
like,
url:'someThing/abc/1435'+'id='+record.id;
filter your store accordingly.

Problem is when your grid is rendered, your columns are rendered and your render function uses last state of the combo's store.
I would add a display field to CompanyUsersModel then fill it when a company is selected. Also I would abandon renderer function.

How to load a nested model into a Extjs form using loadRecord

I've created a script to dynamically generate a form, but I'm having problem loading the data of the nested model. I've tried loading the whole record and I've tried loading each sub store, but neither works.
I've through about using form.load(), but from my understanding that requires a proxy connection and also require to store json data inside a 'data' array.
Does anyone have any suggestions on how might I approach this problem?
<div id="view-#pageSpecificVar" class="grid-container even"></div>
<div id="button"></div>
<script>
Ext.define('HeaderForm', {
extend: 'Ext.form.Panel',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
id: Ext.id(),
defaultType: 'textfield'
});
me.callParent(arguments);
}
});
// Define our data model
Ext.define('HeaderModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'HeaderSequence', type: 'int'}
],
hasMany:[
{ name: 'Columns', model: 'ColumnModel' }
],
proxy: {
type: 'ajax',
actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' },
url: '#Url.Content("~/Test/Header")',
timeout: 1200000,
},
});
Ext.define('ColumnModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'ColumnWidth', type: 'float'}
],
hasMany:[
{ name: 'Fields', model: 'FieldModel'}
],
belongsTo: 'HeaderModel'
});
Ext.define('FieldModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'XType', type: 'string'},
{ name: 'FieldLabel', type: 'string'},
{ name: 'Name', type: 'string'},
{ name: 'Data', type: 'string'},
{ name: 'FieldSpecify', type: 'bool'}
],
belongsTo: 'ColumnModel'
});
var store = Ext.create('Ext.data.Store', {
storeId: 'HeaderStore',
model: 'HeaderModel',
autoDestroy: true,
listeners: {
load: function (result, records, successful, eOpts) {
//console.log(result);
var form = dynamicForm(records[0]);
form.add(submitButton);
form.render('view-#pageSpecificVar');
}
}
});
store.load();
var dynamicForm = function(record) {
var form = new HeaderForm();
var columnContainer = new Ext.widget({
xtype: 'container',
layout: 'column'
});
var formItems = new Ext.util.MixedCollection();
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.iterate(item.data, function (key, value) {
var fieldContainer = new Ext.widget({
xtype: 'container',
columnWidth: value
});
Ext.each(item.FieldsStore.data.items, function(item) {
if(item.data["FieldSpecify"]) {
fieldContainer.add(new Ext.widget({
xtype: item.data["XType"],
fieldLabel: item.data["FieldLabel"],
name: item.data["Name"],
//value: item.data["Name"]
}));
}
}, this);
columnContainer.add(fieldContainer);
}, this);
}, this);
formItems.add(columnContainer);
form.add(formItems.items);
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
form.loadRecord(fields);
});
});
//form.loadRecord(record);
return form;
};
var submitButton = new Ext.widget({
xtype: 'toolbar',
dock: 'bottom',
items:[{
xtype: 'button',
text: 'Save',
handler: function(button) {
var basic = button.up('form').form;
basic.updateRecord(basic.getRecord());
var store = Ext.StoreMgr.get('HeaderStore');
store.each(function(record) {
record.dirty = true;
});
store.sync();
}
}]
});
</script>
Update
Sorry I probably didn't made it very clear. I'm having problem loading the store data into form fields. For static forms I normally use loadRecord to load the nested model into a form, but in this case all the fields are nested in their own little model, so would there be a way to load each nested model value into their own field with loadRecord?
The HeaderModel stores field set information.
The purpose of ColumnModel is to create the container that will surround a set of fields, for styling purpose. It simply creates two columns of fields.
The FieldModel stores the field specific attributes and data.
Here's an example of response json data...
{
"HeaderSequence":1,
"Columns":[{
"ColumnWidth":0.5,"Fields":[
{"XType":"textfield","FieldLabel":"FieldA","Name":"NameA","Data":"A","FieldSpecify":true},
{"XType":"textfield","FieldLabel":"FieldB","Name":"NameA","Data":"B","FieldSpecify":true}]
},{
"ColumnWidth":0.5,"Fields":[
{"XType":"textfield","FieldLabel":"FieldA2","Name":"NameA2","Data":"A2","FieldSpecify":true},
{"XType":"textfield","FieldLabel":"FieldB2","Name":"NameB2","Data":"B2","FieldSpecify":true}]
}
]
}
Thanks

I've figure out how to load the nested model into the form. We can't simply use load or loadRecord, as by default that method tries to get a model's data and iterate through the data object and call setValues.
What I have to do is manually get the basic form element and call setValues myself to assign the values.
// loop through each field store to load the data into the form by field id
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
form.getForm().setValues([{ id: fields.data['Id'], value: fields.data['DisplayName'] }]);
});
});
To Follow up with that, a custom submit handler needs to be put in place as well.
Which loops through the store and sets the submitted value to store before sync the store.
// define form submit button
var submitButton = new Ext.widget({
xtype: 'toolbar',
dock: 'bottom',
items:[{
xtype: 'button',
text: 'Save',
handler: function(button) {
// get basic form for button
var basic = button.up('form').form;
// get form submit values
var formSubmitValues = basic.getValues();
// get header store
var store = Ext.StoreMgr.get('HeaderStore');
// loop through each field store and update the data values by id from the form
store.each(function(record) {
Ext.each(record.ColumnsStore.data.items, function(item) {
Ext.each(item.FieldsStore.data.items, function(fields) {
fields.data['Data'] = formSubmitValues[fields.data['Id']];
});
});
// mark the record as dirty to be sync
record.dirty = true;
});
// sync store object with the database
store.sync();
}
}]
});

Have a look at this and this examples on how to load nested data into a nested model. You will also see how to access the associated data.
I'm not sure why you use record.ColumnsStore.data.items, as if record is of HeaderModel type, you should really get the columns store via record.Columns, and then iterate that store.
Would also help to see what JSON your server returns.

extjs rowselect is not working

I am creating a grid panel and want to attach an event with each row. following is my code
var locationdata = Ext.create('Ext.data.Store', {
fields:['name'],
storeId:'simpsonsStore',
data:{'items':[
{ 'name': 'Lisa'}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
hintBox = Ext.create('Ext.grid.Panel', {
title: 'Location List',
store: locationdata,
columns: [
{ header: 'Name', dataIndex: 'name' , flex:1 }
],
flex: 5
});
hintBox.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
alert("row selected");
});
I am adding hintBox in anothor panel which is rendered to body.
What is wrong with this code?

Selection model has no event 'rowselect', In Extjs 4 selectiom model has only selectionchange event.
hintBox.getSelectionModel().on('selectionchange', function(sm, selectedRows, opts) {
//selected rows is an array of models and if you want just one row selected,
//you have to config the grid so it only accepts one selection i think is selType: 'SINGLE' or 'SIMPLE'
// and after that selectedRows[0] will be the selected row
alert("rows selected");
});

How to load XML into a list using Sencha/Phonegap?

I'm trying to setup a native style app using sencha touch and phonegap. I'm trying to pull in data from an external XML feed into the model.
In my model (Event.js) I have this:
Ext.regModel('Event', {
fields: [
{name: 'title', type: 'string'}
]
});
In my store (eventsstore.js):
ToolbarDemo.eventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'ajax',
url: 'http://the-url-to-the-file.xml',
reader: {
type: 'xml',
root: 'events',
record: 'event'
}
},
autoLoad: true
});
And in the view (tried as a list):
ToolbarDemo.views.Eventscard = Ext.extend(Ext.List, {
title: "Events",
iconCls: "search",
store: ToolbarDemo.eventstore,
itemTpl: '{title}',
grouped: true,
indexBar: true,
cardSwitchAnimation: 'slide'
});
Ext.reg('eventscard', ToolbarDemo.views.Eventscard);
And tried as a panel:
ToolbarDemo.views.Eventscard = Ext.extend(Ext.Panel, {
title: "Events",
iconCls: "search",
dockedItems: [{
xtype: 'toolbar',
title: 'Events'
}],
layout: 'fit',
items: [{
xtype: 'list',
store: ToolbarDemo.eventstore,
itemTpl: '{title}',
grouped: true
}],
//This was an experiment, safe to leave out?
initComponent: function() {
//ToolbarDemo.eventstore.load();
ToolbarDemo.views.Eventscard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('eventscard', ToolbarDemo.views.Eventscard);
Now when I navigate to that card view, the loading overlay/spinner is displayed but that's as far as it goes, the list of items does not appear. Any ideas of what I'm doing wrong?

I am not that much familier with this, I have used like this to display a list.. try this
ToolbarDemo.eventstore.load();
var itemTpl = new Ext.XTemplate('<div id='title'>{title}</div>');
this.eventStoreList = new Ext.List({
id: 'eventStoreList',
store: ToolbarDemo.eventstore,
itemTpl: itemTpl,
height: 370,
indexBar: false
});
this.eventStoreListContainer = new Ext.Container( {
id : 'eventStoreListContainer',
items : [this.eventStoreList]
});
this.items = [this.eventStoreListContainer];
ToolbarDemo.views.Eventscard.superclass.initComponent.apply(this);

Well, I got it working!
I added ToolbarDemo.eventstore.read(); to the end of my store code, saved the XML file locally in the root 'www' folder then using the list method worked fine!
Does any body know why this (calling a remote XML) could be a problem?
EDIT: Turns out that it works fine in the browser like that, but not the iPhone simulator. So now I've set it back to the remote URL and added the URLs to the PhoneGap Whitelist and it works great :)