I am running my sencha-touch/phonegap app on the emulator and when the i set the html using iframe on a panel. It is not visible. But if i switch to a different panel and come back to the original html panel. the html is visible.
I believe its the refresh or layout issue but i cant find a way to redraw the panel.
I have already tried myPanel.hide() and myPanel.show() but the content is not visible. I have the iframe inside a div like below
'<div style="height:100%;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%" src="'+results[i].url+'"/></div>'
I am setting the content of the div dynamically like below.
for(var i=0;i<results.length;i++)
{
console.log("Setting the result page to "+results[i].url);
var url = '<div style="height:100%;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%" src="'+results[i].url+'"/></div>';
this.getResultsTabPanel().add({
title: results[i].title,
id:results[i].title+(i+1),
itemId:results[i].title+(i+1),
html:url
});
}
Any ideas?
I have a solution now. Instead of adding the child panels to the tabpanel right away. I create them inside like this
for(var i=0;i<results.length;i++)
{
var url = '<div style="height:100%;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%" src="'+results[i].url+'"/></div>';
var result = {
title: results[i].title,
id:results[i].title+(i+1),
config : {
itemId:results[i].title+(i+1),
},
xtype: 'panel',
scrollable:true,
styleHtmlContent : true,
html:url
};
panels.push(result);
}
this.getResultsTabPanel().add(panels);
This works both on chrome browsers and emulators.
Related
I have an issue with my Node-Webkit MenuItem click function which I believe I have narrowed down to changing the URL from within the Javascript on my loading page. I have a 5 second timer which changes the page when complete. If I set the document location to a web page on a web server (could be anything even www.google.com) from within the javascript in my loading.html page, my MenuItem Click functions do not work
$(document).ready(function() {
window.setTimeout(function() {
document.location = "http://localhost:8080/myapp/index.htm";
}, 5000);
});
If I change the document location to a html page which is contained within my app.nw package, my MenuItem click functions work and the page will change to any of my
http://localhost:8080/myapp pages
$(document).ready(function() {
window.setTimeout(function() {
document.location = "test.html";
}, 5000);
});
Here is my Node-Webkit javascript file contained within the app.nw package which places a menu bar on the application window.
var gui = require('nw.gui');
var win = gui.Window.get();
var rootMenu = new gui.Menu({ type: 'menubar'});
var sysMenu = new gui.Menu();
sysMenu.append(new gui.MenuItem({
type: 'normal',
label: 'Google',
click: function (){
Window.window.location.assign("http://localhost:8080/myapp/customers.htm");
}
}));
gui.Window.get().menu = rootMenu;
Has anyone else come across this or am I doing something the wrong way?
Thanks
I am trying to build a dynamic image carousel using Sencha Architect. I have a carousel added to a tab panel. The carousel is set up to read images from a store called "pictureStore." I have a function to pull images from the store and create the carousel items - I can get the images from the store but unable to create the carousel. When I try to use carouself.setItems() or carousel.add() I get an error "Object # has no method". Please take a look and let me know if my method is incorrect for creating a dynamic carousel. I appreciate your help and knowledge of how to fix
Thanks,
Function to read images and create carousel items (works up until comment below):
onMycarouselActivate: function(container, newActiveItem, oldActiveItem, options) {
Ext.getStore('pictureStore').load(function(pictures) {
var items = [];
Ext.each(pictures, function(picture) {
console.log(picture.get('image'));
if (!picture.get('image')) {
return;
}
items.push({
xtype: 'myimage',
picture: picture
});
});
//following doesn't work for adding the carousel images:
//carousel.setItems(items);
//carousel.add(items);
//carousel.items = [{html: items}];
//carousel.add(carousel.items);
//carousel.setActiveItem(0);
});
},
Sample JSON with image info
{
"test": {
"cat": {
"entries": [
{
"image": "/images/1.png"
},
{
"image": "/images/2.png"
}
]
}
}
}
Error messages when using carousel.add or carousel.setItems:
Object #<HTMLDivElement> has no method 'add'
Object #<HTMLDivElement> has no method 'setItems'
If your variable carousel has no method add or setItems then it's probably not your carousel.
To make sure of that, you can try to do console.log(carousel); to figure out what it is exactly. Also, it doesn't seem to be declared anywhere in your code...
But it's quite simple to fix. I presume you've added a event listener to your carousel that listens to the activate event and if you take a look at the documentation for this event, you can see that the first parameter sent to the callback function is the container (in this case your carousel)
So what you have to write is this :
onMycarouselActivate: function(carousel, newActiveItem, oldActiveItem, options) {
instead of this
onMycarouselActivate: function(container, newActiveItem, oldActiveItem, options) {
and you should be all set
EDIT
Also if you take a look at the documentation for the image component, you can see there is no picture in the config but there is a src attribute. SO you should write :
items.push({
xtype: 'myimage',
src: picture
});
Hope this helped
try this code
myCarousel.add({
xtype: 'image',
scr:'path of image'
});
where myCarousel is object of carousel.
You can try this, this is working for me.....
Ext.getStore('Pictures').load(function(pictures) {
Ext.each(pictures, function(picture) {
if (picture.get('image')) {
carousel.add({
html: '<img style="max-width: 100%; max-height: 100%;" src="' + picture.get('image') + '"/>'
});
}
});
});
Hope this will help you...
I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.
Here is the code for the titlebar:
Ext.define('mUserStories.view.titlebar', {
extend: 'Ext.TitleBar',
id: 'narwhal',
config: {
docked: 'top',
// id: 'narwhal',
title: 'CHW Module',
items: [{
ui: 'back',
text: 'Back',
id: 'backButton'
// hidden: true
}]
}
})
However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.
Here is the code for the logic that occurs when the button is pressed to switch the page:
toPage: function (arg) {
var t = Ext.getCmp('narwhal');
var b = Ext.getCmp('backButton');
console.log(t,b)
if (arg === PAGES.PATIENT_LIST) {
t.setTitle('Patient List');
b.setHidden(true)
}
Ext.getCmp('viewPort').setActiveItem(arg);
}
I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.
I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!
Thank you for your time :)
I have had the same situation in my project.
I managed to get everything to work like you want it by having a controller owning a reference to the title bar and listening to activeItemChange on my tabPanel.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.
How do you make a titlePane's height dynamic so that if content is added to the pane after the page has loaded the TitlePane will expand?
It looks like the rich content editor being an iframe that is loaded asynchronously confuses the initial layout.
As #missingno mentioned, the resize function is what you want to look at.
If you execute the following function on your page, you can see that it does correctly resize everything:
//iterate through all widgets
dijit.registry.forEach(function(widget){
//if widget has a resize function, call it
if(widget.resize){
widget.resize()
}
});
The above function iterates through all widgets and resizes all of them. This is probably unneccessary. I think you would only need to call it on each of your layout-related widgets, after the dijit.Editor is initialized.
The easiest way to do this on the actual page would probably to add it to your addOnLoad function. For exampe:
dojo.addOnLoad(function() {
dijit.byId("ContentLetterTemplate").set("href","index2.html");
//perform resize on widgets after they are created and parsed.
dijit.registry.forEach(function(widget){
//if widget has a resize function, call it
if(widget.resize){
widget.resize()
}
});
});
EDIT: Another possible fix to the problem is setting the doLayout property on your Content Panes to false. By default all ContentPane's (including subclasses such as TitlePane and dojox.layout.ContentPane) have this property set to true. This means that the size of the ContentPane is predetermined and static. By setting the doLayout property to false, the size of the ContentPanes will grow organically as the content becomes larger or smaller.
Layout widgets have a .resize() method that you can call to trigger a recalculation. Most of the time you don't need to call it yourself (as shown in the examples in the comments) but in some situations you have no choice.
I've made an example how to load data after the pane is open and build content of pane.
What bothers me is after creating grid, I have to first put it into DOM, and after that into title pane, otherwise title pane won't get proper height. There should be cleaner way to do this.
Check it out: http://jsfiddle.net/keemor/T46tt/2/
dojo.require("dijit.TitlePane");
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function() {
var pane = new dijit.TitlePane({
title: 'Dynamic title pane',
open: false,
toggle: function() {
var self = this;
self.inherited('toggle', arguments);
self._setContent(self.onDownloadStart(), true);
if (!self.open) {
return;
}
var xhr = dojo.xhrGet({
url: '/echo/json/',
load: function(r) {
var someData = [{
id: 1,
name: "One"},
{
id: 2,
name: "Two"}];
var store = dojo.data.ObjectStore({
objectStore: new dojo.store.Memory({
data: someData
})
});
var grid = new dojox.grid.DataGrid({
store: store,
structure: [{
name: "Name",
field: "name",
width: "200px"}],
autoHeight: true
});
//After inserting grid anywhere on page it gets height
//Without this line title pane doesn't resize after inserting grid
dojo.place(grid.domNode, dojo.body());
grid.startup();
self.set('content', grid.domNode);
}
});
}
});
dojo.place(pane.domNode, dojo.body());
pane.toggle();
});
My solution is to move innerWidget.startup() into the after advice to "toggle".
titlePane.aspect = aspect.after(titlePane, 'toggle', function () {
if (titlePane.open) {
titlePane.grid.startup();
titlePane.aspect.remove();
}
});
See the dojo/aspect reference documentation for more information.