How to hide selection panel when I will maximize my graph panel. My selection Panel is on West region, Control Panel on north & GraphPanel at center. I am new to extjs please help me by answering this.
.on("click", function() {
var el = d3.select(this),
cPanel = pnl.up('mgoPanel').down('mgoControlPanel'), // control Panel
sPanel = Ext.ComponentQuery.query('panel[name=selectpanel]');
/selection
if (el.attr('state') == 'min') {
if (cPanel) {
cPanel.setHidden(true);
}
if (sPanel) {
sPanel.setHidden(true);
}
el.attr('src', 'resources/images/minimize.png');
el.attr('state', 'max');
} else {
if (cPanel) {
cPanel.setHidden(false);
}
if (sPanel) {
sPanel.setHidden(false);
}
el.attr('src', 'resources/images/maximize.png');
el.attr('state', 'min');
}
mgoPanel.fireEvent('onchartresize', el.attr('state'), mgoPanel);
});
Also setHidden(true); for sPanel is not working.
Please open your browser console, and find the following error message:
Uncaught TypeError: sPanel.setHidden is not a function
The reason being that
Ext.ComponentQuery.query
is not returning a component. If you check the docs or try it in browser console, you will see that it returns an array. An array does not have the function setHidden, only a component does.
So the solution is to take the first item from the query result:
sPanel = Ext.ComponentQuery.query('panel[name=selectpanel]')[0];
Related
Is there any direct way to get dialog object of all components which are dragged on page.
For ex: when we load page and if there is any component like text, image are on page, I can get dialog. Please suggest?
Yes, it is possible. Attach a listener which listens to the editablesready event fired by WCM. Get all the editables on the page using the #getEditables() method of CQ.WCM and then get the dialog of each editable if it is present.
Sample code below.
CQ.WCM.on('editablesready', function() {
var editables = CQ.WCM.getEditables();
for(var path in editables) {
var editable = editables[path];
try {
console.log(editable.getEditDialog());
//Do stuff
} catch(e) { }
}
});
I have an accordion in ionic. To reset the screen size when the user clicks to open one of the items I used $ionicScrollDelegate.resize();. However remains a problem, when I click on an item with great content and then click on the item that comes down the content goes up, because closed the item above, but the screen does not scroll together, so the user does not see the content of the item he just clicking.
What I need is that the screen always scroll to the beginning of the contents of the clicked item.
I tried this with
$IonicScrollDelegate.$getByHandle('handle_' + group.id).scrollTop();
But I must have done something wrong because it returns an error that we could not find the delgate-handle. Searching I found some people saying to use $timeout but it also did not solve my problem.
Below is the code I'm using for the controller:
.controller('CatalogoCtrl', function($scope, categories, $ionicScrollDelegate) {
Scope.categorias Categorias.all $ = ();
$scope.toggleCategoria = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
$IonicScrollDelegate.$getByHandle('handle_' + group.id).scrollTop();
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
})
It looks like you have a typo in your code, because you have occurrences of $IonicScrollDelegate (starting with an uppercase I) and $ionicScrollDelegate (starting with a lowercase i).
You should therefore change all occurrences of $IonicScrollDelegate to $ionicScrollDelegate.
I am new to protractor and AngularJS just starting to get the hang of it. I have a login page that on click opens a new browser tab. The new browser tab is where I want to continue my test however I do not know how to do switch to the new browser tab.
I've tried the below code that was suggested here however it didn't do anything just stayed on the page.
element(by.css('span.icon.icon-add')).click();.then(function() {
browser.getAllWindowHandles().then(function(handles) {
newWindowHandle = handles[1]; // this is your new window
browser.switchTo().window(newWindowHandle).then(function() {
element.all(by.css("input[type$='text']")).first().clear().sendKeys('anemailaddy#newmarketinc.com');
});
});
});
Any help would be fantastic! Thank you
changed code to look like this:
this.clicksAddUser = function() {
element(by.css('span.booking-icon.icon-gear')).click();
element.all(by.css('li:nth-of-type(4) > a')).click().then(function() {
browser.getAllWindowHandles().then(function(handles) {
newWindowHandle = handles[1]; // this is your new window
browser.switchTo().window(newWindowHandle).then(function() {
element(by.css('span.icon.icon-add')).click()
element.all(by.css("input[type$='text']")).first().clear().sendKeys('anemailaddy#newmarketinc.com');
});
});
});
Because I was clicking a drop down menu in a separate this statement the drop down menu was closing before there was a chance to click on the login button. combined the code fixed the problem.
In my mobile safari project, i need to create a message posting feature. it is requires scrolling inside a textarea when lines of texts exceed the max rows of the text area. i couldn't find 'scrollable' property in Ext.field.textarea, any idea how?
Cheers!
There is a bug in touch 2.0.x such that the framework explicitly prevents the scroll action. Supposedly a fix will be in 2.1, though I didn't see that officially, just from a guy on a forum.
Until then, there is kind of a solution for touch1 here http://www.sencha.com/forum/showthread.php?180207-TextArea-scroll-on-iOS-not-working that you can port to V2. It basically involves adding an eventlistener to the actual textarea field (not the sencha object) and then calling preventdefault if it's a valid scrollevent.
The full code is at that link, but the salient bits are here.
Grab the <textarea> field (not the Sencha Touch object) directly and use addListener to apply
'handleTouch' on touchstart and 'handleMove' on touchmove
handleTouch: function(e) {
this.lastY = e.pageY;
},
handleMove: function(e) {
var textArea = e.target;
var top = textArea.scrollTop <= 0;
var bottom = textArea.scrollTop + textArea.clientHeight >= textArea.scrollHeight;
var up = e.pageY > this.lastY;
var down = e.pageY < this.lastY;
this.lastY = e.pageY;
// default (mobile safari) action when dragging past the top or bottom of a scrollable
// textarea is to scroll the containing div, so prevent that.
if((top && up) || (bottom && down)) {
e.preventDefault();
e.stopPropagation(); // this tops scroll going to parent
}
// Sencha disables textarea scrolling on iOS by default,
// so stop propagating the event to delegate to iOS.
if(!(top && bottom)) {
e.stopPropagation(); // this tops scroll going to parent
}
}
Ext.define('Aspen.util.TextArea', {
override: 'Ext.form.TextArea',
adjustHeight: Ext.Function.createBuffered(function (textarea) {
var textAreaEl = textarea.getComponent().input;
if (textAreaEl) {
textAreaEl.dom.style.height = 'auto';
textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
}
}, 200, this),
constructor: function () {
this.callParent(arguments);
this.on({
scope: this,
keyup: function (textarea) {
textarea.adjustHeight(textarea);
},
change: function (textarea, newValue) {
textarea.adjustHeight(textarea);
}
});
}
});
I am a little desperate here. I have been reading everything I was able to find on Drupal.behaviours but obviously its still not enough. I try running a masonry grid with the infinitescroll plugin to attach the new images to the masonry. This works fine so far. The next thing I wanted to implement to my website is a hover effect (which shows information on the images) and later fancybox to show the images in a huger size.
(function ($) {
Drupal.behaviors.views_fluidgrid = {
attach: function (context) {
$('.views-fluidgrid-wrapper:not(.views-fluidgrid-processed)', context).addClass('views-fluidgrid-processed').each(function () {
// hide items while loading
var $this = $(this).css({opacity: 0}),
id = $(this).attr('id'),
settings = Drupal.settings.viewsFluidGrid[id];
$this.imagesLoaded(function() {
// show items after .imagesLoaded()
$this.animate({opacity: 1});
$this.masonry({
//the masonry settings
});
});
//implement the function of jquery.infinitescroll.min.js
$this.infinitescroll({
//the infinitescroll settings
},
//show new items and attach behaviours in callback
function(newElems) {
var newItems = $(newElems).css({opacity: 0});
$(newItems).imagesLoaded(function() {
$(newItems).animate({opacity: 1});
$this.masonry('appended', newItems);
Drupal.attachBehaviours(newItems);
});
});
});
}
};
})(jQuery);
Now I read that I need to Reattach the Drupal.behaviours if I want the hover event to also take place on the newly added content.
(function ($) {
Drupal.behaviors.imgOverlay = {
attach: function (context) {
var timeout;
$('.img_gallery').hover(function() {
$this = $(this);
timeout = setTimeout(change_opacity, 500);
}, reset_opacity);
function change_opacity() {
//set opacity to show the desired elements
}
function reset_opacity() {
clearTimeout(timeout);
//reset opacity to 0 on desired elements
}
}
};
})(jQuery)
Where do I now write the Drupal.attachBehaviours() to make it work actually? Or is there some other error I just dont see atm? I hope I wrote the question so that its understandable and maybe it also helps somebody else, since I experienced that there is no real "official" running Version of this combination in drupal 7.
Ok, the solution is actually pretty simple. When writing it correctly than it also runs. its of course not Drupal.attachBehaviours() but Drupal.attachBehaviors() . So this combination now works and I am finally relieved :).