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()
});
Related
Created a form in extjs-6 - modern for file upload.
After new update on chrome browser i am getting following error "Form submission canceled because the form is not connected"
I tried with rendering the form on body also, still getting the same error.
Please suggest anything i am missing.Thanks in advance.
Ext.define('LayersSurvey.view.Attachments',
{
extend: 'Ext.form.Panel',
alias: 'widget.attachments',
controller: 'Basecontrol',
closeAction: 'hide',
closable: false,
colapsible: true,
//zIndex: 9999,
scrollable: true,
renderTo: Ext.getBody(),
multipartDetection:true,
items:
[{
xtype: 'selectfield',
label: 'Floor',
labelAlign: 'left',
//labelWidth :'30%',
name: 'attachmentType',
required: true,
options:
[{
text: 'G-2',
value: '-2'
}, {
text: 'G-1',
value: '-1'
},{
text: 'G',
value: '0'
}, {
text: 'M',
value: '0.5'
},{
text: 'G+1',
value: '1'
}, {
text: 'G+2',
value: '2'
},{
text: 'G+3',
value: '3'
}, {
text: 'G+4',
value: '4'
},{
text: 'G+5',
value: '5'
}, {
text: 'G+6',
value: '6'
},{
text: 'G+7',
value: '7'
},{
text: 'G+8',
value: '8'
},{
text: 'G+9',
value: '9'
},{
text: 'G+10',
value: '10'
}],
listeners:
{
}
},{
xtype: 'filefield',
//label: "Attachment:",
name: 'photo',
//bodyAlign:'center',
accept: 'image',
listeners:
{
tap:'onMediaChange'
}
},
{
xtype:'button',
text: 'Upload',
ui: 'action',
action:'',
listeners: {tap:'onMediaUpload'}
}]
});
In the config for your form, make sure enableSubmissionForm is set to false.
In the case where I had this issue, I was using Architect to create the web app version of my app, and in Chrome I was getting the same error. By default, enableSubmissionForm seems to be true in extjs 6.x modern.
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?
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.
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)
I have a FormPanel with 3 columns. Each column is 33% of the FormPanel width. Looks something like this:
searchForm = new Ext.FormPanel({
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [{
layout: 'column',
items: [{ // column #1
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Banner ID',
name: 'bannerID',
anchor: '95%',
},
new Ext.form.ComboBox({
fieldLabel: 'Advertiser',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Advertiser',
store: advertiserList,
valueField: 'id',
displayField: 'name'
})] // close items for first column
}, {
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Banner Name',
name: 'bannerName',
anchor: '95%',
},
new Ext.form.ComboBox({
fieldLabel: 'Art Type',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Art Type',
store: artTypesList,
valueField: 'id',
displayField: 'name'
})] // close items for second column
}, {
columnWidth: .33,
layout: 'form',
items: [{
xtype: 'hidden'
},
new Ext.form.ComboBox({
fieldLabel: 'Art Size',
typeAhead: true,
triggerAction: 'all',
mode: 'local',
emptyText: 'Art Size',
store: artSizeList,
valueField: 'id',
displayField: 'name'
})] // close items for third column
}]
}]
}); // close searchForm FormPanel
It displayed something that looks like this:
Only problem is I want the "Art Size" field/label to be aligned on the same row as the "Advertiser" and "Art Type" fields. Is there any way to add a "blank" item, such that it forces the entry down to the correct row? Is there another approach to this that I'm missing?
Thanks!
EDIT:
This worked:
{
xtype: 'component',
fieldLabel: ' ',
labelSeparator: ' ',
}
by default empty labels are hidden (the field is pushed to the left).
instead of putting '  ;' label ...
fieldLabel: ' ',
labelSeparator: ' ',
you can do it properly:
hideEmptyLabel : false
witch will align your filed component even if no label is specified.
EDIT: This worked:
{
xtype: 'component',
fieldLabel: ' ',
labelSeparator: ' ',
}
Your solution will work but it is not the ExtJS(/HTML tables) way.
You are using a column layout so you can use colspan: 2 on the banner name field which results in the same output.
You also can use rowspan to have your field cover two rows :)
None of the above seems to have worked for me. I had to explicitly set the height of the empy cell.
xtype: 'label',
text: ' ',
flex:1,
height:22
Disappointing to say the least.
However this only works with vBox layout. If I use anchor layout then nothing works :(