Related
My app requires a lot of data-input from the user. And there's repetition, so for example the person fields must be filled in three times (all possibly different).
Person fieldset that I want to reuse
Ext.define('MyApp.form.PersonForm',
{
extend: 'Ext.form.FieldSet',
xtype: 'personform',
config:
{
items:
[
{
xtype: 'textfield',
name: 'surname',
label: 'Naam:',
placeHolder: ''
},
{
xtype: 'textfield',
name: 'adres',
label: 'Adres:',
placeHolder: 'Straat en huisnummer'
},
{
xtype: 'textfield',
name: 'zipCode',
label: 'Postcode:',
placeHolder: '1234AB'
},
{
xtype: 'textfield',
name: 'city',
label: 'Plaats:',
placeHolder: 'Of stad'
},
{
xtype: 'textfield',
name: 'country',
label: 'Land:',
placeHolder: ''
},
{
xtype: 'textfield',
name: 'phone',
label: 'Telefoon:',
placeHolder: ''
},
{
xtype: 'textfield',
name: 'email',
label: 'e-mail:',
placeHolder: ''
}
]
}
});
So I've made small fieldset and am trying to reuse them several times in the form. But when I try to load the saved data it concats all fields with the same name into an array of fields, so they don't get updated.
So instead of having one fieldset with others in it, each fieldset now only contains the fields directly in it. And the must all be placed in their own container so I can access them in the controller and update\load their respective data.
Ext.define('MyApp.form.UserDataForm',
{
extend: 'Ext.Container',
requires:
[
'Ext.form.FieldSet',
'Ext.form.Panel',
'Ext.field.Hidden',
'MyApp.form.PersonForm'
],
xtype: 'userdataform',
config:
{
items:
[
{
xtype: 'formpanel',
itemId: 'userDataForm',
flex: 1,
items:
{
xtype: 'fieldset',
items:
[
{
xtype: 'hiddenfield',
name: 'id'
},
{
xtype: 'textfield',
name: 'reportCode',
label: 'Meld code:',
itemId: 'txtReportCode'
},
{
xtype: 'textfield',
name: 'firstName',
label: 'Voornaam:',
itemId: 'txtFirstName'
}
]
}
},
{
xtype: 'personform',
name: 'person'
}
]
}
});
The problem is that the fieldset directly in the panel is invisible (unlike when all fieldsets where nested in each other). So this only shows the personform. However the first fieldset is shown when I force the height to a set value.
Code for loading saved data and saving input:
onLoadUserData: function ()
{
var userDataStore = Ext.getStore('userDataStore');
var userDataRecord = userDataStore.getFirst();
var userDataView = this.getUserDataView();
var userDataForm = this.getUserDataForm();
userDataForm.setRecord(userDataRecord);
userDataForm.down('personform[name=insured]').setRecord(userDataRecord.data.person);
},
onTapBtnSave: function ()
{
var userDataView = this.getUserDataView();
var userDataStore = Ext.getStore('userDataStore');
var isNew = userDataStore.getCount() == 0;
var userDataRecord = userDataStore.getFirst();
userDataView.updateRecord(userDataRecord);
userDataRecord.data.person = userDataRecord.data.person|| Ext.create('MyApp.model.PersonModel');
userDataView.updateRecord(userDataRecord.data.person);
if (isNew)
{
userDataStore.add(userDataRecord);
}
else
{
userDataRecord.setDirty();
}
userDataStore.sync();
}
I tried using layout: 'vbox' and layout: 'flex' and or not using the flex: 1 on the containing panel.
So how do I get Sencha to show those fields when they are there, without forcing a specific height?
Edit: the problem seems to lie in using a form.Panel instead of a container. While the container will simply take the space it needs the Panel won't. But I need it to be a panel to get the loading and saving of user input working.
I am new to ExtJS 4 and struggling at times with the learning curve. I have followed the documentation on sencha's site for MVC concept for basic structure of my app, however I am having difficulty determining where/how to implement certain components/handlers/listeners as I don't quite have the feel for this frame work yet.
So, here is my question.... (Yes I did look at other posts on SO but I think at this point I am too stupid to identify and apply what similar posters may have come accross to solve my issues)
How do I bind a date field in my grid to the date picker date that is selected and vice versa? If I select a date in my date picker I would like to have my grid load relevant rows from my db. If I select a row in my grid I would like to see the date picker reflect the date in the selected row.
Can someone give me a narrative of the approach i should be taking? I have seen some code examples but I don't clearly see an obvious preferred method or the way it should be done. If there is a link someone can give me to look at I will be happy to study.
This is my first post on SO so please forgive me for any etiquette I am lacking as well as other annoying things. Thanks in advance!
Store:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync:true,
pageSize:50,
proxy:
{
type: 'ajax',
api:
{
read: 'http://192.168.0.103/testit/dao_2.cfc?method=getContent',
update: 'http://192.168.0.103/testit/dao_2-post.cfc?method=postContent'
},
reader:
{
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty : 'dataset'
}}
});
model:
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'message_id',type: 'textfield'},
{name: 'recip_email',type: 'textfield'},
{name: 'unix_time_stamp',type:'datefield'}
]
});
View:
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
store: 'Users',
plugins:[Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 1})],
dockedItems: [{ xtype: 'pagingtoolbar',
store: 'Users',
dock: 'bottom',
displayMsg: 'Displaying Records {0} - {1} of {2}',
displayInfo: true}],
initComponent: function() {
this.columns = [
Ext.create('Ext.grid.RowNumberer',
{
resizable: true,
resizeHandles:'all',
align: 'center',
minWidth: 35,
maxWidth:50
}),
{
header: 'Name',
dataIndex: 'message_id',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Email',
dataIndex: 'recip_email',
flex: 1,
editor:'textfield',
allowBlank: false,
menuDisabled:true
},
{
header: 'Date Time',
dataIndex: 'unix_time_stamp',
width: 120,
menuDisabled:true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'm/d/y'}) }
}];
this.callParent(arguments);
},
});
Viewport:
Ext.Loader.setConfig({enabled:true});
// This array is for testing.
dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
title: 'mydate',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
disabledDates:["^(?!"+dateArray.join("|")+").*$"],
// disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
Ext.Msg.alert('date picker example in init2.js');
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
});
Update to Datepicker in Viewport:
One additional note is that i notice a property attribute in the JSON packet that has the date included even without making you suggested changes to the store. I notice there may be a bug in the link you provided?? If i set to false or remove it altogether from my store it has same behavior and is included in my JSON packet.
Do I need to encode the url also? when I click on a row in my grid and hit the update button i recive the grid row on my server side with what appears to be already url encoded by extjs perhaps?
Ext.Loader.setConfig({enabled:true});
// This array is for testing.
dateArray = ["12/14/2013","12/16/2013","12/18/2013","12/20/2013"];
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
controllers: ['Users'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:
[
{
region: 'center',
//layout:'fit',
title:'The Title',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items:
[{
xtype: 'userlist',
listeners:
{
select: function(selModel, record, index, options)
{
// do something with the selected date
// Ext.Msg.alert(record.data.message_id, record.data.recip_email +'<br> ' + record.data.unix_time_stamp);
}
}
}]
},
{
region: 'west',
layout:'fit',
xtype: 'tabpanel',
activetab:0,
collapsible:false,
split: false,
title: 'The Title',
width:178,
maxWidth:400,
height: 100,
minHeight: 100,
items:
[
{
title: 'Tab 1',
xtype:'panel',
items:
[{
xtype: 'datepicker',
minDate: new Date('12/15/2013'),
maxDate: new Date(),
// Disable dates is set to invert dates in array
disabledDates:["^(?!"+dateArray.join("|")+").*$"],
// disabledDates:["^("+dateArray.join("|")+").*$"],
handler: function(picker, date)
{
// do something with the selected date
// Ext.Msg.alert('date picker example in init2.js' + '<br>' + Ext.Date.format(date,'m/d/Y'));
console.log('date picker example in init2.js' + Ext.Date.format(date,'m/d/Y'));
// get store by unique storeId
var store = Ext.getStore('Users');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", Ext.Date.format(date,'m/d/Y'));
// store.proxy.extraParams = { key:'test'};
store.load();
}
}]
},
{
title: 'Tab 2',
html: 'ers may be added dynamically - Others may be added dynamically',
}
]
}
]
});
}
});
If you want to filter records displayed in grid by selected date in date picker on the server side try to filter grid's store.
In your store configuration you need to set remoteFilter config attribute to true. Then store proxy will automatically add filter params into store load data requests. Also if you have only one instance of this store, add to configuration unique storeId.
In your datepicker handler you need set store filter to selected date:
handler: function(picker, date)
{
// get store by unique storeId
var store = Ext.getStore('storeId');
// clear current filters
store.clearFilter(true);
// filter store
store.filter("unix_time_stamp", date);
}
Then on server side you need to parse and process filter param.
I'm trying to set values for the components in a form panel and below is my code.
Form Panel with grid:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
height: 436,
width: 754,
layout: {
columns: 4,
type: 'table'
},
bodyPadding: 10,
title: 'My Form',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'displayfield',
colspan: 4,
fieldLabel: '',
value: 'Display Field'
},
{
xtype: 'displayfield',
colspan: 2,
margin: '0 50 0 0 ',
fieldLabel: 'Age',
labelAlign: 'top',
value: 'Display Field'
},
{
xtype: 'displayfield',
colspan: 2,
fieldLabel: 'Country',
labelAlign: 'top',
value: 'Display Field'
},
{
xtype: 'gridpanel',
colspan: 4,
header: false,
title: 'My Grid Panel',
store: 'MyJsonStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'DeptName',
text: 'Dept Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'DeptId',
text: 'Dept ID'
}
]
}
]
});
me.callParent(arguments);
}
});
Models:
Ext.define('MyApp.model.EmpModel', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.DeptModel'
],
fields: [
{
name: 'Name'
},
{
name: 'Age'
},
{
name: 'Country'
},
{
name: 'Dept'
}
],
hasMany: {
associationKey: 'Dept',
model: 'MyApp.model.DeptModel'
}
});
Ext.define('MyApp.model.DeptModel', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.EmpModel'
],
fields: [
{
name: 'DeptName'
},
{
name: 'DeptId'
}
],
belongsTo: {
associationKey: 'Dept',
model: 'MyApp.model.EmpModel'
}
});
Store:
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.EmpModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.EmpModel',
storeId: 'MyJsonStore',
data: {
EmpDet: [
{
EmpName: 'Kart',
Age: '29',
Dept: [
{
DeptName: 'Dev',
DeptId: '1000'
}
]
}
]
},
proxy: {
type: 'ajax',
url: 'data/empDet.json',
reader: {
type: 'json'
}
}
}, cfg)]);
}
});
Json data:
{
"EmpDet": [
{
"EmpName": "Kart",
"Age": "29",
"Dept": [
{
"DeptName": "Dev",
"DeptId": "1000"
}
]
}
]
}
Questions:
1) I had left the value of the component as "Display Field" itself because if I remove this value the width of the grid below decreases. I feel this is because of the table layout and colspans. Is there any other best way to display labels without any alignment change on value load.
2) I'm trying to set the value for the display field. I tried to do it with the afterrender event but the problem is that it throws a undefined error at Ext.getStore('MyJsonStore').getAt(0). I found that this works fine if I write the same in the click event of a button. So, I feel that the store is not loaded when I try the afterrender event of the displayfield (autoload for store is set to true). Is there an alternative for afterrender event of a component. Also, Is there a way to set all the field values at a stretch instead of setting every component one by one?
3) Also I find it difficult to do the association properly. I'm using Sencha Architect 2.2 and when I go the data index of the grid, I'm not able to get the "DeptName" and "DeptId" in the dropdown.
Please help.
For the question number 2, I want to suggest the below way. I hope it works for you.
My solution:
You can set the display fields values when the store is loaded. So you can use load event of store as below:
yourStoe.on('load',function()
{
//set display field values here
});
I am new in ExtJS, and I already, have an example of doctors list but, in doctor detail page, Its look like a populated form, Here is my view file:
Ext.define("GS.view.DoctorView", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.doctorview",
config:{
scrollable:'vertical'
},
initialize: function () {
this.callParent(arguments);
var backButton = {
xtype: "button",
ui: "back",
text: "Back List",
handler: this.onBackButtonTap,
scope: this
};
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Doctor Profile",
items: [
backButton,
{ xtype: "spacer" }
]
};
var bottomToolbar = {
xtype: "toolbar",
docked: "bottom",
items: [
]
};
var doctorNameView = {
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
};
var doctorDescView = {
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
};
this.add([
topToolbar,
{ xtype: "fieldset",
items: [doctorNameView, doctorDescView]
},
bottomToolbar
]);
},
onBackButtonTap: function () {
this.fireEvent("backToListCommand", this);
}
});
Which steps I take to convert it to dataview, or how to use my custom HTML?
Firstly, your question is very vague so you should go through some dataview tutorial or article to understand why you really need a data view here because list is a dataview and form is what you are creating as details view.
http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2
http://docs.sencha.com/touch/2-1/#!/guide/dataview
To use your custom HTML you have to use xtemplate
http://docs.sencha.com/touch/2-1/#!/api/Ext.XTemplate
I am trying to create a form embedded inside a Panel and trying to retrieve the contents of the form fields from within the controller.
Below is my view and controller code.
Ext.define('MyApp.view.SignIn', {
extend: 'Ext.Container',
requires: ['Ext.Button','Ext.form.Panel'],
xtype: 'loginPage',
config : {
fullscreen: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
html:'<img src="resources/icons/logo.png" />',
items: {
iconMask: true,
align: 'left',
text: 'Sign In',
handler: function(){
var panel = Ext.create('Ext.Panel', {
left: 0,
padding: 10,
xtype: 'loginPage',
url: 'contact.php',
layout: 'vbox',
id: 'signinform',
items: [
{
xtype: 'fieldset',
title : 'Enter Login Information:',
instructions: 'All fields are required',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'emailfield',
name: 'Email',
label: 'Email',
placeHolder: 'Valid email'
},
{
xtype: 'passwordfield',
name: 'Password',
label: 'Password',
placeHolder: '6 characters'
}]
},
{
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Login',
ui:'confirm',
id:'Login-btn',
width: '100px',
flex: 1
}, {
width: '100px'
}, {
xtype: 'button',
text: 'Register',
ui: 'decline',
width: '100px',
flex: 1,
handler: function(){
this.getParent().getParent().destroy();
}
}]//Buttons array
}//Form completion
]
}).showBy(this); //Panel created
}//Function complete
}
},
{
layout: {
type: 'vbox',
pack:'center',
align: 'center'
},
items:[{
html:'<h2>My tool</h2><h3 style="color:#F47621">Simple, intuitive and powerful data management tool.</h3>',
styleHtmlContent: true,
}
]
},
]
},
initialize: function() {
this.callParent(arguments);
},
});
And here is my controller code. I just checked the controller code it seemed to be fine with a simpler form view. So I guess the issue is with the view.
Ext.define("MyApp.controller.SignIn", {
extend : 'Ext.app.Controller',
config : {
refs : {
home : '#homePage',
login : '#loginPage',
SignIn : '#signinform'
},
control : {
'#Login-btn': {
tap : 'onLoginButtonTap'
}
}
},
onLoginButtonTap: function() {
var formValues = this.getSignIn().getValues();
console.log(formValues.username);
console.log(formValues.password);
}
});
]
},
initialize: function() {
this.callParent(arguments);
},
});
What is wrong with the form creation in the View page. Why is the form coming as undefined. Experts please help
Here:
var panel = Ext.create('Ext.Panel', {
...
You are instantiating a simple panel not a form panel. May be you want to say:
var panel = Ext.create('Ext.form.Panel', {
...
I believe the reason you are getting undefined is because those components don't exist when the view is created.
Instead of creating the panel in your view (Ext.create('Ext.Panel'...) with a handler function you should consider defining it as an item in your xtype:loginpage container with hidden : true. Then via a listener from the controller call show() on the hidden component.
I find that if I keep event listeners/handlers in my controllers, and layout/display logic in my views my application becomes much more managable.
I also try to avoid calling Ext.create(Ext.SomeCmpt) and instead use the hidden attribute.
Hope this helps.