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/
Related
I got a combocox in editor grid. When entering values I have to validate so I used property forceSelection : true . But turning on force selection raise another problem as the combo value is blank when the combo box loss focus as below attached image.
Sample code:
var employeeType = [{
'typeid': 1,
'typename': 'Contractor'
}, {
'typeid': 1,
'typename': 'Regular'
}];
var employeeTypeStore = Ext.create('Ext.data.Store', {
fields: ['typeid', 'typename'],
data: employeeType
});
Ext.define('Employees', {
extend: 'Ext.data.Model',
fields: [{
name: 'emptype',
type: 'string'
}, {
name: 'name',
type: 'string'
},
]
});
var empStore = Ext.create('Ext.data.Store', {
model: 'Employees',
data: [{
'emptype': 'Regular',
'name': 'John Doe'
},{
'emptype': 'Regular',
'name': 'Ricky'
},{
'emptype': 'Regular',
'name': 'Mason'
}]
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: empStore,
width: 1000,
height: 500,
title: 'Employees',
columns: [{
text: 'Employee Type',
dataIndex: 'emptype',
editor: {
xtype: 'combobox',
queryMode: 'local',
store: employeeTypeStore,
displayField: 'typename',
valueField: 'typeid',
forceSelection : true
}
}, {
text: 'Employee Name',
dataIndex: 'name'
}],
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
}
});
If the value is false then I need to show the last correct value.
Its the Expected behavior.
Setting forceSelection: true will restrict the user to select the value which is present in the list only. So if you loose the focus without selecting any item it will gonna blank.
You can use typeAhead: true to populate and autoselect the remainder of the text being typed if it matches a known value.
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 have a form that has a field that gets populated by my store:
Ext.define('EcommBackoffice.store.TransactionProviderStatus', {
extend: 'Ext.data.Store',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'resources/data/providerstatus.json',
reader: {
type: 'json',
root: 'providerstatus'
}
},
fields: ['id', 'name']
});
My store contains a simple list of items:
{
providerstatus: [{
id: "EXPIRED",
name: "EXPIRED"
}, {
id: "ERROR",
name: "ERROR"
}, {
id: "FRAUD",
name: "FRAUD"
}, {
id: "PAID",
name: "PAID"
}, {
id: "UNCONFIRMED",
name: "UNCONFIRMED"
}]
}
Inside my form, the above store is then populated by a BoxSelect:
{
xtype: 'boxselect',
name: 'providerstatus',
fieldLabel: oMe.providerstatusField,
width: 468,
store: 'TransactionProviderStatus',
displayField: 'name',
valueField: 'id',
minChars: 2,
typeAhead: true
}
While this perfectly works, I also intend to add more items while the user types new values in it. Note that this BoxSelect is a multi-selection. Currently, when I type in random values on it, it simply clears it out.
How do I set up this particular field in such a way that I will be able to add more items, and include it as part of the data that will be passed on submit?
Did you try forceSelection:false for this boxselect.
When forceSelection is false, new records can be created by the user as they are typed. These records are not added to the combo's store. Multiple new values may be added by separating them with the delimiter, and can be further configured using the createNewOnEnter and createNewOnBlur configuration options.
Also check createNewOnEnter and createNewOnBlur
Create new on Enter for Box Select
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);
}
In extJS Form for adding and editing data i want to add a field that will not send any kind of data, only display it to the user when he chooses an id from combobox.
Now everything works fine, it's just i'm playing with code, and want to learn new stuff.
I'm getting data from a table which has material as Primary key and description of that key.
this.brand = Ext.create('Ext.data.Store',
{
fields: ['material','description'],
autoLoad: true,
proxy:
{
type: 'ajax',
url: 'sku/load',
reader:
{
type: 'json',
root: 'data'
}
}
});
Now when i'm adding a new item to the table and choose from combobox
{
xtype: 'combobox',
fieldLabel: 'Material SKU',
name: 'mate_fk',
store: this.brand,
queryMode : 'local',
displayField: 'material',
valueField: 'material'
},
i want to have a field underneath it that will show the description of the material, but when i click save it will not send any data.
Something like this:
{
xtype: 'combobox',
fieldLabel: 'Material SKU',
name: 'mate_fk',
store: this.brand,
queryMode : 'local',
displayField: 'material',
valueField: 'material'
},
{
name: 'description',
fieldLabel: 'Material Description',
displayField: 'description',
}
for an example i have 3 items
Material Description
1 It's nice
2 It's beautiful
3 It's ugly
So when i chose 1 it will show:
1
It's nice
I tryed with the code above but it kinda failed. What do i have to put into field of description to make it work
One way to accomplish this would be to add a listener to the combo for the change event. And modify a displayfield below when that event fires.
Something similar to this (#comboDescrFld is the displayfield in this example):
listeners:{
change:function(me, newValue){
if(newValue){
var descr = me.getStore().findRecord('key', newValue).get('descr');
me.up('form').down('#comboDescrFld').setValue(descr);
}else{
me.up('form').down('#comboDescrFld').setValue('No Selection Made');
}
}
}
Here is a fiddle demonstrating the working code.
And the full source below:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel',{
width:400,
height:400,
renderTo:Ext.getBody(),
title:'Example Combo With Field Tied',
items:[{
xtype:'combo',
displayField:'key',
valueField:'key',
store:Ext.create('Ext.data.Store',{
fields:['key','descr'],
data:[{
'key':1,
'descr':'Hello World'
},{
'key':2,
'descr': 'Another Field'
},{
'key':3,
'descr':'Even More Stuff Here'
}]
}),
listeners:{
change:function(me, newValue){
if(newValue){
var descr = me.getStore().findRecord('key', newValue).get('descr');
console.log(descr);
me.up('form').down('#comboDescrFld').setValue(descr);
}else{
me.up('form').down('#comboDescrFld').setValue('No Selection Made');
}
}
}
},{
xtype:'displayfield',
value:'No Selection Made',
itemId:'comboDescrFld'
}]
});
}
});