No matter what I try, I cannot get my combobox to display a single field from my store.
Here's my code:
store/Criteria_1.js
Ext.define('AM.store.Critera_1', { //temp store
extend: 'Ext.data.Store',
model: 'AM.model.Criteria1',
storeId: 'search_criteria_1',
fields: ['TECH_NAME', 'KBE_ID', 'KBE_NAME'],
data : [
{ TECH_NAME: 'TECH_NAME' },
{ KBE_ID: 'KBE_ID' },
{ KBE_NAME: 'KBE_NAME' }
];
});
model/Criteria_1.js
Ext.define('AM.model.Criteria_1', {
extend: 'Ext.data.Model',
fields: [
{ name: 'TECH_NAME', type: 'string' },
{ name: 'KBE_ID', type: 'int' },
{ name: 'KBE_NAME', type: 'string' }
]
});
And here's where I'm trying to call it, app.js:
{ xtype: 'combobox', padding: 5, id: 'criteria_1_dropdown', store: Ext.StoreManager.get('Criteria_1'), displayField: 'KBE_ID' },
I don't want to use a proxy just yet either. Any ideas?
You shouldn't define fields in your store if you are using a Model. Also. the data you have in your store is most likely not what you are looking for. You have 3 different records, each with only one of your fields populated. You probably want this:
data : [
{
TECH_NAME: 'TECH_NAME',
KBE_ID: 'KBE_ID',
KBE_NAME: 'KBE_NAME'
}
]
I had the same problem. I solved it looking at this example from the Extjs 5 documentation: http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#form-combos
You have a few things different. Try this:
Ext.define('AM.model.Criterion', { // the model name should be singular; it refers to only one entry)
extend: 'Ext.data.Model',
fields: [
'TECH_NAME',
'KBE_ID',
'KBE_NAME'
]
});
Ext.define('AM.store.Critera_1', { //temp store
extend:'Ext.data.ArrayStore',
model: 'AM.model.Criterion',
storeId: 'search_criteria_1',
data : [
[ 'TECH_NAME_ONE', 'KBE_ID_ONE', 'KBE_NAME_ONE' ]
];
});
Finally:
{
xtype: 'combobox',
padding: 5,
id: 'criteria_1_dropdown',
store: { type:'search_criteria_1' },
displayField: 'KBE_ID',
queryMode:'local'
}
Pay attention to queryMode:'local'. I adapted my working code to your example without testing.
I hope it helps.
Related
i have json like this.
firstName: 'xyz',
comments : [{
emailAddress : "abc#gmail.com", body : "PQR",
emailAddress : "xyz#gmail.com", body : "XYZ",
}]
i want to show firstName in the textfield which is editable. and want to show comments in the grid. i am not able to understand how to do it. please help me with that.
my view is following:
Ext.define("SampleView", {
extend: "Ext.panel.Panel",
alias: 'widget.sample',
id : 'sampleVId',
requires: ['StudentViewModel'],
viewModel: {
type: 'StudentViewModel'
},
layout: {
type: 'vbox',
align: 'stretch'
},
initComponent: function() {
Ext.apply(this, {
items: [this.form(), this.grid()],
});
this.callParent(arguments);
},
grid: function(){
return {
xtype: 'grid',
reference: 'samplegrid',
id : 'samplegridId',
bind: {
store: '{comment}'<-- not able to do the binding
},
flex:1,
margin: 10,
plugins: {
ptype: 'rowediting',
clicksToEdit: 2
},
columns: [{
text: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
allowBlank: false
}
}, {
text: 'Role',
dataIndex: 'body',
}],
}
}
},
form : function(){
return{
xtype : 'form',
items:[{
xtype: 'textfield',
fieldLabel: 'First Name',
bind: {
value: '{firstName}'<---- how to bind this valuw to textfield
}
}]
}
}
});
my view model is like this:
Ext.define('StudentViewModel', {
extend: 'Ext.app.ViewModel',
alias:'viewmodel.StudentViewModel',
requires: [
'Student'
],
stores: {
orderStore: {
autoLoad:true,
type: 'sampleS'
}
}
});
my model is like this:
Ext.define('Student', {
extend: 'Ext.data.Model',
idProperty: 'Id',
schema: {
namespace: 'sample',
proxy: {
type:'ajax',
url: 'users.json',
reader:{
type:'json',
rootProperty:'data'
}
}
},
fields: [
{ name: 'Id', type: 'int' },
{ name: 'firstName', type: 'string' },
]
});
Your binding would have to be based on the record selected.
Your model for student needs to be defined to have a hasMany reference to a comments model so a proper store is built to be bound, or you would have to dynamically create a store based on the array data within the model. I would suggest just using a relation, its easier to do in the long run.
where you have the binding of
value: {firstName}
It should be
value: {student.firstName}
In your view controller you would have to bind student to the student model you are trying to display in the form using a line that looks like
vm.setValue('student', YOURMODELOBJECTHERE);
If the student model has a proper has many relation for comments, then the rest should be okay.
I have this on model
Ext.define('MyApp.model.job', {
extend: 'Ext.data.Model',
alias: 'model.job',
config: {
fields: [{
name: 'name',
type: 'string'
}, {
name: 'value',
type: 'string'
}]
}
});
And this on store
Ext.define('MyApp.store.job', {
extend: 'Ext.data.Store',
alias: 'store.job',
requires: [
'MyApp.model.job'
],
config: {
autoLoad: true,
data: [
{
name: '--Please Select--',
value: ''
}, {
name: 'Job 1',
value: 'Job1'
}, {
name: 'Job 2',
value: 'Job2'
}, {
name: 'Job 3',
value: 'Job3'
}
],
model: 'MyApp.model.job',
storeId: 'jobStore'
}
});
And this is the View
{
xtype : 'selectfield',
name : 'job',
label : 'Job',
displayField : 'name',
valueField : 'value',
store: 'jobStore'
}
But I got the following error on Console
"Uncaught TypeError: Cannot call method 'on' of undefined"
Can someone help me?
In the job store, remove the unneccessary line storeId: 'jobStore' and in the view edit store to store: 'job' and your code will be working fine.
Beside this, i would ask you to remove few line of code from your snippet(Because in standard Sencha coding, we follow certain rules).
requires: [
'MyApp.model.job'
],
alias: 'store.job'
alias: 'model.job'
Happy coding. :)
EDIT
In app.js of your application, you should write
models: ['job'],
stores: ['job']
instead model and store.
So I implemented a dataview and a list format card to display my json in store. I am trying to get the two view to share one store, since the data are the same. However the way i am doing it is not really working, if I only have Dataview or List it works fine. When I have both call the store, it will stop working... please help!
Dataview:
Ext.define('Sencha.view.hoardboard.HoardList', {
extend: 'Ext.DataView',
xtype: "hoardlist",
requires: ['Ext.XTemplate'],
config: {
flex:1,
scrollable: true,
store: 'Plist',
baseCls: 'columns',
itemTpl: '<div class=pin><img src={image}><div style="padding-top: 10px; padding-left: 20px; padding-right:20px">{name}<br>{brand}</div></div>'
}
});
List view
Ext.define('Sencha.view.hoardboard.HoardList2', {
extend: 'Ext.List',
xtype: "hoardlist2",
config: {
flex:1,
scrollable: true,
store: 'Plist',
grouped: true,
itemTpl: '{name}'
}
});
Model
Ext.define('Sencha.model.HoardList', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'name',
type: 'string'
},
{
name: 'image',
type: 'string'
},
{
name: 'type',
type: 'string'
},
{
name: 'brand',
type: 'string'
}
,
{
name: 'color',
type: 'string'
},
{
name: 'description',
type: 'string'
}
]
}
});
Store
Ext.define('Sencha.store.HoardList',{
extend: 'Ext.data.Store',
storeId: 'Plist',
model:'Sencha.model.HoardList',
title: 'My Collection',
autoLoad: true,
sorters: 'name',
grouper: {
groupFn: function(record) {
return record.get('name')[0];
}
},
proxy: {
type: 'ajax',
url : 'products.json',
reader: {type: 'json', rootProperty:'products'}
}
});
Thank you so much!
Generally speaking when you're using Sencha framework you don't share one store object between several visual controls.
If you want to use same store in two places you need to clone it and have two separate store objects.
I'm trying to set values for the components in a form panel and below is my code.
Form Panel with grid:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
height: 436,
width: 754,
layout: {
columns: 4,
type: 'table'
},
bodyPadding: 10,
title: 'My Form',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'displayfield',
colspan: 4,
fieldLabel: '',
value: 'Display Field'
},
{
xtype: 'displayfield',
colspan: 2,
margin: '0 50 0 0 ',
fieldLabel: 'Age',
labelAlign: 'top',
value: 'Display Field'
},
{
xtype: 'displayfield',
colspan: 2,
fieldLabel: 'Country',
labelAlign: 'top',
value: 'Display Field'
},
{
xtype: 'gridpanel',
colspan: 4,
header: false,
title: 'My Grid Panel',
store: 'MyJsonStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'DeptName',
text: 'Dept Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'DeptId',
text: 'Dept ID'
}
]
}
]
});
me.callParent(arguments);
}
});
Models:
Ext.define('MyApp.model.EmpModel', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.DeptModel'
],
fields: [
{
name: 'Name'
},
{
name: 'Age'
},
{
name: 'Country'
},
{
name: 'Dept'
}
],
hasMany: {
associationKey: 'Dept',
model: 'MyApp.model.DeptModel'
}
});
Ext.define('MyApp.model.DeptModel', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.EmpModel'
],
fields: [
{
name: 'DeptName'
},
{
name: 'DeptId'
}
],
belongsTo: {
associationKey: 'Dept',
model: 'MyApp.model.EmpModel'
}
});
Store:
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.EmpModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.EmpModel',
storeId: 'MyJsonStore',
data: {
EmpDet: [
{
EmpName: 'Kart',
Age: '29',
Dept: [
{
DeptName: 'Dev',
DeptId: '1000'
}
]
}
]
},
proxy: {
type: 'ajax',
url: 'data/empDet.json',
reader: {
type: 'json'
}
}
}, cfg)]);
}
});
Json data:
{
"EmpDet": [
{
"EmpName": "Kart",
"Age": "29",
"Dept": [
{
"DeptName": "Dev",
"DeptId": "1000"
}
]
}
]
}
Questions:
1) I had left the value of the component as "Display Field" itself because if I remove this value the width of the grid below decreases. I feel this is because of the table layout and colspans. Is there any other best way to display labels without any alignment change on value load.
2) I'm trying to set the value for the display field. I tried to do it with the afterrender event but the problem is that it throws a undefined error at Ext.getStore('MyJsonStore').getAt(0). I found that this works fine if I write the same in the click event of a button. So, I feel that the store is not loaded when I try the afterrender event of the displayfield (autoload for store is set to true). Is there an alternative for afterrender event of a component. Also, Is there a way to set all the field values at a stretch instead of setting every component one by one?
3) Also I find it difficult to do the association properly. I'm using Sencha Architect 2.2 and when I go the data index of the grid, I'm not able to get the "DeptName" and "DeptId" in the dropdown.
Please help.
For the question number 2, I want to suggest the below way. I hope it works for you.
My solution:
You can set the display fields values when the store is loaded. So you can use load event of store as below:
yourStoe.on('load',function()
{
//set display field values here
});
In my appliacation , I have a list and detail(form).I want to load data to Detail view(set data to textfields of form) when list item is clicked. For both list and detail, I am getting data from remote server. I am following MVC.
Now, When listItem is clicked, I am able to get data from server and save it to store and also showing detail view. But I am not able to bind data from store to textfields in form.
Model
Ext.define('App.model.Details', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'Name', type: 'string'},
{name: 'BillingStreet', type: 'string'},
{name: 'BillingCity', type: 'string'}
]
}
});
Store
Ext.define('App.store.Details', {
extend: 'Ext.data.Store',
config: {
model: 'App.model.Details',
autoLoad :true,
grouper : function(record) {
return record.get('Name')[0];
},
}
});
list view
Ext.define('App.view.View', {
extend: 'Ext.List',
alias:'widget.contactlist',
fullscreen: true,
id: 'contactlist',
config:{
disableSelection:true,
store:'Contacts',
itemTpl:'{Name}',
items:[
{
xtype:'toolbar',
docked:'top',
title:'Leeds List'
}
]
}
});
Detail view
Ext.define("App.view.ListDetail", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.listDetail",
config:{
scrollable:'vertical'
},
initialize: function () {
this.callParent(arguments);
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Details"
};
this.add([
topToolbar,
{ xtype: "fieldset",
items: [{
xtype: 'textfield',
store: 'Details',
value : 'Name',
label: 'Name'
},
{
xtype: 'emailfield',
store: 'Details',
value : 'BillingStreet',
label: 'Email'
},
{
xtype: 'passwordfield',
store: 'Details',
value : 'BillingCity',
label: 'Password'
}
]
}
]);
}
});
Controller
Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
// We're going to lookup our views by xtype.
contactlist: "contactlist",
contactdetail: "listDetail",
//f_name:"#f_name"
},
control: {
contactlist: {
// The commands fired by the notes list container.
itemtap: "oneditLeadCommand"
}
},
routes: {
'contactlist': 'activateList'
}
},
activateList: function ()
{
Ext.Viewport.animateActiveItem(this.getContactlist(), this.slideRightTransition);
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
oneditLeadCommand: function (list, index, target, record, e, eOpts)
{
console.log("onEditLead"+record.data.Id);
this.activateLeadDetail(record);
},
activateLeadDetail: function (record)
{
var contactDetail = this.getContactdetail();
//console.log("activateLeadDetail"+contactDetail.textfield);
//contactDetail.setRecord(record); // load() is deprecated.
//this.getF_name().setDisplayField("");
store = Ext.StoreMgr.get('Details');
//console.log("activateLeadDetail"+store);
store.setProxy({
type: 'ajax',
url : 'http://10.0.2.2:8080/SalesForce/leads/get-lead-details/00D90000000jvoU!AR4AQB6Xcjz4UNBKf12WOcYHWc31QxK2.fXTcbCvOq.oBosCrjBezhqm8Nqc1hrf8MKK5LjLAu8ZC5IqB1kdpWvJGLdWd5pJ/'+record.data.Id, // the json file that holds all our contact info.
reader: {
type: 'json'
}
});
store.load();
var record1 = Ext.StoreMgr.get('Details').getAt(0);
console.log("activateLeadDetail"+record1);
Ext.StoreMgr.get('Details').each(function(test){
console.log("for loop"+test.data);
});
contactDetail.setRecord(record1);
Ext.Viewport.animateActiveItem(contactDetail, this.slideLeftTransition);
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}
})
Please help to bind data to detail view.
So I'm guessing your Contacts Store is defined somewhere else but since this one is working you didn't paste the code here.
So one quick note on the model, where you should always define an idProperty. This is what Sencha use internally to define the "primary key" on your store and therefore work properly when you reload/refresh your store.
Ext.define('App.model.Details', {
extend: 'Ext.data.Model',
config: {
idProperty: 'Name', // Or something from your server maybe?
fields: [
{name: 'Name', type: 'string'},
{name: 'BillingStreet', type: 'string'},
{name: 'BillingCity', type: 'string'}
]
}
});
Secondly, why did you use the initialize method in your ListDetail view when you used the config method in your listView? if you specify the config instead, you will be able to to reuse some of this component in a more easy way somewhere else by doing something like
items: [
{
xtype: 'ListDetail',
anyOtherAttribute: value
}
]
But that's kinda out of scope here. But anyway. So what is wrong here I think is that you have defined a Store for each field of your panel. I'm sorry i can't test my hypothesis, but here is what I would do:
Ext.define("App.view.ListDetail", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.listDetail",
config:{
scrollable:'vertical'
items:[
{
xtype: "toolbar",
docked: "top",
title: "Details"
},
{
xtype: "fieldset",
itemId: 'detailedListFiledset', //Overall, prefer itemId
items: [
{
xtype: 'textfield',
value : 'Name',
label: 'Name' // may be you want placeholders here?
},
{
xtype: 'emailfield',
value : 'BillingStreet',
label: 'Email' // and here..
},
{
xtype: 'passwordfield',
value : 'BillingCity',
label: 'Password' // and here..
}
]
}
]
}
});
Alright, and now the issue seems to be in your controller:
Add a ref to your fieldset
Add a reference to your store
create a afterload callback when your store is loaded (Details)
Either clear the store every time or append data and apply to filter to get the correct record (this is why the idProperty is very useful)
set the record of the fieldset and not the panel
I haven't had the chance to try that, but I'll do it later tonight. But git it a go though.
-- EDIT --
Ok I've finally been abe to code something for you.
A few issues were in your code. I don't really know why you need two stores, but let's say you do. I'm going to give you all the files I used (the two stores, the two models, the three views and the controller). Three main thing were wrong in your code:
you should not load the second store and try to get the record right after. use and 'load' or 'refresh' event for that
SetValues for a form is the correct function to use
You were missing the name property in your form so that the form know to which value of the store/model to bind to the field.
ContactModel:
Ext.define('App.model.Contact', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
}
});
ContactStore:
Ext.define('App.store.ContactStore', {
extend: 'Ext.data.Store',
requires:['App.model.Contact'],
config: {
storeId: 'ContactStore',
model: 'App.model.Contact',
autoLoad :true,
data: [
{id: 0, name: 'Foo'},
{id: 1, name: 'Bar'}
]
}
});
DetailModel:
Ext.define('App.model.Detail', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'billingStreet', type: 'string'},
{name: 'billingCity', type: 'string'}
]
}
});
DetailStore:
Ext.define('App.store.DetailStore', {
extend: 'Ext.data.Store',
config: {
model: 'App.model.Detail',
autoLoad :true,
data: [
{id: 0, name: 'Foo', billingStreet:'here', billingCity: 'Somewhere'},
{id: 1, name: 'Bar', billingStreet:'there', billingCity: 'Somewhere else'}
]
}
});
ContactView:
Ext.define('App.view.ContactList', {
extend: 'Ext.List',
xtype: 'contactList',
fullscreen: true,
config: {
itemId: 'contactList',
store:'ContactStore',
emptyText: 'test',
itemTpl: new Ext.XTemplate(
'{name}'
),
items:[
{
xtype:'toolbar',
docked:'top',
title:'Leeds List'
}
]
}
});
DetailView:
Ext.define('App.view.Detail', {
extend: 'Ext.form.Panel',
requires: ['Ext.form.FieldSet'],
xtype: "detail",
config:{
scrollable:'vertical',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Details'
},
{
xtype: 'fieldset',
itemId: 'detailForm',
items: [{
xtype: 'textfield',
store: 'Details',
name: 'name',
placeHolder : 'Name',
label: 'Name'
},
{
xtype: 'textfield',
store: 'Details',
placeHolder : 'BillingStreet',
name: 'billingStreet',
label: 'BillingStreet'
},
{
xtype: 'textfield',
store: 'Details',
placeHolder : 'BillingCity',
name: 'billingCity',
label: 'BillingCity'
}
]
}
]
}
});
Main view:
Ext.define('App.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
config: {
layout: 'hbox',
items: [
{
xtype: 'contactList',
flex:1
},
{
xtype: 'detail',
flex:2.5
}
]
}
});
Main Controller:
Ext.define('App.controller.Main', {
extend : 'Ext.app.Controller',
requires: [
'Ext.Toolbar',
'Ext.List',
'App.store.ContactStore',
'App.store.DetailStore',
'App.view.Detail',
'App.view.ContactList'
],
config: {
//#private
detailStore: null,
currentListIndex: -1,
views : [
'App.view.ContactList',
'App.view.Detail'
],
refs: {
list: 'contactList',
detail: 'detail',
detailForm: 'detail #detailForm'
},
control: {
list: {
itemtap: 'handleItemTapList'
}
}
},
launch: function() {
var store = Ext.getStore('DetailStore');
store.on('refresh', 'handleDetailStoreLoad', this);
this.setDetailStore(store);
},
handleItemTapList: function(list, index, target, record) {
this.setCurrentListIndex(index);
this.getDetailStore().load();
},
handleDetailStoreLoad: function (store) {
debugger;
var record = store.getAt(this.getCurrentListIndex());
this.getDetail().setValues(record.data);
}
});
We could argue on a few things but I tried to go straight to the point and make it work. If you have more questions please ask but this example is working for me. In my opinion, you might not need the second store, as the contact detail could be nested in the COntact store, and you could use the hasMany property of the store.
use form.setRecord() to load a record into a form
make sure your form elements have name property values that match the model name properties
as you have a store, you will have to get a reference to ONE model to load, using say getAt() or find() methods to get or find a model in your store