Unable to make scrolling to work properly on 64bit IE10 Win7.
Main.js
Ext.define('ScrollLab.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
],
config: {
layout: 'vbox',
itemId: 'mainPanel',
scrollable: true,
items: [
{
xtype: 'container',
html: 'Sencha Touch 2.3 is the latest version of our industry-leading mobile app framework. In Sencha Touch 2.3 we updated the device APIs to make Apache Cordova a fully supported component in the library, including support (using the latest version of Sencha Command) for the Adobe PhoneGap Build. Touch 2.3 also includes two brand new themes: Cupertino and Mountain View, in addition to several enhancement to existing themes, especially the Blackberry 10 theme. Other enhancements in Touch 2.3 include full support for XMLHTTPRequest Level 2 (XHR2) on devices that support it, and a new ProgressIndicator Component to give users a true indication when uploading. Read more about all the new features of Touch 2.3.',
width: '100px'
}
]
}
});
MainController.js
Ext.define('ScrollLab.controller.MainController', {
extend : 'Ext.app.Controller',
requires : [
],
config:{
refs:{
mainView: 'main'
},
control:{
mainView: {
activate: 'onMainViewActivate'
}
}
},
onMainViewActivate: function(view) {
"use strict";
var me=this;
var container = view;
if(container.isXType('selectfield')) {
container = container.down('list');
}// Add support for selectbuttons
// Disable default scroll for mobile.
container.getScrollable().getScroller().setDisabled(true);
console.log(me.getMainView().element.dom);
var scrollContainers = Ext.DomQuery.select('.x-scroll-view', me.getMainView().element.dom);
var scrollBars = Ext.DomQuery.select('.x-scroll-indicator', me.getMainView().element.dom);
for(var i=0;i<scrollContainers.length;i++){
scrollContainers[i].style.overflowY = "scroll";
}
for(i=0;i<scrollBars.length;i++) {
scrollBars[i].style.zIndex = "-1";
}
console.log(scrollContainers);
console.log('Length - ' + scrollContainers.length);
}
});
This code enables the scroll but it freeze me on the current view and doesn't let me scroll up/down when content overgrows the screen.
This piece of code works great for Webkit browsers(Chrome, Safari) but doesn't work well on IE10.
I figured it out. Not a single solution. For different components I had to enable Scroll bars differently. But key thing is using overflow: scroll and height 100% CSS property at the right place in DOM.
Feel free to reach me if you need suggestions.
Related
I'm building an electron app, and the above image on the left is how my icon looks in the app when i'm testing it with electron and on the right is after I've compiled it into an executable using "yarn dist".
(these are screenshots of them from my windows bar at the bottom of the screen).
It seems like the resolution of the icon in the executable is worse than in the raw electron app. The file itself is quite high resolution:
The icon is called during development by the "main.js" file:
mainWindow = new BrowserWindow({
// frame: false,
title: "Collector: Kitten " + app.getVersion(),
icon: __dirname + "/logos/collector.png", //<--- This line
webPreferences: {
//contextIsolation: true, //has to be false with the way I've designed this
enableRemoteModule: true,
preload: path.join(__dirname, 'preload.js'),
worldSafeExecuteJavaScript: true
}
})
And is identified by the builder in the package.json "win":
"build":{
"win": {
"target": "nsis",
"icon": "logos/collector.png"
}
}
Is there a way to prevent this loss in resolution when using the electron-builder?
I solved this by converting the .png into a .ico file and using that instead.
Using the latest version of Sencha Touch 2.3.1a, what event can I use to fire after I pull down the refresh and it goes back up. Ive tried all of them and nothing:
{
xtype: 'list',
itemId: 'passDownList',
store: 'PassDownEntrysStore',
plugins:
[
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
},
{
xclass: 'Ext.plugin.PullRefresh',
pullText: 'Pull down to refresh',
listeners:
{
}
}
],
I left them out of the listeners cause they didnt do anything. But ive tried the events on the PullRefresh list of events like topchange, bottomchanged, etc.
Update: 6/20/2014
The way i got it to work was to override the fetchLatest() method. I know its not the most elegant but it works wish there was an actual event for it though.
I just stated a new project in Sencha Touch 2.2.1 from the SenchaCmd. Since this is my first Sencha project I am having problems with some pretty basic stuff. I'm trying to access Ext.data.StoreManager to load a predefined store but Ext.data.StoreManager is undefined, as in it seams like the loader have not loaded this file. I have tried to fix it by adding Ext.require('Ext.data.StoreManager'); but no luck.
The project is mostly what SenchaCmd initialized with the addition of a model, a store and some changes to app/views/Main.js.
Any ideas?
Below is my Main.js:
Ext.define('DRL.view.Main', {
extend: 'Ext.dataview.List',
xtype: 'main',
requires: [
'Ext.data.Store'
],
config: {
items: [{
xtype: 'list',
itemTpl: '{teamName}',
store: Ext.data.StoreManager.lookup('teams')
}],
listeners: {
itemtap: function(self, index, target, record, e, eOpts) {
}
}
}
});
Ext.require loads files asynchronously, as well as the requires block. If you want StoreManager to be loaded before Ext.define, you should use Ext.syncRequire before the class definition.
However, there is are better and cleaner ways to achieve the same end result. For example:
app/store/TeamStore.js:
Ext.define('DRL.store.TeamStore', {
extend: 'Ext.data.Store',
model: 'DRL.model.Team' // change your model
...
});
app/store/Main.js
Ext.define('DRL.view.Main', {
...
store: 'DRL.store.TeamStore'
...
});
Then, add the DRL.store.TeamStore and DRL.view.Main to your Ext.application which should be in app.js.
The new Sencha Touch 2.2.0 has a new configuration parameter on scrollable to don't use the Ext.scroll.Scroller, but actually this is not working.
I am using this to activate the overflow scroll on my container:
{
scrollable: null,
style: 'overflow:auto; -webkit-overflow-scrolling: touch;'
}
How can I use the native scroll ?
Why I need it?
Because I need to use a galaxy-tab-1 the new Ext.scroll.Scroller is faster than 2.1.1 version but the render on this tablet is slow and the new Ext.scroll.Scroller is trying to render 40 fps and the tablet is displaying this slowly.
Actually the setFps() is not working in this version, example:
Econtainer.getScrollable().getScroller().setFps(10);
The new Ext.util.Translatable has an slowly PreferredTranslationMethod by default.
You can use:
scrollable: {
direction: 'both',
translatable: {
translationMethod: 'scrollposition'
}
},
or
scrollable: {
direction: 'both',
translatable: {
translationMethod: 'csstransform'
}
},
or
scrollable: {
direction: 'both',
translatable: {
translationMethod: 'cssposition'
}
},
hey i was wondering about the following problem a long time:
In my previous app i specified an xtype to my classes like so:
Ext.define('Sencha.view.Home', {
extend: 'Ext.Panel',
xtype: 'homepanel',
then in my Viewport i added in the items the xtype of 'homepanel' and of course this worked fine and the homepanel and others were displayed in my view. But after upgrading to 2.0 final i can't do this anymore? No i have to use it like this to include my homepanel in the view:
xclass: 'Sencha.view.Home'
Was this a change in the version? Do i now always must call the xclass, or am i doing something wrong with my xtype? Thanks for help!
The Sencha Framework has an alias keyword instead of xtype for the declaration
http://docs.sencha.com/touch/2-0/#!/api/Ext.Class-cfg-alias
Ext.define('MyApp.CoolPanel', {
extend: 'Ext.panel.Panel',
alias: ['widget.coolpanel'],
title: 'Yeah!'
});
// Using Ext.create
Ext.widget('widget.coolpanel');
// Using the shorthand for widgets and in xtypes
Ext.widget('panel', {
items: [
{xtype: 'coolpanel', html: 'Foo'},
{xtype: 'coolpanel', html: 'Bar'}
]
});
Which is also how EXTJS does it nowadays:
https://stackoverflow.com/a/5608766/330417
I have a Sencha Touch 2.0 app and my viewport is set up like this:
Ext.define('example.view.Viewport', {
extend: 'Ext.Container',
config: {
fullscreen: true,
id: 'mainContainer',
layout: {
type: 'card',
animation: {}//we manually set this throughout the app
},
items: [
/*
* This is a list of all of the "cards" in our app that are preloaded
*/
{ xtype: 'dashboardpanel' },
{ xtype: 'customerlist' },
{ xtype: 'loginpanel' }
]
}
});
So if yours isn't working I'm guessing something else is going on. But its hard to tell without seeing more code.
So i figured out what was wrong with my xtypes: I declared my Views in my Controller not in my App.js, as i had put them into my app.js all worked fine for me!
Thanks for your help!
Ext.define('Sencha.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homepanel'
when you want to use the alias widget 'homepanel' you just say xtype:'homepanel wherever you want to implement it
just change your container to list from panel and set the list-config as
scrollable: false,
pinHeaders: false,