I have a IPIdentifierMod model that has a hasone association with BaseInfo model
Ext.define('JP.model.IPIdentifierMod', {
extend:'Ext.data.Model',
fields:[
'enterpriseIdType',
{
name: 'referenceVerifiedDate',
type: 'date',
convert: function(v, record) {
return Ext.Date.format((new Date(v)), 'Y-m-d');
console.log(v);
console.log(record);
}
}
],associations: [
{ type: 'hasOne',
model: 'BaseInfoMod',
name:'enterpriseIdType'
}
]
});
baseInfo:
Ext.define('JP.model.BaseInfoMod', {
extend:'Ext.data.Model',
fields:[
'typeId',
'typeName',
'parentId',
'priority'
],
proxy: {
type: 'ajax',
reader: {
type: 'json',
root:'results',
idProperty: 'typeId'
},
api: {
read : contextPath + '/baseInfo/getBaseInfo'
},
extraParams: {
baseEntityNo: ''
}
}
});
and I show IPIdentifierMod data in a grid
corresponding grid column to show naemType of BaseInfo is:
{
header:'Name Type',
dataIndex:'enterpriseIdType',
sortable:true,
renderer: function(value) {
return value.typeName;
}
},
This works fine. The enterpriseIdType.typeName is displayed in the column.
I now added a RowEditingPlugin and added the following editor to this column
editor: {
allowBlank: false,
xtype: 'combobox',
displayField: 'typeName',
valueField: 'typeId',
store: 'EnterpriseIdType',
}
In the editor,the value of the field is "[object Object]" .
I need to render this object to display the name just like I did to the actual column.
Also when I choose an item in the ComboBox, an enterpriseIdType object is not created in the data,
it just saves the value of the field specified in the valueField.
I searched it and find something like my problem without any answer.
sencha forum
thank you
Related
In my ViewModel, I create an inline data store for a ComboBox that I bind to in the View. The problem that I'm having is setting a default value for the ComboBox, based on one of the values in the store... I might be understanding binding here, so I'd like to hear any feedback.
OrderDetailsStatus model:
Ext.define('UserUI.model.OrderDetailsStatus', {
extend: 'Ext.data.Model',
alias: 'model.OrderDetailsStatus',
fields: [{
type: 'int',
name: 'statusId'
},
{
type: 'string',
name: 'status'
}]
});
ViewModel:
stores: {
/* TODO: This could eventually become an AJAX call, but for right now,
* it's an inline data store... the statusId's are currently unused */
orderDetailsStatusStore: {
model: 'UserUI.model.OrderDetailsStatus',
proxy: {
type: 'memory'
},
data: [
{ status: 'All', statusId: 1 },
{ status: 'Correct', statusId: 2 },
{ status: 'Incorrect', statusId: 3 }
]
}
}
In the View:
{
xtype: 'combo',
fieldLabel: 'Status',
bind: {
store: '{orderDetailsStatusStore}'
},
valueField: 'status',
displayField: 'status',
queryMode: 'local',
value: 'All',
listeners: {
select: 'onSelectComboBoxStatus'
}
}
Using the value: 'All' gives me an error about the model not existing:
TypeError: Model is not a constructor: ext-all...ebug.js (line 122343, col 33)
record = new Model(dataObj);
I'm assuming this is because the bound store hasn't been fully loaded in yet? If I debug the code, at that line, Model is undefined, and the store doesn't have any data. Any help would be appreciated.
Fiddle updated with fix in 5.1.0
<iframe src="https://fiddle.sencha.com/fiddle/m3g"></iframe>
I've created a simple fiddle that replicates yours -
https://fiddle.sencha.com/#fiddle/m3g
This is my model for my combo
Ext.define('ExtJS.myApp.ComboModel', {
extend: 'Ext.data.Model',
alias: 'widget.combomodel',
fields: [
{ name: 'ID', type: 'int' },
{ name: 'title', type: 'string' }
]
});
This is comboStore
this.comboStore = Ext.create('Ext.data.Store', {
model: 'ExtJS.myApp.ComboModel',
autoLoad: true,
scope: this,
proxy: {
type: 'ajax',
scope: this,
url: 'myApp/GetRecords',
reader: {
type: 'json',
root: 'data'
}
}
});
this.myComboBox = Ext.create('Ext.form.ComboBox', {
store: this.comboStore,
queryMode: 'local',
displayField: 'title',
valueField: 'ID'
});
This is the json object I get for my store:
{"ID":"111","title":"Ext Page 1"}
now when I try to set the value of the combobox like this.
this.myComboBox.setValue('111');
the combobox shows "111" instead of "Ext Page 1"
What would I have to do so that the combobox displays displayField while setting valueField. For example. I want to set the value as "Ext Page 1" for the user to see, but When save the value, I actually want to save "111'
try:
this.myComboBox.setValue(111);
instead of:
this.myComboBox.setValue('111');
I am trying to auto select radio button and combo box values of a form using JSON data. But, everything else (text boxes/ check boxes / data fields) is getting populated. I had no success auto selecting a value of the radio group or the combo box.
As suggested by Satya, here is the link to the jsfiddle. Clicking a row on the "movie database" populates the data in the "movie information form".
http://jsfiddle.net/9PVCN/5/
Thanks a lot in advance for help.
Here is the part of my form -
{
xtype:'radiogroup',
columns:1,
fieldLabel:'Filmed In',
name: 'filmed_in',
items:[{
name:'filmed_in',
boxLabel: 'Color',
inputValue: 'color'
},{
name:'filmed_in',
boxLabel: 'B&W',
inputValue: 'B&W'
}
]
},{
xtype: 'checkbox',
fieldLabel: 'Bad Movie',
name: 'bad_movie',
checked: true
},{
xtype: 'combo',
hiddenName: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField:'url',
valueField:'name',
width: 250,
editable: false,
listeners: {select: comboSelect}
},
This is how the genres store is coded -
var genres = new Ext.data.JsonStore({
// store configs
storeId: 'genres',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'genres.data',
reader: {
type: 'json',
idProperty: 'name'
}
},
fields: ['name', 'url']
});
The url genres.data returns this -
[{"name":"1","url":"Comedy"},{"name":"2","url":"Drama"},{"name":"3","url":"Action"}]
This is the data I am trying to load into the form -
{
"id":"1",
"title":"Office Space",
"director":"Mike Judge",
"released":"02/27/1999",
"genre":"1",
"bad_movie": "1",
"filmed_in": "color",
"description": "Loved watching this ....."
}
For the radio button the expected value is different then your passing.
Instead of filmed_in: 'color' you'll need to pass filmed_in: { filmed_in: 'color' }.
You can override the setValue as sra mentioned so it will work with filmed_in: 'color':
setValue: function (value) {
if (!Ext.isObject(value)) {
var obj = new Object();
obj[this.name] = value;
value = obj;
}
Ext.form.RadioGroup.prototype.setValue.call(this, value);
}
For the combobox, just add name: 'genre'.
http://jsfiddle.net/9PVCN/9/
I hope someone helps me out.
I want to load my grid with xml file's data, locally.
I created model,store and grid. I load the store in render event of grid.
The problem is,
Store is loaded but the grid is still empty. I looked at the grid at console, and grids items contains the loaded data, but grid doesnt contain the data on the screen.
Here is the model
Ext.define('BTOM.model.test.test', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'phone', type: 'string' }
]
});
Here is the store
Ext.define('BTOM.store.test.test', {
extend: 'Ext.data.Store',
model: 'BTOM.model.test.test',
autoLoad: false,
proxy: {
type: 'memory',
reader: {
type: 'xml',
root: 'users',
record: 'user'
}
}
});
And the grid
Ext.define('BTOM.view.test.test', {
extend: 'Ext.grid.Panel',
store: 'BTOM.store.test.test',
alias: 'widget.test',
title: 'Test',
initComponent: function () {
this.columns =
[
{ header: "Id", width: 120, dataIndex: 'id', sortable: false },
{ header: "Name", width: 180, dataIndex: 'name', sortable: false },
{ header: "Phone", width: 115, dataIndex: 'phone', sortable: false}
];
this.callParent(arguments);
},
});
And where I load the store is
render: function (grid, eOpts) {
var store = grid.getStore();
var data =
'<?xml version="1.0" encoding="utf-8"?>' +
'<users> ' +
'<user><id>1</id><name>Bll QASD</name><phone>333 2211</phone></user> ' +
'<user><id>2</id><name>Asd QWF</name><phone>444 2211</phone></user> ' +
'<user><id>3</id><name>Zas QWE</name><phone>555 2211</phone></user> ' +
'</users>';
var dataXml = (new DOMParser()).parseFromString(data, 'text/xml');
console.log(dataXml);
store.loadRawData(dataXml, true);
console.log(grid);
}
dataXML document is created without problem.
grid seems to contain the data (by firebug, I can see)
but datagrid is empty, doesnt show the data!
Ok, the error is that you are defining the store but not creating it.
So the grid just has the name of the store but it expects a store instance,
or is that some thing you have missed in the code snippet above.
I used the same code and here is a running example:
https://fiddle.sencha.com/#fiddle/oel
When I am trying to fetch data from the Store in the Combo Box,I am getiing output as--- [object Object]!!! but the value of the object is not coming!! Can any body tell me what is the problem or what should be the solution for this???
In Extjs 4.0:
Create data model
Ext.define('Bond', {
extend: 'Ext.data.Model',
idProperty: 'userid',
fields: [
{
name :'industryGroupsreName',
type:'string'
},
]
});
Create store
var industry=new Ext.data.Store(
{
model:'Bond',
proxy:
{
type: 'ajax',
url: 'industry.html',
reader: {
type: 'json'
}
}
});
industry.load();
Apply bellow code to your combo box
new Ext.create('Ext.form.ComboBox',
{
fieldLabel: 'Industry Group Name',
store: industry,
id: "industrygroup",
name: "industrygroup",
allowBlank: false,
hiddenName : 'industrygroup',
width:300,
queryMode: 'local',
displayField: 'industryGroupsreName',
valueField: 'industryGroupsreName'
}),