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.
Related
i have a form A containing some fields about questions(a model in my application),but it can not submit directly by form.getForm().submit().the buttons in form A will open another window,and a field on that window.i want to attach the field to form A ,so i can submit those fields together.
the detail is as follows:
enter image description here
In this case, I would try to give two different ID's to forms. Next, retrieve the values from them and merge If the field names are different.
var first_form_values = Ext.getCmp('first-form').getForm().getValues();
var second_form_values = Ext.getCmp('second-form').getForm().getValues();
var all_values = Ext.Object.merge(first_form_values , second_form_values);
Then you have all the values and you can send them by Ext.Ajax etc.
Full example:
Ext.create('Ext.window.Window', {
title: 'First Form',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
id: 'first-form',
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
name: 'first-field',
}
]
},
buttons: [
{
text: 'Show second form'
handler: function()
{
Ext.create('Ext.window.Window', {
title: 'Second Form',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
id: 'second-form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Second field',
name: 'second-field',
}
]
},
buttons: [
{
text: 'Submit'
handler: function()
{
var first_form = Ext.getCmp('first-form'),
second_form = Ext.getCmp('second-form');
if(first_form && second_form)
{
var fist_form_values = first_form.getForm().getValues(),
second_form_values = second_form.getForm().getValues();
var values = Ext.Object.merge(fist_form_values, second_form_values);
// You have all values from two forms
}
}
}
]
}).show();
}
}
]
}).show();
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?
This seems like a trivial issue, but... I have a list of addresses in a panel to which I wish to add geolocation coordinates (and to display them on a map) that is rendered in a form panel, so that when I click on the address of interest in the panel an onTap is fired to do execute the onSelectGeolocation given below to open the form panel rendered in the ViewPort and to add any existing records to the associated form elements:
onSelectGeolocation: function(view, index, target, record, event) {
console.log('Selected a Geolocation from the list');
var geolocationForm = Ext.Viewport.down('geolocationEdit');
if(!geolocationForm){
geolocationForm = Ext.widget('geolocationEdit');
}
geolocationForm.setRecord(record);
geolocationForm.showBy(target);
}
The line that uses the setRecord method to write any existing records in my store to the form elements, however, is preventing the default values in my form panel below from getting written to the desired form elements. When I comment this out, all is good. Problem is that I need to grab those records that exist in my store, e.g., address, to display in my form. How can I do this AND write default values to my textfield elements in my form?
My form panel that is rendered as a ViewPort via the onTap is:
Ext.define('EvaluateIt.view.GeolocationEdit', {
extend: 'Ext.form.Panel',
alias : 'widget.geolocationEdit',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
width: 400,
height: 330,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'datepickerfield',
destroyPickerOnHide: true,
name : 'datOfEvaluatione',
label: 'Date of evaluation',
value: new Date(),
picker: {
yearFrom: 1990
}
},
{
xtype: 'textfield',
name: 'address',
label: 'Address',
itemId: 'address'
},
{
xtype: 'textfield',
name: 'latitude',
label: 'Latitude',
itemId: 'latitude',
value: sessionStorage.latitude,
},
/* {
xtype: 'textfield',
name: 'longitude',
label: 'Longitude',
itemId: 'longitude',
value: sessionStorage.longitude
},
{
xtype: 'textfield',
name: 'accuracy',
label: 'Accuracy',
itemId: 'accuracy',
value: sessionStorage.accuracy
},*/
{
xtype: 'button',
itemId: 'save',
text: 'Save'
}
]
}
});
Behavior is as expected. I will use Ext.getCmp on the id's for each item instead.
i have a form panel and a tree panel
the form is used to add new users, the tree is used to show the list of users
what i want is to right click a node in my tree ,click edit (already can do that) then i have my data in the add form panel and be able to modify there and update my user
so basically use the same form for adding and updating
this is how im trying to do up to know
but its not working at all
i added a model to my tree,i used loadRecord(rec), but i dont know how to bind my tree data with the form fields!
tried adding displayfield with same name from my tree model!!
my tree model and store:
Ext.define('TreeModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text' },
{ name: 'id' }
]
});
window.ATreeStore = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel',
root: Ext.decode(objt.TreeToJson()),
proxy: {
type: 'ajax'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
my tree menu:
var myContextMenu = new Ext.menu.Menu({
items: [{
text: 'Edit',
handler: function () {
Ext.getCmp('addaform').getForm().loadRecord(rec);
}
}
}]
my form:
Ext.define("Ext.app.Adduser", {
extend: "Ext.form.Panel",
title: 'Add user',
id : 'addform',
closable: true,
collapsible: true,
animCollapse: true,
draggable: true,
resizable: true,
margin: '5 5 5 5',
height: 400,
frame: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
items: [{
layout: 'column',
border: false,
items: [{
padding: '5',
columnWidth: .5,
border: false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: ' Name',
name: 'name',
allowBlank: false,
displayfield:'id',//
anchor: '95%'
}]
}, {
padding: '5',
columnWidth: .5,
border: false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First name',
name: 'fname',
allowBlank: false,
anchor: '95%'
}, {
xtype: 'textarea',
fieldLabel: 'Profile',
name: 'prof',
anchor: '95%'
}]
}],
buttons: [{
text: 'Save',
handler: function () {
this.up('form').getForm().submit
({
url: 'AddData.ashx',
params: { action: 'add' },
success: function (form, action)
{
Ext.MessageBox.show({ title: 'Success !',
msg: 'User added successfully<br />',
icon: Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
}) }
}) }]
thank you
If your TreePanel uses a TreeStore which in turn has a Ext.data.Model, then when you right click on a node (say nodeA), you should be just able to do form.loadRecord(nodeA), the API for loadRecord is here
If it's still not clear, I think this blog post could help, it talks about loading a grid record into a form. I know it's not ExtJS 4, but the key functions are the same.
Ok, let me show this with a super simple example, hope it will help.
First we create the form that we want to display stuff in, note that the renderTo property is bound to a div inside my HTML, so you might need to change that. Also note that the name property of the textarea and textfield, they are the key for the loadRecord to work, they have to match the fields defined in the model later.
var form = Ext.create('Ext.form.Panel',{
renderTo : 'form-div',
items : [{
xtype : 'textarea',
fieldLabel : 'label 1',
name : 'name'
},{
xtype : 'textfield',
fieldLabel : 'label 2',
name : 'age'
}]
});
Next, we create the tree to display our data, we start by creating a simple model :
Ext.define('Person',{
extend : 'Ext.data.Model',
fields : [{
name : 'name',
type : 'string'
},{
name : 'age',
type : 'int'
}]
});
Then we create a TreeStore that uses that model and initialize it with some inline data:
var store = Ext.create('Ext.data.TreeStore',{
model : 'Person',
root : {
expanded : true,
children : [{
name : 'John',
age : 10,
leaf : true
},{
name : 'Joe',
age : 100,
leaf : true
}]
}
});
Then we create the tree to display the data in the store. (Note that the nodes will show up as "undefined" because we are not using the default "text" property of a Node)
var tree = Ext.create('Ext.tree.Panel',{
height : 300,
width : 300,
store : store,
rootVisible : false,
renderTo : 'tree-div',
listeners : {
itemclick : function(view, record){
form.loadRecord(record);
}
}
});
Now, you should see a tree with two nodes both displayed as "undefined" on your page, as well as a Form with a textarea and a textfield. If you click on a node inside the tree, the form will display the name and age of the selected node.
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.