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.
Related
The ComboBox component shows a dropdown icon for the trigger. How can I show a search icon instead? I am using ExtJS 3.X.
You can use the triggerClass config. I found a class x-form-search-trigger that seems to work. Here is a simple example:
new Ext.form.FormPanel({
items: [{
xtype: 'combo',
fieldLabel: 'Color',
mode: 'local',
triggerAction: 'all',
displayField: 'text',
valueField: 'value',
triggerClass: 'x-form-search-trigger',
store: new Ext.data.JsonStore({
data: [
{ text: 'Green', value: '1' },
{ text: 'Blue', value: '2' },
{ text: 'Red', value: '3' },
],
fields: [ 'text', 'value' ]
})
}],
renderTo: Ext.getBody()
});
I'm trying to add a combobox to a floating (popup) form panel in ExtJS. But I'm getting a "Cannot set property 'component' of null" error and the window will not load.
I use the following code in a controller to create the window:
onTreeAddDocClick: function () {
var f = new Ext.form.Panel({
frame: false,
header: false,
floating: true,
closable: true,
items: [{
xtype: 'addDoc'
}]
});
f.show();
}
The code for the window itself is as follows:
Ext.define('OPENhrm.view.dossier.widget.popup.AddDoc', {
extend: 'Ext.form.Panel',
xtype: 'addDoc',
requires: [
'Ext.layout.container.VBox'
],
controller: "dossier-addDoc",
viewModel: {
type: "dossier-addDoc"
},
id: 'addDocForm',
frame: true,
title: 'Add document',
width: 400,
bodyPadding: '10 10 0',
layout: 'form',
closable: true,
defaults: {
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 50
},
items: [{
// item selector
xtype: 'filefield',
emptyText: 'Select Document',
fieldLabel: 'Document',
name: 'filePath',
id: 'filePath',
buttonText: 'upload document',
buttonConfig: {
icon : '/resources/images/icons/add.jpg'
}
}, {
xtype: 'combo',
fieldLabel: 'Test',
hiddenName: 'test',
store: new Ext.data.SimpleStore({
data: [
['Test1'],
['Test2']
],
id: 0,
fields: ['text']
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all',
editable: false
}],
// buttons
buttons: [{
text: 'Add',
handler: 'onAddDockClick'
}, {
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}]
});
If I remove the combobox, the window works just fine. If I place the combobox in a form somewhere else in my application (e.g. on a page with 2 panels; a searchfilter/form and a grid with search results), it works just fine. That other page however, is not a floating/popup window.
I got it to work by defining the whole page in the controller, but as I'm using a MVC structure, that doesn't seem like the way to go. Does anyone know how to get the combobox to work in a floating window, without putting the whole code for that window in the controller?
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 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()
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)