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 :(
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 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()
I have a form which has a number of different fields and ultimately will become a dynamic formPanel.
I've opted for the table layout since it's easier to lay out the components but for some reason, the defaults settings are not applying and no field Labels are being displayed for any fields.
I've set out the configuration like:
SearchForm = Ext.extend(Ext.FormPanel, {
id: 'myForm'
,title: 'Search Form'
,frame:true
,waitMessage: 'Please wait.'
,labelWidth:80,
buttonAlign:'center'
,initComponent: function() {
var config = {
items: [{
layout:{
type:'table',
columns:5
},
defaults:{
//width:150,
bodyStyle:'padding:20px'
},
items:[{
xtype: 'label',
name: 'dateLabel',
cls: 'f',
text: "Required:"
},
{
xtype: 'datefield',
fieldLabel: "From Date",
value: yesterday,
width: 110,
id: 'date1'
},
{
xtype: 'datefield',
fieldLabel: "To Date",
id: 'date2',
width: 110,
value: yesterday
},
{
xtype: 'displayfield', value: ' ',
height:12,
colspan:2
}
],
buttons: [{
text: 'Submit',
id: "submitBtn",
handler: this.submit,
scope: this
},{
text: 'Reset',
id: "resetBtn",
handler: this.reset,
scope: this
}
]
}]};
// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
SearchForm.superclass.initComponent.apply(this, arguments);
}
});
The problem is because you're defining the layout to be table, hence ExtJS not rendering the labels of fields correctly.
In each column, wrap your fields with an Ext.Container and give the panel a layout of form. That will tell ExtJS to render the labels correctly.
I have a form panel that uses a table layout to display a form. I need to add in functionality to add /remove a set of components.
The add button should add a new row of components underneath the existing elements & the remove button should remove that last added row.
The formpanel can add a new field but it's appearing below the buttons and the form is not increasing in width (see screen shot below). I've tried this with both the insert and add function but both have the same effect.
Does anyone know how:
1) I can add a series of components in the next row?
2) How I can remove the next row.
Partial formPanel code & button code:
![SearchForm = Ext.extend(Ext.FormPanel, {
id: 'myForm'
,title: 'Search Form'
,frame:true
,waitMessage: 'Please wait.'
//,labelWidth:80
,initComponent: function() {
var config = {
items: [{
layout:{
type:'table',
columns:5
},
buttonAlign:'center',
defaults:{
//width:150,
//bodyStyle:'padding:100px'
style:'margin-left:20px;'
},
items:[//row 1
{
xtype: 'label',
name: 'dateLabel',
cls: 'f',
text: "Required:"
},
{
xtype: 'container',
layout: 'form',
items: {
xtype: 'datefield',
fieldLabel: "From Date",
value: yesterday,
width: 110,
id: 'date1'
}
}][1]
buttons: [{
text: 'Add More Criteria (max 10 items)',
id: "addBtn",
scope: this,
handler: function(){
alert('hi');
/*this.items.add({
xtype : 'textfield',
fieldLabel : 'Extra Field',
name : 'yourName',
id : 'yourName'
}); */
this.insert(4,{
xtype: 'textfield',
id: 'input20',
//hideLabel: true,
width: 180,
fieldLabel: 'hi'
});
this.doLayout();
}
}
Easiest way would be to have a fieldset in the form to hold all the 'rows' and then add a row to this fieldset using fielset.add()
(Your 'row' can be another fieldset that has all the fields)
Dynamic form fields generation seems to be obvious and there are lots of examples and some blogs for mootools etc but in extjs world i couldn`t find a working example(probably because most people use powerful Extjs grid).I had to invent one by myself for MedAlyser project! and im sharing it with you.she might have bugs and/or be incomplete but i hope she helps a bit.
function addressCounter(incr) {
if (!this.no) {
this.no = 0;
} else {
this.no = this.no + 1;
};
};
var counter = new addressCounter();
console.log(counter.no);
//put below code inside your form items
{
xtype: 'button',
text: 'Add address ',
id: 'addaddress',
handler: function () {
counter.no = counter.no + 1;
console.log(counter.no);
Ext.getCmp('patientaddress').add([{
xtype: 'combo',
store: 'AddressType',
displayField: 'name',
valueField: 'name',
fieldLabel: 'Address Type',
id: 'addresstype' + counter.no,
name: "Patientaddress[addresstype][]",
value: 'Home'
}, {
fieldLabel: 'zip',
width: 160,
maxLength: 10,
enforceMaxLength: true,
maskRe: /[\d\-]/,
regex: /^\d{5}(\-\d{4})?$/,
regexText: 'Must be in the format xxxxx or xxxxx-xxxx',
name: "Patientaddress[zip][]",
id: 'zip' + counter.no
}, {
fieldLabel: 'Address 1',
name: "Patientaddress[address1][]",
id: 'address1' + counter.no
}, {
fieldLabel: 'Address 2',
name: "Patientaddress[address2][]",
id: 'address2' + counter.no
}, {
fieldLabel: 'City',
name: "Patientaddress[city][]",
id: 'city' + counter.no
}, {
fieldLabel: 'State',
name: "Patientaddress[state][]",
id: 'state' + counter.no
}, {
xtype: 'combo',
store: Ext.create('MA.store.Countries'),
displayField: 'name',
valueField: 'id',
forceSelection: true,
fieldLabel: 'Country',
typeAhead: true,
queryMode: 'local',
name: "Patientaddress[country][]",
id: 'country' + counter.no
} // eof
// countries;
,
Ext.getCmp('addaddress'), {
xtype: 'button',
text: 'Remove address',
id: 'removeaddress' + counter.no,
handler: function (
thisButton, eventObject) {
activeRemoveButtonId = thisButton.getId().split('removeaddress')[1];
console.log('activeRemoveButtonID:' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('address1' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('address2' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('city' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('state' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('country' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('removeaddress' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('addresstype' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('zip' + activeRemoveButtonId);
Ext.getCmp('patientaddress').doLayout();
}
}]);
Ext.getCmp('patientaddress').doLayout();
} // eof function
}, // eof Add button
Removing fields was more complicated because the remove button needs to know exactly which field has to be removed. This code creates new fields and removes them correctly as you asked for.Any suggestions are welcome.