In my store I have a field called CreditName. In my view I am trying to check if CreditName is not null and if it is not enter it into my filefield. I have added a listener to my filefield that will enter text into the filefield. What I am having trouble with is getting CreditName into the filefield. I know that it is reading from my store because other fields are appearing properly.
Here is my code for my filefield
xtype: 'filefield',
buttonText: 'Select A File',
fieldLabel: 'File',
name: 'Credit',
labelWidth: 50,
msgTarget: 'under',
return true;
},
listeners: {
render: function (comp) {
comp.setRawValue(CreditName);
}
}
Here is the store code
fields: [ {
name: 'PartyId',
type: 'string'
}, {
name: 'CreditName',
type: 'string',
critical: true
}],
proxy: {
type: 'ajax',
url: 'api/parties',
reader: {
type: 'json'
}
}
PartyId shows up fine, here is the code for that, it is in the same view as filefield
{
xtype: 'displayfield',
name: 'PartyId',
fieldLabel: ' Party ID'
},
In your config of 'filefield', you have to use same name as 'name' property in store. In your case, it should be name: 'CreditName', not 'Credit'.
--edit--
You can get model values in 'render' listener like this:
render: function (comp) {
var model = comp.getModelData(),
value = model.get('CreditName');
comp.setRawValue(value);
}
Related
I am using ExtJs6.2 Modern toolkit.I have a situation where all my display labels are stored in DB and I need to use those to display on my form.
example
{
xtype: 'textfield',
readOnly: true,
scrollable: false,
label: ** showFromStore ** ,
labelAlign: 'top',
name: 'someName',
bind: '{SomeValue}'
},
What would be the best way to manage this display on the forms?
For binding all config of textfield or any other EXTJS component you can use bind config.
Example
Ext.create({
xtype: 'textfield',
bind: {
label: '{user.label}',
name: '{user.name}',
value: '{user.value}',
}
})
In this FIDDLE, I have created a demo using viewmodel, formpanel and textfield. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
//defining view model
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
data: {
users: null
},
stores: {
formstore: {
autoLoad: true,
fields: ['name', 'email', 'phone', 'namelabel', 'phonelabel', 'emaillabel'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: ''
}
},
listeners: {
load: function (store, data, success) {
Ext.ComponentQuery.query('#myform')[0].getViewModel().set('users', data[0]);
}
}
}
}
});
//creating form
Ext.create({
xtype: 'formpanel',
itemId: 'myform',
title: 'Form example',
renderTo: Ext.getBody(),
fullscreen: true,
viewModel: {
type: 'myvm'
},
defaults: {
xtype: 'textfield',
readOnly: true
},
items: [{
bind: {
label: '{users.namelabel}',
value: '{users.name}'
}
}, {
bind: {
label: '{users.emaillabel}',
value: '{users.email}'
}
}, {
bind: {
label: '{users.phonelabel}',
value: '{users.phone}'
}
}]
});
}
});
JSON CODE
[{
"name": "Lisa Doshi",
"email": "lisa#simpsons.com",
"phone": "555-111-1224",
"namelabel": "Full Name",
"emaillabel": "Email Address",
"phonelabel": "Phone Number"
}]
I am not sure how to create a Fiddle to demonstrate this,but I will try to provide all details here
data returned from service is
[{"ID":"P1","Label":"Procedure"},{"ID":"P2","Label":"Process"},,
{"ID":"P3","Label":"Problem"}]
I am loading this data in a store
Ext.define('My.store.myLabels',
{
alias: 'store.Lang',
extend: 'Ext.data.Store',
config:
{
fields: ['ID', 'Label'],
pageSize: 10000,
proxy:
{
type: 'jsonp',
url: myserviceURL
}
}
});
Now how do I bind a single value from the store here
xtype: 'textfield',
readOnly: true,
scrollable: false,
labelAlign: 'top',
name: 'Process',
itemId: 'P1',
bind:{
value: '{somevalue}',
label: * how to bind the value of P1 here *,
}
I tried a formula: but with that I would have to write a formula for each UI element.
So my question is:
How to access a single item from the store to bind it here like:
store.data.items["0"].ID.P1
Or how to access the component
ID/itemId that triggered the view model formula so that I can do
displayLabel: {
get: function (get) {
var store = Ext.StoreMgr.get('myLabels');
//search the store based on item id of the component that
//triggered the formula
if (index > -1) {
return store.getAt(index).data.Label;
}
}
}
this a Sencha code which I am supposed to fix, however I don't understand why after creating new records to a store, they don't show immediately, but, only after refresh(?). Below are the relevant pieces of code.
Thank you.
Controller
click: function(button){
var window = button.up('window');
var form = window.down('form#formTemplateWindow');
if(window.action == "add"){
if(form.isValid()){
var store = this.getDataViewList().getStore();
var zones = new Array();
Ext.each(form.zones, function(value, key){
zones.push(value.data.id);
});
var record = form.getValues();
record.zones = zones;
store.add(record);
store.sync();
button.up('window').close();
}
}
Model
Ext.define("web.model.Template", {
extend: "Ext.data.Model",
fields: [
'id',
'name',
'layout_id',
{
name: 'reg_date',
type: 'date',
dateReadFormat: 'Y-m-d H:i:s',
dateWriteFormat: 'Y-m-d H:i:s'
},{
name: 'background',
type: 'auto'
},{
name: 'color1',
type: 'string'
},{
name: 'color2',
type: 'string'
},{
name: 'url',
type: 'string'
},{
name: 'degree',
type: 'string'
},{
name: 'playlists',
type: 'auto'
},{
name: 'zones',
type: 'auto'
}
]
});
Store
Ext.define("web.store.Template",{
extend:"Ext.data.Store",
autoSync: true,
autoLoad:false,
model:"web.model.Template",
proxy:{
type:"rest",
url:web.util.Config.TEMPLATE_URI,
reader:{
type:"json",
root:"result"
}
},
sorters: [
{
property: 'Name',
direction: 'ASC'
}
]
});
The server has to respond accordingly with the newly created records.
Use store.insert(index,record) method instead of store.add(record).
this inserts Model instances into the Store at the given index and fires the add event as well
store.insert(0,record);
Change autoLoad property false to true
autoLoad:true
I need populate a combobox whit a store, all work fine except one thing. ¿Why the store populate only the displayField and not the valueField.
In this line
form.loadRecord(records[1]);
I set that record in the form, is fine but when i try submit the form i hope the value "2" and not the value "Media".
The code and the example on Jsfiddle for better explanation.
http://jsfiddle.net/jjgrn/5/
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'status'],
data: [
{ id: '1', status: 'Baja' },
{ id: '2', status: 'Media' },
{ id: '3', status: 'Alta' },
{ id: '4', status: 'Urgente' }
]
});
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Edit Country',
url: 'http://aaa.com/',
items: [
{
xtype: 'combobox',
fieldLabel: 'Nombre',
name: 'status',
anchor: '50%',
displayField: 'status',
valueField: 'id',
store: store
}
],
buttons: [
{
text: 'Guardar',
handler: function () {
var form = formPanel.getForm();
var value = form.getValues();
alert(value.status);
}
}
],
renderTo: Ext.getBody()
});
store.load({
scope: this,
callback: function(records, operation, success) {
var form = formPanel.getForm();
form.loadRecord(records[1]);
}
});
Thanks.
It's because form.loadRecord() doesn't do exactly what you're expecting it to do.
What you want it to do is to tell combobox to use that particual record (records[1]).
What it actually does is to tell combobox: "now set your value to Media", which combobox politely does though it's too "stupid" to associate it with particular record.
Here's the fixed version, not sure if such solution fits your needs:
http://jsfiddle.net/jjgrn/6/
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'status'],
data: [
{ id: '1', status: 'Baja' },
{ id: '2', status: 'Media' },
{ id: '3', status: 'Alta' },
{ id: '4', status: 'Urgente' }
]
});
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Edit Country',
url: 'http://aaa.com/',
items: [
{
xtype: 'combobox',
fieldLabel: 'Nombre',
name: 'status',
anchor: '50%',
displayField: 'status',
valueField: 'id',
store: store
}
],
buttons: [
{
text: 'Guardar',
handler: function () {
var form = formPanel.getForm();
var value = form.getValues();
alert(value.status);
}
}
],
renderTo: Ext.getBody()
});
store.load({
scope: this,
callback: function(records, operation, success) {
// the operation object
// contains all of the details of the load operation
//var form = formPanel.getForm();
//form.loadRecord(records[1]);
formPanel.items.first().select(records[1]);
}
});
When you call form.getValues(), you only get the value, if you want the associated record for a value, you have to search the store. http://jsfiddle.net/jjgrn/7/
var rec = store.getById(value.status);
alert(rec.get('status'));
Key is understanding that getValues() just calls getValue() for each field in the form. getValue doesn't return a record, just the field from the record that you told it to use valueField: 'id',.
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