In my Extjs4 application I have a grid and a form.
The user model:
Ext.define('TestApplication.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int', useNull: true },
{ name: 'email', type: 'string'},
{ name: 'name', type: 'string'},
{ name: 'surname', type: 'string'}
],
hasMany: { model: 'Agency', name: 'agencies' },
});
And the Agency:
Ext.define('Magellano.model.Agency', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int', useNull: true},
{name: 'name', type: 'string'}
]
});
Then in my form I'm creating the checkboxes:
[...]
initComponent: function() {
var store = Ext.getStore('Agencies');
var checkbox_values = {xtype: 'checkboxfield', name: 'agencies[]'};
var checkboxes = []
store.each(function(record){
var checkbox = {xtype: 'checkboxfield', name: 'agency_ids',
boxLabel: record.get('name'), inputValue: record.get('id')};
checkbox.checked = true;
checkboxes.push(checkbox)
});
this.items = [{
title: 'User',
xtype: 'fieldset',
flex: 1,
margin: '0 5 0 0',
items: [{
{ xtype: 'textfield', name: 'email', fieldLabel: 'Email' },
{ xtype: 'textfield', name: 'name', fieldLabel: 'Nome' },
}, {
title: 'Agencies',
xtype: 'fieldset',
flex: 1,
items: checkboxes
}];
[...]
Everything works well for sending form I am receiving all the data and can save it into database.
When user clicks on the grid the record is loaded in the form with the standard:
form.loadRecord(record);
The problem is that the checkboxes are not checked. Are there any naming conventions for checkbox elements so Extjs can detect what to set? How can I setup the relations so the form will understand what to check? Or should I do everything by hand?
In your form, you can do something like this :
{
xtype: 'checkboxfield',
name: 'test',
boxLabel: 'Test',
inputValue: 'true',
uncheckedValue: 'false'
}
I believe you have to use someCheckbox.setValue(true) to check a checkbox dynamically, or to uncheck someCheckbox.setValue(false)
Related
I am having the form and grid panel. Form receive some data and after clicking on add button on the form , the data should go to grid panel means it will added into grid. I have some code but not working.
Ext.onReady(function() {
var addUserData = [
{
Utype: "Admin",
Uname: "Jacob",
Uemail : "adminjacob#gmail.com",
},];
Ext.define('AddUsersModel', {
extend: 'Ext.data.Model',
fields: ['Utype', 'Uname', 'Uemail']
});
var addUserStore = Ext.create('Ext.data.Store', {
data : addUserData,
model : 'AddUsersModel'
});
var added_users = Ext.create('Ext.grid.Panel', {
id:'addUsersID',
store: addUserStore,
border:0,
columns:
[ {
text : '<span class="cb_head">Type</span>',
dataIndex: 'Utype',
flex : 1,
},{
text: '<span class="cb_head">Name</span>',
dataIndex: 'Uname',
flex : 1,
},{
text: '<span class="cb_head">Email</span>',
dataIndex: 'Uemail',
flex : 1,
}
],
stateId: "added_users_state_id",
stateful: true,
stateEvents: ['columnresize', 'columnmove', 'show', 'hide' ],
});
added_users.render('added_users');
var empType = Ext.create('Ext.data.ArrayStore', {
fields: ['searchopt'],
data : [['Admin'],['Trader']],
id:'CUSTOMERitems',
});
var add_user = Ext.create('Ext.form.Panel', {
bodyPadding: 5,
id:'addUserID',
defaultType: 'textfield',
items: [{
xtype: 'combobox',
fieldLabel: 'Employee Type',
emptyText : 'Select type',
id:'emptype',
name: 'type',
allowBlank: false,
typeAhead: true,
triggerAction: 'all',
selectOnFocus:true,
store: empType,
queryMode: 'local',
displayField: 'searchopt',
valueField: 'searchopt',
listeners: {
beforequery: function (record) {
record.query = new RegExp(record.query, 'i');
record.forceAll = true;
}
}
},{
fieldLabel: 'Name',
emptyText : 'Name',
name: 'name',
allowBlank: false
},{
fieldLabel: 'Email',
name: 'email',
emptyText : 'Email',
allowBlank: false,
width:170,
},{
fieldLabel: 'City',
emptyText : 'City',
name: 'city',
allowBlank: false
},{
fieldLabel: 'Zip',
emptyText : 'Zip',
name: 'zip',
allowBlank: false
},
],
buttons: [ {
text: 'Add',
handler: function(form,grid,store) {
}
}],
});
add_user.render('add_user');
});
Can anyone help me out?
Kind Regards,
May be you can try setting the value of autoLoad to true
var addUserStore = Ext.create('Ext.data.Store', {
data : addUserData,
model : 'AddUsersModel',
autoLoad: true
});
I'm using EXT.JS 4 with MVC.
I have a view and a controller declared as below:
view/company/MarketData.js
Ext.define('Market.view.company.MarketData', {
extend: 'Ext.form.Panel',
requires: ['Market.store.HistoricalMarketData'],
store:'HistoricalMarketData',
xtype: 'companyMarketData',
initComponent: function() {
this.callParent();
},
items: [{
xtype:'fieldset',
columnWidth: 0.5,
border:true,
padding:5,
//disabled:true,
collapsible: false,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
fieldLabel: 'Time',
//xtype: 'displayfield',
name: 'time',
readOnly:true
}, {
fieldLabel: 'Open',
//xtype: 'displayfield',
name: 'open'
}, {
fieldLabel: 'High',
//xtype: 'displayfield',
name: 'high'
}, {
fieldLabel: 'Low',
//xtype: 'displayfield',
name: 'low'
}, {
fieldLabel: 'Close',
//xtype: 'displayfield',
name: 'close'
}, {
fieldLabel: 'Volume',
//xtype: 'displayfield',
name: 'volume'
}]
}]
});
view/controller/ChartController.js
Ext.define('Market.controller.ChartController', {
extend:'Ext.app.Controller',
stores:['HistoricalMarketData'],
models: ['MarketData'],
views: ['company.MarketData'],
init: function() {
this.control({
'#companyChartItemId series[type=column]': {
itemmouseup:this.onItemMouseUp
},
'#companyChartItemId': {
mouseenter:this.onMouseEnter
}
});
},
onItemMouseUp: function (item) {
//do something
},
onMouseEnter: function (e) {
var view = this.getCompanyMarketDataView();
var form = view.superclass.getForm();
var store = this.getHistoricalMarketDataStore();
var data = store.getAt(0);
form.loadRecord(data);
}
});
the problem is that onmouseenter event the form is undefined:
onMouseEnter: function (e) {
var view = this.getCompanyMarketDataView();
var form = view.superclass.getForm();
Any thoughts how can I recover the form from the view?
You can use Ext.ComponentQuery.query(), which returns an array of matching components.
For example
Ext.ComponentQuery.query('companyMarketData')[0].doSomething();
It is good practice to use itemIds for your components.
Also, did you try passing the default params to the onMouseEnter function?
You seem to be calling view.superclass.getForm(), but you are not passing the view param, which should be first in order. Instead, you are passing e.
i have a abstract form, that describes any basics fields. My idea, is that the form is shown with 3 columns layout.
So, i write:
Ext.define('AM.view.forms.UsuarioBase',{
extend: 'Ext.form.Panel',
bodyPadding: '5px 5px 5px 5px',
bodyStyle: 'border: none',
fieldDefaults: {
labelWidth: 65,
labelAlign: 'top'
},
initComponent: function(){
this.infoPersonal = [ anyFields ];
this.infoCuenta = [ anotherFields ];
this.infoContacto = [
{ fieldLabel: 'Tel Casa', name: 'Contacto-2', allowBlank: true},
{ fieldLabel: 'Tel Movil', name: 'Contacto-3', allowBlank: true},
{ fieldLabel: 'Tel Trabajo', name: 'Contacto-1', allowBlank: true},
{ fieldLabel: 'Tel Otro', name: 'Contacto-4', allowBlank: true},
{ fieldLabel: 'E-mail', name: 'Email', allowBlank: true},
{ fieldLabel: 'Domicilio', name: 'Domusuario', allowBlank: true}
];
this.items = [{
bodyStyle: 'border: none',
layout: 'column',
items: []
}];
this.callParent(arguments);
}
});
The fields, are in variables, because in the subclass i can add/remove/edit one or more fields.
So, in the subclass i do:
initComponent: function(){
this.callParent(arguments);
// Columnas
var primeraCol = {defaultType: 'textfield', style:'margin-left: 2px',items: this.infoPersonal};
var segundaCol = {defaultType: 'textfield', style:'margin-left: 2px',items: this.infoContacto};
var terceraCol = {defaultType: 'textfield', style:'margin-left: 2px',items: this.infoCuenta};
this.add(primeraCol);
this.add(segundaCol);
this.add(terceraCol);
}
The form is displayed with the correct fields in the columns. But, the columns not show inline, else, one below the other.
Any ideas ?.
The items in your column layout need to have either width (a value in pixels) or columnWidth (a ratio) specified. For example, to have three columns of equal width:
var primeraCol = {columnWidth: 0.333, defaultType: 'textfield', style:'margin-left: 2px',items: this.infoPersonal};
var segundaCol = {columnWidth: 0.333, defaultType: 'textfield', style:'margin-left: 2px',items: this.infoContacto};
var terceraCol = {columnWidth: 0.333, defaultType: 'textfield', style:'margin-left: 2px',items: this.infoCuenta};
I have a form with search (filtering) fields like this:
xtype: 'form',
id: 'searchPanel',
title: 'Search',
collapsible: true,
bodyPadding: 10,
height: 210,
buttonAlign: 'left',
defaults: {
width: 400,
labelWidth: 120,
allowBlank: true,
enableKeyEvents: true
},
layout: {
type: 'table',
columns: 2
},
items: [
{
xtype: 'textfield',
name: 'txtFltrSiteName',
fieldLabel: 'Site name or alias',
id: 'txtFltrSiteName'
},
{
xtype: 'textfield',
name: 'txtMonthTraffic',
fieldLabel: 'Month traffic',
id: 'txtMonthTraffic',
style: 'margin-left: 100px;'
},
{
xtype: 'combo',
id: 'ddlFltrPM',
name: 'ddlFltrPM',
fieldLabel: 'Project manager',
displayField: 'display_name',
valueField: 'user_id',
editable: false,
store: new storeOfUsers({ filters: [{ property: 'user_group_code', value: 'projectmanager', exactMatch: true }] })
},
// and many other fields below
But when i click on search button, i have two post request. One - with filter in it, second is without.
My code for send button action:
xtype: 'button',
id: 'btn_srch_set',
text: 'Searh',
margin: '10 7 0 0',
width: '',
handler: function() {
var filters = new Array();
var site_name = Ext.getCmp('txtFltrSiteName').getValue();
if(site_name.length > 0)
filters.push({dataIndex: 'site_name', type: 'string', value: site_name});
var project_name = Ext.getCmp('txtFltrProjectName').getValue();
if(project_name.length > 0)
filters.push({dataIndex: 'project_name', type: 'string', value: project_name});
var pm = Ext.getCmp('ddlFltrPM').getValue();
if(pm && pm > 0)
filters.push({dataIndex: 'project_manager_id', type: 'int', value: {'eq':pm}});
// many other fields
listOfSites.filters.removeAll();
if(filters.length > 0)
listOfSites.filters.addFilters(filters);
listOfSites.store.load();
}
P.S.
When I overwrite in search button handler function this line:
filters.push({dataIndex: 'project_manager_id', type: 'string', value: pm});
Evrything is ok and there is only one request, so problem might be here. But i'm stuck and have no idea why it works such way.
Thanks for any help,
Stanislav.
UPD*
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: true, // json encode the filter query
local: false,
filters: [{
type: 'string',
dataIndex: 'site_name'
}, {
type: 'date',
dataIndex: 'startdate'
}, {
type: 'string',
dataIndex: 'project_name'
// more fields below
Try following
if(filters.length > 0)
listOfSites.filters.addFilters(filters);
else
listOfSites.store.load();
addFilters() may already call sync()
ExtJS 4.1.
Let's imagine we have some form:
Ext.define('App.view.editform', {
extend: 'Ext.form.Basic',
defaultType: 'textfield',
items: [
{
fieldLabel: 'Title',
name: 'title',
allowBlank: false,
}, {
xtype: 'textarea',
fieldLabel: 'Text',
name: 'text',
height: 160,
}, {
xtype: 'filefield',
fieldLabel: 'Image',
name: 'image',
}, {
xtype: 'hidden',
name: 'id',
},
],
});
and a Store:
Ext.define('App.store.Store', {
extend: 'Ext.data.Store',
model: new Ext.data.Model({
fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'},
{name: 'text', type: 'string'},
],
proxy: {
type: 'ajax',
url: '/someurl',
reader: {
type: 'json',
root: 'results'
},
},
}),
autoLoad: true,
autoSync: true,
});
To modify Records in Store we can use loadRecord(); method on our form and updateRecord(); method to submit our changes to Store (then to server). But at server every Record has image associated with it.
updateRecord(); method only submit text fields to Store. Model can't contain binary type field.
So is there a way to upload an image using forms updateRecord(); method?
No. Gotta have special handler for this on the server side.