extjs how to bind a field to another existing form - forms

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();

Related

Submit all of grid rows with Extjs form submit

I have a grid panel in a form. Any row of the grid panel have a filefield. I want to send any row (name field and filename field) to server.
Model:
Ext.define('FM.model.DefineCode', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'filename', type: 'string'}
],
validations: [
{type: 'presence', field: 'id'},
{type: 'presence', field: 'name'},
{type: 'presence', field: 'filename'}
]
});
Store:
Ext.define('FM.store.DefineCode', {
extend: 'Ext.data.Store',
model: 'FM.model.DefineCode',
autoLoad: true,
data: []
});
View:
Ext.define('FM.view.map.DefineCode', {
extend: 'Ext.window.Window',
title: 'Define Code',
alias: 'widget.mmDefineCode',
width: 600,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'gridpanel',
title: 'myGrid',
store: 'DefineCode',
columns: [
{
text: 'Id',
xtype: 'rownumberer',
width: 20
}, {
text: 'Name',
dataIndex: 'name',
flex: 1,
editor:{
xtype: 'textfield'
}
}, {
text: 'File',
dataIndex: 'filename',
width: 200,
editor:{
xtype: 'filefield',
emptyText: 'Select your Icon',
name: 'photo-path',
buttonText: '',
flex: 1,
buttonConfig: {
iconCls: 'icon-upload-18x18'
},
listeners: {
change: function(e, ee, eee) {
var grid = this.up('grid');
var store = grid.getStore();
var newStore = Ext.create('FM.store.DefineCode',{});
store.insert(store.data.items.length, newStore);
}
}
},
}, {
text: '',
width: 40
}
],
height: 200,
width: 600,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]}
],
}],
buttons: [{text: 'OK', action: 'OK'}],
initComponent: function() {
var me = this;
Ext.apply(me, {});
me.callParent(arguments);
}
});
Controller:
...
form.submit({
url: 'icon/create',
});
When I submit form, only last row is sending to server.
Where is problem?
Why you using this ?
var newStore = Ext.create('FM.store.Path', {});
store.insert(store.data.items.length, newStore);
try using rowEditing to edit/submit 1 row data :
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
clicksToMoveEditor: 1,
listeners: {
'validateedit': function(editor, e) {},
'afteredit': function(editor, e) {
var me = this;
var jsonData = Ext.encode(e.record.data);
Ext.Ajax.request({
method: 'POST',
url: 'your_url/save',
params: {data: jsonData},
success: function(response){
e.store.reload({
callback: function(){
var newRecordIndex = e.store.findBy(
function(record, filename) {
if (record.get('filename') === e.record.data.filename) {
return true;
}
return false;
}
);
me.grid.getSelectionModel().select(newRecordIndex);
}
});
}
});
return true;
}
}
});
and place it to your plugin.
I don't try it first, but may be this will help you a little.
AND this is for your controller to add a record from your grid, you need a button to trigger this function.
createRecord: function() {
var model = Ext.ModelMgr.getModel('FM.model.DefineCode');
var r = Ext.ModelManager.create({
id: '',
name: '',
filename: ''
}, model);
this.getYourgrid().getStore().insert(0, r);
this.getYourgrid().rowEditing.startEdit(0, 0);
}
check this for your need, this is look a like. You need to specify the content-type.
And for your java need, please read this method to upload a file.

extjs form panel set default value textfield

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.

How to get data from fieldset in Sencha Touch 2?

I hava a fieldset in Sencha Touch 2 as follows:
{
id:'contactForm',
xtype: 'fieldset',
title: 'Information',
items: [
{
xtype: 'textfield',
label: 'First Name',
placeHolder: 'Your First Name',
name:'firstName',
id:'firstName',
},
{
xtype: 'textfield',
label: 'Last Name',
placeHolder: 'Your Last Name',
name:'lastName'
},
{
xtype: 'emailfield',
label: 'Email',
placeHolder: 'email#example.com'
},
{
xtype: 'button',
height: 37,
style: 'margin-left:35%',
width: 100,
iconAlign: 'center',
text: 'Submit',
action:'ContactSubmit'
},
{
xtype: 'hiddenfield',
id: 'HNumberOfBedRoom',
value:'2'
},
{
xtype: 'hiddenfield',
id: 'HPetFriendlyId',
value:'2'
}
]
}
In my controller,
I have the following:
refs: {
contactForm: '#contactForm'
}
I can retrive the value by using
var frmItems=this.getContactForm().getItems();
console.log(frmItems.items[1]._value);
This works fine but i want to retrieve the values something like
frm.get('name/id of component')
is there any way to achieve this?
Use a Ext.form.Panel as your primary container.
example snippet
Ext.define('App.view.ContactForm',
{
extend : 'Ext.form.Panel',
xtype : 'contactform',
id : 'contactForm',
config : {
items : [
{
xtype : 'fieldset',
items : [
{
{
xtype: 'textfield',
label: 'First Name',
placeHolder: 'Your First Name',
name:'firstName',
},
]
}
});
in your controller
refs : { contactForm : '#contactForm' }
then in your function you can either do
this.getContactForm().getValues().firstName
(uses the name value of the field)
or
var vals = this.getContactForm().getValues();
vals.firstName;
Avoid using Ext.getCmp() or a flat Ext.get() at the top level if you absolutely can help it. If you're building custom controls you might have to make use of those, otherwise you're making things too hard on yourself.
You should be able to assign an id to your field, and then Ext.getCmp('-yourId-'); or Ext.get('-yourId-');
( http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-id )
Dont struggle too much
first assign the id to that field and get the value using id thats it..
{
xtype: 'textfield',
id: 'username', // id
name: 'username',
placeHolder: '------UserName------',
},
Ext.getCmp('username').getValue(); // now get value using that id..
refs:[
{
ref:'contentForm',
// selector:'#contentForm'
contentForm:'#contentForm'
}
],
-
var form = Ext.getCmp('contentForm');
console.log(form.getValues());
Assign itemId: firstName to textfield
And in Controller, where you want to get the value, use this:
Ext.ComponentQuery.query('textfield[itemId=firstName]')[0].getData();

panel overlapping while loading them dynamically sencha

I have several tabs on toolbar each of them having seperate handler , i have called seperate function of each handler . The code is as below
Ext.define('myco.view.User', {
extend: 'Ext.Container',
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'User'
},
{
docked: 'top',
xtype: 'toolbar',
items: [{
text: 'My Profile',
handler: function() {
var panel = Ext.getCmp('User'),
tpl = new Ext.XTemplate([
'<div class="demo-weather">',
'<tpl for=".">',
'<div class="day">',
'<div class="date">{username}</div>',
'<tpl for="weatherIconUrl">',
'<img src="{value}">',
'</tpl>',
'<span class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></span>',
'</div>',
'</tpl>',
'</div>'
]);
panel.getParent().setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
Ext.Ajax.request({
url: 'http://localhost:8000/api/myapp/user/',
method:'GET',
callbackKey: 'callback',
defaultHeaders : 'application/json',
params: {
//key: '23f6a0ab24185952101705',
//q: '94301', // Palo Alto
format: 'json',
//num_of_days: 5
},
success : function(response, opt) {
dataarray = Ext.decode(response.responseText);
weather=dataarray.objects;
panel.updateHtml(tpl.applyTemplate(weather))
panel.getParent().unmask();
},
failure : function(response, opt) {
Ext.Msg.alert('Failed', response.responseText);
panel.getParent().unmask();
}
});
}
},
{
text:'login',
handler: function() {
var main = new Ext.Panel({
title: 'My first panel', //panel's title
fullscreen: true,
//the element where the panel is going to be inserted
//html: 'Nothing important just dummy text' //panel's content
items:[
{
xtype: 'fieldset',
title: 'Login',
items: [
{
xtype: 'textfield',
label: 'Username',
name: 'username',
id : 'username'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password',
id : 'password'
}
]
},
{
xtype: 'button',
text: 'Send',
ui: 'confirm',
handler: function() {}
}
]
});
panel.add(main);
alert('test');
}
}
]
}]
}
});
Now when i click on the tab , previous panel will not be cleared and data will get overlapped there ..... like when i click My profile profile is listed there , after that when i click login profile+ login both will be loaded one overlapping another ...
You should use Ext.tab.Panel for this, define your profile and login panels as items of a parent TabPanel, the switching will be handled by ExtJS. You can use the activate event of a Panel to add custom logic to execute when your tabs get activated.

ExtJS Table Layout not displaying fieldlabels or adding padding

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.