Im new to sencha touch and going through the obligatory hair pulling and head2desk pounding.
Im trying to display a List but Im having a problem.
Im using a beforeshow event to load my json store before the list is displayed. But it's not firing the event. If any can help it is MOST appreciated.
My code is as follows: *note- this code is AS/400 centric so the /%...%/ is for that
function doList() {
var List1 = new Ext.List ({
id : List1,
renderTo : 'panel',
fullscreen: true,
showAnimation: {
type: 'slide',
duration: 250
},
cls: 'demo-list',
width: Ext.is.Phone ? undefined : 300,
height: 500,
store: ListStore,
itemTpl: '<strong>{SCEQPT}</strong>',
grouped: true,
indexBar: true,
onItemDisclosure: function(record, btn, index) {
doPopUp(record);
},
listeners: {
'beforeshow': function () {
alert('beforeshow');
var StoreList = Ext.StoreMgr.get('ListStore'
StoreList.load({
params: {
screfr: Ext.getCmp('SCREFR').getValue(),
scptyp: scptyp,
user : '/%SCUSER%/'
}
});
}
}
});
}
beforeshow listener is triggered only when you are displaying an item with show() method.
Try using the listeners
'render','beforerender' and 'afterrender'. instead.
Related
New to Kendo and I'm having a tough time getting my JSON data to display in the Kendo Grid. If i reference my $scope.actionData through a normal html table, i'm able to view it in the page.
Ultimately I'm trying to accomplish this
The column headers display on the page, but no data beneath them.
When I'm attempting to populate the kendo grid, I can see the data I'm expecting through the Chrome Kendo UI Inspector in the DataSource -> Options -> Data Array, but I can't figure out how to get it to display on the page, and it's not populating the DataSource -> Data array. I've tried working through the examples on the angular-kendo page, but no luck. I've also tried adding various elements/tags under the div in the html, but I'm back where I started.
Let me know if I need to add anything else. Any assistance getting this to populate is greatly appreciated. Thanks in advance!
HTML:
<div kendo-grid k-data-source="gridOptions"></div>
Controller:
var actionHistoryControllers = angular.module('actionHistoryControllers', ['kendo.directives'])
.controller('ActionHistoryCtrl', ['$scope', '$routeParams', 'ActionHistory',
function ($scope, $routeParams, ActionHistory) {
$scope.actionData = ActionHistory.query({ appid: $routeParams.appid },
function (data) {
$scope.error = false;
$scope.errorMsg = "";
},
function (data) {
$scope.error = true;
$scope.errorMsg = "<strong>Unable to load!</strong> Please reload the page.";
});
$scope.gridOptions = {
data: $scope.actionData,
columns: [
{field: "UserID", title: "User ID"},
{field: "ActionText", title: "Action Text"}]
}
}])
Chrome Kendo UI Inspector:
Data source
options: Object{9}
data: Array[3]
0: Object{17}
ActionHistoryID: 315911
ActionText: "System"
...
Please replace the following:
$scope.gridOptions = {
data: $scope.actionData,
columns: [
{field: "UserID", title: "User ID"},
{field: "ActionText", title: "Action Text"}]
}
with the following:
$scope.gridOptions = {
dataSource: {
transport: {
read: function (o) {
o.success($scope.actionData);
}
},
columns: [
{field: "UserID", title: "User ID"},
{field: "ActionText", title: "Action Text"}]
}
}
I am using the following code to display my current location on Sencha Touch 2. Its showing the correct latitude in console.log() but not showing the map. Please help.
Ext.define('restApp.view.GreetingView', {
extend: 'Ext.Map',
alias: 'widget.mymap',
config: {
fullscreen: true,
//tpl: '<p>The ID is {uuid}</p><p>The content is {display}</p>',
layout: {
type: 'fit'
}
},
initialize:function(){
Ext.Viewport.add({
xtype: 'map',
id:'geomap',
itemId:'ma'
});
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
frequency: '10000',
listeners: {
locationupdate: function (geo) {
var center = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
Ext.getCmp('geomap').setData(center);
//restApp.view.GreetingView.getComponent('ma').update(center);
var marker = new google.maps.Marker({
position: center,
map: Ext.getCmp('geomap').map
});
console.log('New latitude: '+ geo.getLatitude());
},
locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if (bTimeout) {
alert('Timeout occurred.');
}
else {
alert('Error occurred.');
}
}
}
});
}
});
OLD ANSWER
Comparing it to a snippet I use for the same purpose (shown below), I realised the issue is a simple one. "center" is a reserved word. Try using a different variable name.
PART OF EDIT: removal of code snippets.
NEW ANSWER
I looked around and noticed your "project" is but a piecemeal collection of demo code.
Here's a complete code solution, with all excess pieces removed for simplicity, as well as over use of variables, also expanded to a longwinded format to be obvious.
/*
The application, including a simple launcher.
*/
Ext.application({
requires : ['Ext.device.Geolocation'],
views : ['MainView'],
controllers : ['Maps'],
name : 'Geo',
launch: function() {
Ext.create('Geo.view.MainView', {fullscreen: true});
}
});
/*
The View to display the map, as well as how to include the navigation bar
and include a "you are here" button.
*/
Ext.define('Geo.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainview',
requires: [
'Ext.Panel',
'Ext.Map',
'Ext.navigation.Bar',
'Ext.Button'
],
config: {
items: [
{
xtype : 'panel',
title : 'Map',
itemId : 'mapPanel',
items : [
{
xtype: 'map',
height: '100%',
itemId: 'map'
}
]
}
],
navigationBar: {
docked: 'top',
items: [
{
xtype: 'button',
itemId: 'youAreHereButton',
text: 'You Are Here'
}
]
}
}
});
/*
The Controller with functionality for the "you are here" button tap
*/
Ext.define('Geo.controller.Maps', {
extend: 'Ext.app.Controller',
config: {
refs: {
mapView: {
selector: 'mainview #map',
xtype: 'Ext.Map'
},
mainView: {
selector: 'mainview',
xtype: 'Ext.navigation.View'
}
},
control: {
"mainview #youAreHereButton": {
tap: 'onYouAreHereTap'
}
}
},
onYouAreHereTap: function(button, e, eOpts) {
// set 'mapView' as the parent view displaying the map
var mapView = this.getMapView();
// control measure for old browsers or denied permission for location detection.
if (Ext.feature.has.Geolocation) {
/*
Ext.device.Geolocation uses native (phone) Geolocation capabilities if available,
and falls back to Ext.util.Geolocation if only browser support detected.
*/
Ext.device.Geolocation.getCurrentPosition({
allowHighAccuracy : true,
maximumAge : 0,
timeout : 20000,
success : function(position) {
var latitude = position.coords.latitude,
longitude = position.coords.longitude,
location = new google.maps.LatLng(latitude, longitude),
marker = new google.maps.Marker({
position : location,
map : mapView.getMap(),
animation : google.maps.Animation.DROP
});
mapView.setMapOptions({ // Move to the center
center: location
});
},
failure: function() {
console.log('something went wrong!');
}
});
}
}
});
Yes, I could have simplified it further down to a single view, containing also the controller's handler for the "you are here" tap. I have chosen to present it this way to assist you with understanding the MVC pattern and how it applies in Sencha Touch.
For this to work, it'll require the Sencha Touch library, as well as this following line:
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
This is the script which includes Google Maps in your page and is essential for displaying.
Learn more:
https://www.sencha.com/learn/hello-world/ - getting started
http://docs.sencha.com/touch/2.3.1/#!/guide - complete documentation for how to do anything in Sencha Touch, starting with the Guides page.
I am learning Sencha Touch. I am having a strange issue. A view using select field is not showing it on Android emulator, but it does in Google Chrome. It worked fine before, I cannot guess what changed to "break" it.
In the emulator logcat I can see these three messages:
E/ActivityThread(243): Failed to find provider info for android.server.checkin
W/Checkin(243): Can't update stat BROWSER_SNAP_CENTER: java.lang.IllegalArgumentException: Unknown URL content://android.server.checkin/stats
D/CordovaLog(243): undefined: Line 1 : TypeError: Result of expression 'c' [null] is not a constructor.
Sometimes only the third is shown.
Hereafter the view code:
(function() {
var setSettingValue = function(component, query, value) {
var c = component.query(query);
if (c && value && (c.length > 0)) {
c[0].setValue(value);
}
};
var createToolbar = function () {
return Ext.create('Ext.Toolbar', {
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
iconMask: true, ui: 'normal', iconCls: 'info',
itemId: 'infoButton'
},
{ xtype: 'spacer' },
{
iconMask: true, ui: 'normal', iconCls: 'reply',
itemId: 'backButton'
}
]
})};
Ext.define('MyWF.view.Settings', {
extend: 'Ext.Container',
initialize: function ()
{
this.setItems([createToolbar()]);
this.callParent();
},
config : {
layout : 'vbox',
padding : '0 10',
scrollable: {
direction: 'vertical'
},
onBackAction: function () { console.log('back'); },
onInfoAction: function () { console.log('info'); },
listeners: [{
delegate: "#backButton",
event: 'tap',
fn: 'onBackAction'
},
{
delegate: "#infoButton",
event: 'tap',
fn: 'onInfoAction'
},
{
event: 'show',
fn: function(component, eOpts) {
setSettingValue(component, 'selectfield[name=windMU]','kmh');
setSettingValue(component,'selectfield[name=temperatureMU]','C');
}
}],
items : [{
xtype : 'fieldset',
title : 'Measure units',
items : [{
xtype : 'selectfield',
name : 'temperatureMU',
label : 'Temperature',
labelAlign: 'top',
listeners : {
change : function(selectField, newData, oldData, eOpts) {
alert('Your choice is: ' + newData);
}
},
options : [{
text : 'Celsius',
value : 'C'
}, {
text : 'Farenheit',
value : 'F'
},]
}, {
xtype : 'selectfield',
name : 'windMU',
label : 'Wind speed',
labelAlign : 'top',
listeners : {
change : function(selectField, newData, oldData, eOpts) {
alert('Your choice is: ' + newData);
}
},
options : [{
text : 'Kilometers per hour',
value : 'km/h'
}, {
text : 'Meters per second',
value : 'm/s'
}, {
text : 'Miles per hour',
value : 'MPH'
}, {
text : 'Knots',
value : 'kn'
}]
}]
},]
}
});
})();
Thanks for any suggestion
Well I got some time to fix the issue.
First of all I add a lacking information to the question: I was running the app with a custom build of the Sencha Touch library, the library version is 2.0.1.1.
On Google Chrome the select field (Ext.field.Select) creates by default an Ext.dataview.List instance for the list of choiches, while on a phone an Ext.picker.Picker is created.
But Ext.picker.Picker also creates an Ext.TitleBar, that was lacking in my custom build of sencha library, while the Ext.dataview.List class is in.
So the application can show the select field in Chrome, but it cannot in the emulator, and it gives the unclear message, because the libary build is compressed and obfuscated.
There are two solutions:
you can force the use of a list also in the emulator or phone. The class Ext.picker.Picker has a creation option for this: "usePicker: false", by default set to "auto".
or, better, add an explicit reference to the title bar component in the app file: "Ext.require('Ext.TitleBar');" to include it in the library build.
I saw the problem forcing the use of the picker in Chrome, by setting the picker configuration "usePicker: true", and running the app with the debug library build "sencha-touch-debug.js", see http://docs.sencha.com/touch/2-0/#!/api/Ext.Loader, and http://docs.sencha.com/touch/2-0/#!/guide/building .
Then in the Chrome console, as well in the Android emulator logcat, I saw the clear message:
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.TitleBar';
consider adding 'Ext.TitleBar' explicitly as a require of the corresponding class
A suggestion: in the logcat is better to filter the many messages, for example writing "Ext.Loader" in the filter mask.
Good afternoon, currently using JSON feed for my calendar which works ok. Is it possible for me to also add a few events via an array and change colour of these? I want to add bank holidays as an array and colour them green where possible?
Currently my code looks loike this, could I add array of events under the json feed?
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
startParam: 'start',
endParam: 'end',
editable: true,
minTime: 9,
maxTime: 21,
allDayDefault: false,
events : {
url: 'json-events.php',
}
});
Any advice appreciated..
Try this:
In document.ready() method or just before your calendar code. Create event sources like this:
source1 = {
url: 'json-events.php',
type: 'POST',
error: function() {
//alert('There was an error while fetching events!');
},
color: '#4ca64c',
textColor: 'black'
};
source2 = {
url: 'array-events.php',
type: 'POST',
error: function() {
//alert('There was an error while fetching events!');
},
color: '#4caca4',
textColor: 'black'
};
The in fullCalendar declaration:
$('#calendar').fullCalendar({
...
eventSources: [
// your event source
source1,
source2
],
...
});
Hope this helps
I have some issues with Json result and embed it within the html of the Extjs Panel.
Here's that I have managed to get so far. myPanel is embedded within a mainPanel, and I have some shows/hide of the myPanel in between other sections of my codes.
Ajax request to retrieve Json result like so:
Ext.Ajax.request({
url: 'myStore',
success: function(r) {
var myItem = Ext.decode(r.responseText).itemName;
}
})
I would like to embed the myItem into mypanel, something like this:
var myPanel = new Ext.Panel({
hidden: true,
html:myItem
})
This is where the myPanel is embedded to my mainPanel:
var mainPanel = new Ext.Panel({
applyTo: 'mywizard',
frame: true,
items: [{
id: 'top',
xtype:'panel',
items: [
topPanel1,
topPanel2
]
},{
id: 'middle',
xtype: 'panel',
items: [
middlePanel1,
middlePanel2,
myPanel
]
},{
id: 'bottom',
xtype: 'panel',
items: [
footer
]
});
Currently if I were to run the code, I got a "undefined" within the myPanel, so I supposed that myItem is out of the scope, hence not picked up by myPanel. Hence, I would like to know how/what should I do to be able to get myItem (Json result) reflected in the myPanel?
Thank you.
I found the answer, tested and working for me. For any friends stuck with this. What I need to do is just to update the html content with the body update.
Basically, just grab the middle out of mainPanel such that:
var middle = new Ext.Panel({
id: 'middle',
xtype: 'panel',
items: [
middlePanel1,
middlePanel2,
myPanel
]
})
Of course, you will need to replace the middle back into the mainPanel.
Then, next is to create the myPanel as norm:
var myPanel = new Ext.Panel({
id: 'myPanel',
hidden: true,
html: 'empty'
})
Inside the Ajax request, you update
Ext.Ajax.request({
url: 'myStore',
success: function(r) {
var myItem = Ext.decode(r.responseText).itemName;
var editmycontent = Ext.getCmp('myPanel');
editmycontent.body.update(myItem); // update myItem here
middle.doLayout(); // refresh the changes
}
})
That's it!
you have a syntax error in this part the corrected code look like this :
var myPanel = new Ext.Panel({
hidden: true,
html:myItem // no ; here
});
also you have to be careful about scoping issue, if your code is in a class I would do something like that
Ext.Ajax.request({
url: 'myStore',
success: function(r) {
var myItem = Ext.decode(r.responseText).itemName;
var myPanel = new Ext.Panel({
hidden: true,
html:myItem // no ; here
});
this.parentPanel.add(myPanel);
}
,scope: this // note the set the scope
});