In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId
Related
The issue seems to be in the latest Kendo UI Grid Demo as well.
http://dojo.telerik.com/AJApA
The grid works in small screens like tablets.
Open the above demo link in large screen and it works fine.
Move the slider between the code and result window to the left to the maximum and try again. Upon clicking the dropdown, the dropdown list blinks and closes off.
Sorry I can't add comments yet, but try to change the pageSize to number 5, it works this way, if you increases the number after 2 pages it will blinks again.
It is strange, but some how it works when it is 5.
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 5
}
instead of:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
}
I would like to get notified any any change of the elements style changes (in my case: any change to the elements height).
I have tried to manually register an observer:
observers: [
'heightUpdated(style.height)',
],
This seems not to work (for any style properties).
I have also tried an other observer:
observers: [
'heightUpdated(clientHeight)',
],
This observer never gets called.
The only way i've found to observer changes to style properties of a Polymer element, is to use a MutationObserver
It can easily be set up to listen for any change to any of the .style. properties such as .style.height, but it has a lot of restrictions.
Here is one I set up earlier
Polymer({
is: "my-element",
properties: {
// Saved to the element, so you can inspect it if you want
mutationObserver: {
value: function() {
// uses the function "mutated" defined later"
var observer = new MutationObserver(this.mutated.bind(this));
observer.observe(this, {
// Only fires on attribute changes
attributes: true,
attributeOldValue: true,
// Only fires when the "style" attribute changes
attributeFilter : ['style'],
});
return observer;
},
},
height: String,
},
observers: [
'heightUpdated(height)'
],
mutated: function(mutations) {
// Change this function if you want to listen for something else instead, this is fired on all "style" changes, and you can see the changes inside the "mutations" object it provides
this.set('height', this.style.height);
},
heightUpdated: function(height) {
console.log('height', height);
}
});
It listens whenever this.style.height is set, but not when you resize the element.
Hopefully, the mutation observer will be updated with a css extension to provide better support for listening to css style changes. Until then I don't think this is the best option I can come up with.
I am using kendoui grid , which is shown when I click in a bubbletree(its like tree structure). The data in the grid comes dynamically on clicking bubbletree . The kendoui grid loads fine on first click but the grid overlaps on second click and so on gets overlapping .
I am using following code.
function showKendouiGrid(nodeCoordinate) {
var kendouiConstants = {
BASE_URL: 'http://',
DATA_URL: '/eventbot/public/bubbletreedata/list-category?category=' + nodeCoordinate.label,
PAGE_SIZE: 20,
GRID_HEIGHT: 100
}
jQuery("#grid").kendoGrid({
columns: [{
field: 'label',
title: "Activitiy",
}],
dataSource: {
serverPaging: true,
pageSize: kendouiConstants.PAGE_SIZE,
transport: {
read: {
url: kendouiConstants.BASE_URL + window.location.host + kendouiConstants.DATA_URL,
dataType: "json",
type: "GET"
}
},
schema: {
data: "data",
total: "total"
},
serverFiltering: true,
},
height: kendouiConstants.GRID_HEIGHT,
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
scrollable: true,
filterable: true,
sortable: true,
});
}
There is another issue also that , the footer of kendoui grid shows "no items to display" , while it has items on it .
Thanks in advance.
Every time you click on the bubble tree, the grid is regenerated on the previous version of the grid. So, the first time you do it, all is fine and you end up with newly generated kendogrid markup which has its own wrapper elements in HTML. Next time you create the grid, it is recreated on the older and the wrappers are 'rewrapped' inside the previous ones.
What you should do is either .destroy() the grid or just change the grid datasource when the tree is clicked.
Please see http://new.damir.com.au. Click one of the two portfolio items being shown under the portfolio section.
I'm using AJAX to load HTML (including image tags) from one file and insert it into the parent file. Everything works as intended, except that the images are not being rendered. The HTML image tag is there but it is not shown on screen unless you resize the browser window. Resizing the window somehow refreshes what is rendered on screen and the images are shown properly. Here is my code:
$.ajax({
cache: false,
type: 'POST',
url: theURL,
beforeSend:function(){
// this is where we append a loading image
},
success:function(data){
// successful request; do something with the data
$(expandedElement).find('.wrap').append(data);
expandedElement.addClass('loaded');
// HTML has been loaded. Show it.
// Initiate Flexslider
$(expandedElement).find('.wrap').flexslider({
animation: 'slide',
animationLoop: false,
prevText: '<span>Previous</span>',
nextText: '<span>Next</span>',
slideshow: false
});
// Animate in the project
$(expandedElement).fadeIn(1000);
$('html, body').animate({
scrollTop: $(expandedElement).offset().top - 20
}, 1000);
},
error:function(){
// failed request; give feedback to user
}
Ok seems the problem is unrelated to what I was talking about in the question. I was using the picturefill.js library and this was causing the images not to render properly when loaded through AJAX.
I have a sencha touch 1 app I've just upgraded to sencha touch 2, and I've got everything to work except the google map.
In ST1, I added this line to index.html:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Then I added this to a panel:
{
xtype: 'map',
useCurrentLocation: false,
fullscreen: false,
layout: 'auto',
id: 'jobmap',
height: 400,
mapOptions: {
zoom: 12,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
In ST2, the docs say to still add the reference to index.html, though their forums also seem to say to use app.json. I've tried both using the above code and nothing appears on the panel. The controls before and after it appear adjacent to each other.
I've even just tried:
{
xtype: 'map',
useCurrentLocation: true
}
and I still get nothing.
Any ideas?
The panel which contains your map should be set layout: 'card'.
Also, it's not necessary (or may cause errors) to set fullscreen: false or layout: 'auto', just remove them from your map config.
Hope it helps.