Steps to Reproduction: Just open Fiddle and run the simplest code with the Classic Neptune theme, and then try to zoom in or out with your browser.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
}
});
I'm not sure if anyone else has found the same problem and if this can be fixed?
EDITED:
Classic Triton/Graphite theme also has this bug.
div.x-window.x-window-default.x-border-box {
background: #3892d4 !important;
}
Related
According to the docs, when building universal app with sencha cmd, one can set the app's main view using either mainView config or within the launch() method of Ext.app.Application (using setMainView method) like this:
Ext.application({
name: 'Fiddle',
launch: function () {
var app = this.getApplication();
//app.setMainView('MyApp.view.main.Main');
//app.setMainView({xtype: 'app-main'});
},
mainView: 'MyApp.view.main.Main'
});
...
A fiddle is available here: Sencha Fiddle
And, it works with the classic toolkit, but when using modern one, the things can get wrong.
If you are using the mainView config - it works as expected (this is by default when you execute sencha generate app).
If you are using the setMainView() method, however, it depends of the parameter type you pass:
you will get a blank screen when you pass the full class name of the view as string ('MyApp.view.main.Main'). The view is created (reachable via Ext.ComponentQuery.query('app-main') within the console), but is invisible
you will get an error when you pass a config object for the view ({xtype: 'app-main'})
You can try it in the Fiddle above by commenting/uncommenting rows 7,8,11 (make sure a modern toolkit is selected before hitting Run).
Any idea how to resolve this, pls?
The ability to use the launch method logic is vital - for example if you are trying to implement an app with login functionality.
If modern add the main view to the viewport otherwise just set the main view
Ext.application({
name: 'Fiddle',
launch: function () {
if (Ext.isModern) {
Ext.Viewport.add([{
xtype: 'app-main'
}]);
} else {
var app = this.getApplication();
app.setMainView('MyApp.view.main.Main');
}
},
});
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
title: 'Panel Title',
html: 'panel body data...'
});
In my app, I want to use native datepicker and tried to use this plugin, but failed to make it work. I just recently started working with Onsen UI 2 and haven't experience with using the plugins, so I might be missing something.
I followed the steps of installing and usage of the plugin. My code so far.
index.html:
<ons-list-item ng-click="ctrl.showPicker();">
Set the time
</ons-list-item>
where 'ctrl' is my controller.
index.js
this.showPicker = function() {
var options = {
date: new Date(),
mode: 'date'
};
function onSuccess(date) {
alert('Selected date: ' + date);
}
function onError(error) { // Android only
alert('Error: ' + error);
}
var datePicker = new DatePicker();
datePicker.show(options, onSuccess, onError);
}
Unfortunetely, clicking the list item shows me this error:
ReferenceError: DatePicker is not defined
As I said, I don't have experience using the plugins in Onsen UI 2, so far I was using Cordova framework (javascript and jquery). Can anyone tell me, what can I do to make the plugin work? Thanks in advance.
Your angular code looks ok. The only problem is that you don't have a DatePicker variable.
Looking at docs of the plugin which you're using it seems that it doesn't export a DatePicker function.
In the docs they are using just datePicker.show, so maybe they are just exporting datePicker.
So basically all you need to do is remove the following line:
var datePicker = new DatePicker();
And you should be fine (if you installed your plugin correctly).
I am trying to clean up and restructure my javascript in my app, but once I change it it stops working. I am using ext scheduler in my app so that might be the problem. Here is how I want to set up
/ext/scheduler-3.0.0(all core code for schedule components go here)
/ext-all.js
/myscheduler(custom code for schedule components go here)
--/global/
----/view/
------globalscheduling.js
/model/
And This is how I start my app
ExtLatest.Loader.setConfig({enabled: true});
ExtLatest.define("scheduler.Application", {
extend: "Ext.app.Application",
requires: ["myscheduler.global.view.globalschedulegrid"],
name: "scheduler",
appFolder: "",
launch: function () {
getData()
}
});
However extjs still trying to go to https://c.na17.visual.force.com/apex/myscheduler/global/view/globalschedulegrid.js to find my view file what I doing wrong here?
Ext.Loader.setPath('myscheduler.global.view.globalschedulegrid', 'path to my scheduler');
OR
Ext.Loader.setConfig({
paths: {
'myscheduler': 'myscheduler',
}
});
Link to 5.0 Doc (Not sure which version you are using but it's the same)
5.1 as noted in the title. I didn't have to set the path for globalschedulegrid. Just specifying the paths in setConfig like this
ExtLatest.Loader.setConfig({enabled: true,
paths: {
'scheduler': "{!URLFOR($Resource.ConnectWeb, 'scripts/libs/scheduler')}"
}
});
so Im building a brand new ExtJS 5 application using Sencha CMD 5.1.2.52 with the command sencha generate app MYAPP ../MYAPP
It automatically renders to the body tag, but I would rather render it to a div with the id "#myDiv". I looked for the renderto attribute on several files (views, models, app configuration files, etc) with no luck.
So is there a way to override this behavior? Thanks!
When you build an application with Sencha command, the main container will be a ViewPort and by default every ViewPort is rendered to document.body.
You could remove the autoCreateViewport config, and add a launch object where you would create your panel, example:
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application',
//autoCreateViewport: 'MyApp.view.main.Main'
launch: function() {
Ext.create('MyApp.view.main.Main',{
renderTo: yourDivHere
});
}
});
I have written an AngularJS app which works just fine when launching it from browser. But when i try to launch the same app within jQuery dialog from one of my app, it never runs. I see the app loading all the scripts in Chrome developer toolbar but it never hits the debugger; statement in the app.run method. Am i missing something here?
Following is how i am trying to launch my app using jQuery dialog:
var windowWidth = $(window).width()-40;
var windowHeight = $(window).height()-40;
$("#div").load('<link to my angular app>').dialog({ modal: true, height: windowHeight, width: windowWidth, title: "Angular App" });