I have followed the tutorial : http://miamicoder.com/2011/writing-a-sencha-touch-application-part-3/
to add and save notes. But save note is not working for me. What is the issue??
My code to save :
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
title: 'Edit Note',
items: [
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
// TODO: Save current note.
var noteEditor = NotesApp.views.noteEditor;
var currentNote = noteEditor.getRecord();
// Update the note with the values in the form fields.
noteEditor.updateRecord(currentNote);
//var errors = currentNote.validate();
/*if (!errors.isValid()) {
currentNote.reject();
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}*/
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore();
if (notesStore.findRecord('id', currentNote.data.id) === null) {
alert('fjghjkh');
notesStore.add(currentNote);
} else {
alert('fjghjkh');
currentNote.setDirty();
}
notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);
notesList.refresh();
NotesApp.views.viewport.setActiveItem('notesListContainer', { type: 'slide', direction: 'right' });
}
thanks
Sneha
I had the same problem. In my case, the solutaion was to add the config 'autoLoad: true' to my defined store.
Perhaps this answer helps other, who find this question by googling a similar problem.
Regards,
Andreas
Related
I'm trying to use the Rally 2.1 SDK to set a custom data field (c_wsjf) in a grid. I have a custom drop down list that I want to check the value of (c_TimeCrticalitySizing).
I created c_TimeCrticalitySizing as a feature card field in my Rally workspace with different string values (such as "No decay"). Every drop down list value will set the custom field to a different integer. When I try to run the app in Rally I get this error:
"Uncaught TypeError: Cannot read property 'isModel' of undefined(…)"
I'm thinking the drop down list value may not be a string.
How would I check what the type of the drop down list value is?
How could I rewrite this code to correctly check the value of the drop down list so I can set my custom field to different integers?
Here's my code block for the complete app. I'm still trying to hook up a search bar so for now I directly call _onDataLoaded() from the launch() function.
// START OF APP CODE
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
featureStore: undefined,
featureGrid: undefined,
items: [ // pre-define the general layout of the app; the skeleton (ie. header, content, footer)
{
xtype: 'container', // this container lets us control the layout of the pulldowns; they'll be added below
itemId: 'widget-container',
layout: {
type: 'hbox', // 'horizontal' layout
align: 'stretch'
}
}
],
// Entry point of the app
launch: function() {
var me = this;
me._onDataLoaded();
},
_loadSearchBar: function() {
console.log('in loadsearchbar');
var me = this;
var searchComboBox = Ext.create('Rally.ui.combobox.SearchComboBox', {
itemId: 'search-combobox',
storeConfig: {
model: 'PortfolioItem/Feature'
},
listeners: {
ready: me._onDataLoaded,
select: me._onDataLoaded,
scope: me
}
});
// using 'me' here would add the combo box to the app, not the widget container
this.down('#widget-container').add(searchComboBox); // add the search field to the widget container <this>
},
// If adding more filters to the grid later, add them here
_getFilters: function(searchValue){
var searchFilter = Ext.create('Rally.data.wsapi.Filter', {
property: 'Search',
operation: '=',
value: searchValue
});
return searchFilter;
},
// Sets values once data from store is retrieved
_onDataLoaded: function() {
console.log('in ondataloaded');
var me = this;
// look up what the user input was from the search box
console.log("combobox: ", this.down('#search-combobox'));
//var typedSearch = this.down('#search-combobox').getRecord().get('_ref');
// search filter to apply
//var myFilters = this._getFilters(typedSearch);
// if the store exists, load new data
if (me.featureStore) {
//me.featureStore.setFilter(myFilters);
me.featureStore.load();
}
// if not, create it
else {
me.featureStore = Ext.create('Rally.data.wsapi.Store', {
model: 'PortfolioItem/Feature',
autoLoad: true,
listeners: {
load: me._createGrid,
scope: me
},
fetch: ['FormattedID', 'Name', 'TimeCriticality',
'RROEValue', 'UserBusinessValue', 'JobSize', 'c_TimeCriticalitySizing']
});
}
},
// create a grid with a custom store
_createGrid: function(store, data){
var me = this;
var records = _.map(data, function(record) {
//Calculations, etc.
console.log(record.get('c_TimeCriticalitySizing'));
var timecritsize = record.get('c_TimeCriticalitySizing');
//console.log(typeof timecritsize);
var mystr = "No decay";
var jobsize = record.get('JobSize');
var rroe = record.get('RROEValue');
var userval = record.get('UserBusinessValue');
var timecrit = record.get('TimeCriticality');
// Check that demoniator is not 0
if ( record.get('JobSize') > 0){
if (timecritsize === mystr){
var priorityScore = (timecrit + userval + rroe) / jobsize;
return Ext.apply({
c_wsjf: Math.round(priorityScore * 10) / 10
}, record.getData());
}
}
else{
return Ext.apply({
c_wsjf: 0
}, record.getData());
}
});
// Add the grid
me.add({
xtype: 'rallygrid',
showPagingToolbar: true,
showRowActionsColumn: true,
enableEditing: true,
store: Ext.create('Rally.data.custom.Store', {
data: records
}),
// Configure each column
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'WSJF Score',
dataIndex: 'c_wsjf',
width: 150
},
{
text: 'Name',
dataIndex: 'Name',
flex: 1,
width: 100
}
]
});
}
});
// END OF APP CODE
The app works great until I add the if (timecritsize === mystr) conditional.
I also use console.log() to check that I've set all values for timecritsize to "No decay"
I have a toolbar button which when clicked should update my map to my current location. I am unable to find a working example of this functionality and hoping someone can advise me. Please see below for sample code - thanks for your help
Map:
Ext.define('MyApp.view.Myap', {
extend: 'Ext.Map',
alias: 'widget.mymap',
config: {
useCurrentLocation: false,
mapOptions:{
zoom: 9,
center: new google.maps.LatLng(42.2, -72.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
listeners: {
maprender : function(comp, map){
google.maps.event.addListenerOnce(map, "idle", function () {
var host = window.location.origin ? window.location.origin : window.location.protocol + "/" + window.location.host;
var kmlOptions = {preserveViewport: false}
var now = +new Date();
var layer = new google.maps.KmlLayer(host + '/path/to.kml?timestamp=' + now, kmlOptions);
layer.setMap(map);
return layer;
});
},
}
},
})
Toolbar Button:
Ext.define('MyApp.view.btnLocateMe', {
extend: 'Ext.Button',
alias: 'widget.btnlocateme',
config: {
ui: 'normal',
iconCls: 'locate',
iconMask: true,
text: 'Locate Me',
listeners: [
{
fn: 'onButtonTap',
event: 'tap'
}
]
},
onButtonTap: function(button, e, options) {
//Produces error: cannot call method of undefined
currentLocation: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude());
MyApp.view.MyMap.map.setCenter(currentLocation);
}
});
my two cents contribution, try this
1) in MyApp.view.Myap substitute
useCurrentLocation: false,
by
useCurrentLocation : {
autoUpdate : false
},
Also you should declare currentLocation as a variable (I presume)
var currentLocation = ...
This should works. I've use a similar logic as yours in onButtonTap but inside a controller with no problems
Best regards
I have one suggestion.
Try changing current location to
new google.maps.LatLng( this.geo.getLatitude(),this.geo.getLongitude() ) ;
I think you can gather more info from this question in here.
The simplest way - switch to the another map view with option useCurrentLocation: true set in the config
I am trying to add a search field to my form in sencha touch 1.1, but after going through examples provided by sencha touch, i could not find out a way to provide a dynamic store to the search field.
I have a store which will fetch data dynamically.
The store contains list of places and when the user enters the first letter of the place,he should be given a list of places starting from that alphabet
Here is the code i have used.
var searchField = new Ext.form.Search({
name : 'search',
placeHolder: 'Search',
useClearIcon: true,
data:siteStore,
autoComplete:true,
});
inputDataForm = Ext.extend(Ext.Panel, {
scroll: 'vertical',
autoDestroy: true,
layout: 'fit',
id:'inputForm',
initComponent: function() {
this.items = [{
xtype: 'form',
cls: 'formClass',
id:'inputImageForm',
bodyPadding: '0',
scroll: 'vertical',
items: [searchField],
}];
inputDataForm.superclass.initComponent.call(this);
}, // End fo initComponent
});
Can somebody please help.
Thank you
This is my code. It is working fine and I have docked the searchfield in a panel.
You can use this and I am sure it works.
, dockedItems: [{
xtype:'searchfield'
, name: "searchfield"
, placeHolder: 'Search Patient'
, id: 'searchPat'
, listeners: {
keyup: function(me,e){
var searchData = me.getValue();
Ext.Ajax.request({
url:'your data url'
, params:{
filter: searchData
}
, scope: this
, success: function(res){
var rec = Ext.decode(res.responseText);
var def = typeof (rec.success);
if(def != "undefined" ){
this.store.removeAll();
this.store.loadData(rec.patients);
}
}
, failure:function(res){
console.log(res);
}
})
}
, scope: this
}
I have a store as follows.
var eventsStore = new Ext.data.Store({
model: 'Event',
sorters: [{
property: 'OccurringOn',
direction: 'DESC'
}],
proxy: {
type: 'ajax',
url: BaseURL + 'Events.php',
api: {
read: BaseURL + 'Events.php',
create: BaseURL + 'Events.php'
},
reader: {
type: 'xml',
root: 'Events',
record: 'Event'
},
writer: {
type: 'xml',
writeAllFields: false,
root: 'Events',
record: 'Event'
}
},
getGroupString: function(record) {
if (record && record.data.OccurringOn) {
console.log(record.get('OccurringOn'));
return record.get('OccurringOn').toDateString();
}
else {
return '';
}
}
});
I also have a List view which gets all Events fine. I have a form which allows user to add new event and I have FormPanel for it. The FormPanel has Toolbar which has Save button which when clicked will do following.
var eventCard = It's a card
var newEventCard = eventCard.items.items[1];
var currentEvent = newEventCard.getRecord();
newEventCard.updateRecord(currentEvent);
var errors = currentEvent.validate();
// here I check errors and prompt user about them
var eventList = eventCard.items.items[0].items.items[0];
var eventStore = eventList.getStore();
eventStore.add(currentEvent);
eventStore.sync();
eventStore.sort( [ { property: 'OccurringOn', direction: 'DESC' } ] );
eventList.refresh();
The above code adds two empty rows to the MySQL database and copies the event list view items with 3 empty new items. Why this is the behavior and what I am missing?
If you can tell me what parameters are sent as POST to the Events.php when I sync that would much appreciated.
It was my fault I figured out. I was echo'ing when there was POST request to the service.
I really hope someone can help me, It seems like this should be obvious but sencha documentation isn't very easy to read and incomplete. I am trying to build a search form but it doesnt seem to take the store or the url and I can't figure out how to add parameters like page? Can anyone help? This code just produces Failed to load resource: null.
var searchField = new Ext.form.Search({
value:'Search',
url: 'someurl',
store: this.data_store,
cls:'searchfield',
listeners: {
focus: function(){ searchField.setValue(''); },
blur: function(){ if( searchField.getValue()=='' ){ searchField.setValue('Search'); } },
success: function(e){
console.log(e);
}
}
});
this.dockedItems = [ searchField ];
Ext.form.FormPanel doesn't take a Ext.data.Store or Ext.data.Model directly but does deal with Instances of Ext.data.Model. Lets say you have the following model:
Ext.regModel('MyForm', {
fields: [{name: 'id', type: 'int'},'name','description']
proxy: {
type: 'ajax',
url: 'url_to_load_and_save_form'
}
})
Now your form definition would look something like this:
Ext.form.MyForm = Ext.extend(Ext.form.FormPanel, {
record : null,
model: 'MyForm',
items: [{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
name: 'name',
allowBlank: false
},{
xtype: 'textarea',
name: 'description'
}],
submit : function(){
var record = this.getRecord() || Ext.ModelMgr.create({}, this.model);
this.updateRecord(record , true);
record.save({
scope: this,
success : function(record, opts){
this.fireEvent('saved', record);
},
callback: function(){
this.setLoading(false);
}
});
}
});
Ext.reg('MyForm',Ext.form.MyForm);
Of course you should add in some validations and a button to actually call the Ext.form.MyForm.submit method.