I have a tabpanel with chats on different tabs. Each tab panel has a chat and the discussions are sometime very long so, in my initComponent, I have a code to continuously scroll to bottom so I can show the latest messages:
setInterval ->
this.scrollBy 100000, 100000
, 100
which works fine for what it's supposed to do. The problem is that I sometimes want to see what I talked earlier and I have to scroll to top but this code obviously wouldn't let me. I implemented a hook:
setInterval ->
if not this.autoscroll_disabled
this.scrollBy 100000, 100000
, 100
and now I just have to catch the event when the user triggers a scroll on my panel so I can set autoscroll_disabled to true until he scrolls back to bottom again probably. Any idea how do I catch a scroll event on a panel in extjs?
Ext.require('*');
Ext.onReady(function () {
var content = [],
i = 1;
for (; i <=100; ++i) {
content.push('Line ' + i);
}
var p = new Ext.panel.Panel({
renderTo: document.body,
width: 200,
height: 200,
autoScroll: true,
title: 'Foo',
html: content.join('<br />')
});
p.getTargetEl().on('scroll', function(e, t) {
var height = p.getTargetEl().getHeight();
if (height + t.scrollTop >= t.scrollHeight) {
console.log('bottom');
}
});
});
Related
I'm having problems with isotope in my site. I thought I tackled them all but now there is still a problem when resizing the window. On resize of the window the whole grid is moved way down on the page. This is not fixed by re-doing the layout when the window size changes. Triggering a .isotope('layout') always moves the whole grid to the bottom of the page. My code also implements infinite scroll, that is why I have the part on the hiddenelem's children. I'm also using bootstrap btw.
The (important) part of the code:
if (typeof g_Isotopegrid === 'undefined') {
g_Isotopegrid = $('.grid').isotope({
itemSelector: '.grid-item',
stamp: '.stamp',
masonry: {
columnWidth: 255,
gutter: 30
}
});
}
// Append all the hidden items to the visible items element
hiddenElm.children().each(function () {
var aItem = $(this);
// Append the items to the visible div
aItem.appendTo(visibleElm).imagesLoaded(function() {
g_Isotopegrid.isotope('appended', aItem);
});
});
Any help is appreciated!
In Bootstrap I never set static width:
masonry: {
columnWidth: 255,
gutter: 30
}
just item's class:
masonry: {
columnWidth: '.grid-item',
gutter: 30
}
When you are using Bootstrap is better for item width use bootstrap's classes.
The problem was that we were not using the direct container of the grid items as the element to apply isotope to.
I use Ext JS. And I have a list of "panels". When user changes width of one panel, I need to change width of another panels automatically. Now when user changes one panel, another panels are not changed. Here is my code:
for (i = 0; i < resources.length; i++) {
table.add({
xtype: 'panel',
title: resources[i].name,
id: prefixResourceId + resources[i].id,
height: constHeight,
resizable:{
pinned:false,
dynamic:true,
floating:true
},
width: widthConst,
layout: 'fit'
});
}
I tryed to use this code:
listeners: {
resize: function(p) {
new Ext.Resizable(p.getEl(), {
pinned:false,
dynamic:true,
resizeElement: function() {
//this block works only when page are loaded
}
});
}
insdead of this:
resizable:{
pinned:false,
dynamic:true,
floating:true
},
But result is the same.
How can I change the width of all panels, when user changes width of one panel?
Put all the panels inside a surrounding panel, let the user change the size of this one, and all the contained panels will adapt their size automatically.
I am creating a simple drag and drop layout that incorporates 4 columns with the use of CSS easing effects when positioning. I have tried multiple solutions but nothing solves the problem. Eventually this will be an angularjs app.
Heres the JSfiddle (this is four columns so spread your browser to view the whole layout)
You will notice when you drag a module that sometimes it will let you snap to the grid and show the "placeholder" and some times it won't.
Sometimes the ".placeholder" which is the ".marker" in my example will randomly place the .marker div above the containing li elements causing this to happen.
Link to marker image
Is there a way to force the element to always be on the bottom element of all the li items of a parent ul?
Any help would be greatly appreciated!
var stylesheet = $('style[name=impostor_size]')[0].sheet;
var rule = stylesheet.rules ? stylesheet.rules[0].style : stylesheet.cssRules[0].style;
var setPadding = function(atHeight) {
rule.cssText = 'border-top-width: '+atHeight+'px';
};
$('.button-up').click(function(){
updateWidgetData();
});
$('.main-area ul').sortable({
connectWith: '.column',
cursor: 'move',
placeholder: 'marker',
forcePlaceholderSize: true,
opacity: 0.4,
start: function(event, ui){
setPadding(ui.item.height());
},
stop: function(event, ui){
ui.item.css({'top':'0','left':'0'}); //Opera fix
if(!$.browser.mozilla && !$.browser.safari)
updateWidgetData();
var next = ui.item.next();
next.css({'-moz-transition':'none', '-webkit-transition':'none', 'transition':'none'});
setTimeout(next.css.bind(next, {'-moz-transition':'border-top-width 0.1s ease-in', '-webkit-transition':'border-top-width 0.1s ease-in', 'transition':'border-top-width 0.1s ease-in'}));
}
}).disableSelection();
function updateWidgetData() {
var items = [];
$('.column').each(function() {
var columnId=$(this).attr('id');
$('.dragbox', this).each(function(i) {
var item = {
id: $(this).attr('id'),
order : i,
column: columnId
};
items.push(item);
});
});
var sortorder = { items: items };
//Pass sortorder variable to server using ajax to save state
$.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response) {
if(response=="success")
$("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
setTimeout(function() {
$('#console').fadeOut(1000);
}, 2000);
});
}
I am working with ExtJS 4.2.1
I have a button to make appear a panel.
This panel is containing my treepanel, five checkboxes below, and finally one valid button (to close the treepanel and valid the fact that we checked some nodes) and one cancel button (just to cose the treepanel).
I can make my panel appear and it works fine. But if I click on my cancel or my valid button, the panel will hide (ok), and next time I try to show it it doesn't contain my treepanel anymore, only the five checkboxes and the two buttons (attention, the two panels are different, the panel is containing my treepanel).
I don't understand because there is no reason for it to disappear. When I check the treepanel with some console.log() I can see, passing by treepanel.store.tree.root that my treepanel still exists and is properly filled. When I pass through treepanel.view.all I can see the right elements are present in my view. But when I check treepanel.body.dom with chrome debugging I can't see where the element is (ordinary when you pass over the dom with the mouse on chrome debugging you can see the corresponding part of the page colored).
Here is the concerned part of my code:
var button = Ext.get('ProductSelectionButton');
var treeSelector = createTree('stAddAction.do?action=product_tree_selector', 550, 490, '', 'lbl_st_tree_selection_empty', true, 'productlist');
button.on('click', function(){
treeSelector.store.proxy.url = 'stAddAction.do?action=product_tree_selector';
treeSelector.store.reload();
var productPanel = Ext.create('Ext.FormPanel',{
fieldDefaults:{
labelWidth: 75 // label settings here cascade unless overridden
},
frame:true,
title: document.getElementById('applicability').innerHTML + ' - ' + document.getElementById('lbl_st_product_tree_win').innerHTML,
style:'padding: 5px 5px 0; margin-top: 0;',
width: 550,
items: [treeSelector,
{
xtype: 'checkboxgroup',
items: [
{boxLabel: document.getElementById('lbl_status_deleted').innerHTML, name: 'status_2', checked: false, ctCls:'check-status-2',
listeners: {
change: function(newValue, oldValue, eOpts ){
if(newValue.checked){
// To show items with status 2 which is Deleted status
Ext.Array.remove(statusToHide, "2");
ProductList.showIdsStatus(2);
}
else{
// To hide items with status 2 which is Deleted status
Ext.Array.push(statusToHide, "2");
ProductList.hideIdsStatus(2);
}
}
},
... four others checkboxes
}],
buttons: [{
icon : 'img/st_little_valid.png',
style:'width:20px!important;',
handler: function(){
var data = '',
selNodes = treeSelector.getCheckedNodes(treeSelector.getRootNode());
precedentlyCheckedNodes = selNodes;
xhr = getXhr();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
var myLoad = eval(myDataGrid);
productgrid.store.loadData(myLoad);
productgrid.getView().refresh();
win.hide();
enableSave();
}
}
var params = "action=set_iceproduct&datatoadd=" + data + "&datatoremove=" + strUnchecked;
xhr.open("POST", "stAddAction.do", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Content-length', params.length);
xhr.send(params);
}
},
{
icon : 'img/st_little_cancel.png',
handler: function(){
/* restore all nodes how they were before (checked or unchecked) */
treeSelector.verifyCheckedNodes(precedentlyCheckedNodes);
win.hide();
/* Only expand the first level */
treeSelector.collapseAll();
treeSelector.getRootNode().expand();
}
}]
});
I don't know if it really is quite explicit...
Anyway, any idea could be welcomed!
How can this treepanel disappear from my panel and still exist!
Thank you
You are calling Ext.create in the buttons click event function every time. This means that the first time you create it, it's okay. But when you click the button again, it will create another panel with the same configuration, only you can't have treeSelector in both because it is already somewhere else. Change your code to something like:
var button = Ext.get('ProductSelectionButton');
var treeSelector = createTree('stAddAction.do?action=product_tree_selector', 550, 490, '', 'lbl_st_tree_selection_empty', true, 'productlist');
button.on('click', function(button){
treeSelector.store.proxy.url = 'stAddAction.do?action=product_tree_selector';
treeSelector.store.reload();
if(!button.productPanel)
{
button.productPanel = Ext.create('Ext.FormPanel',{
fieldDefaults:{
labelWidth: 75 // label settings here cascade unless overridden
},
frame:true,
title: document.getElementById('applicability').innerHTML + ' - ' + document.getElementById('lbl_st_product_tree_win').innerHTML,
style:'padding: 5px 5px 0; margin-top: 0;',
width: 550,
items: [
treeSelector,
{
xtype: 'checkboxgroup',
items: [
{boxLabel: document.getElementById('lbl_status_deleted').innerHTML, name: 'status_2', checked: false, ctCls:'check-status-2',
listeners: {
change: function(newValue, oldValue, eOpts ){
if(newValue.checked){
// To show items with status 2 which is Deleted status
Ext.Array.remove(statusToHide, "2");
ProductList.showIdsStatus(2);
}
else{
// To hide items with status 2 which is Deleted status
Ext.Array.push(statusToHide, "2");
ProductList.hideIdsStatus(2);
}
}
OK, so here is the way I can find current collapsed in accordion layout:
Ext.getCmp("myaccordion").query("{collapsed}")
How in the same manner I can find expanded one? I can't see expanded property. Moreover, this code:
Ext.getCmp("myaccordion").query("not:{collapsed}")
crushes my browser down.
UPD: here is my decision, based on example in ExtJS docs:
Ext.ComponentQuery.pseudos.expanded = function(items) {
var res = [];
for (var i = 0, l = items.length; i < l; i++) {
if (!items[i].collapsed) {
res.push(items[i]);
}
}
return res;
};
And then I just query this way Ext.getCmp("myaccordion").query(">*:expanded")
But can we make it shorter, using :not somehow?
You don't have to use a function for this component query.
If you have other panels somewhere in your framework that are not collapsed query('[collapsed=false]') would also include those so that was probably the problem you were having.
But you can limit the query to only direct children by calling child instead:
Ext.getCmp("myaccordion").child("[collapsed=false]");
Or you can limit it to direct children in the selector string itself if you give the accordion an id config, as it looks like you did: (id: 'myaccordion'). You can use:
Ext.ComponentQuery.query('#myaccordion > panel[collapsed=false]')
If you have the accordion configured for only one expanded panel at a time (the default config) that will give you an array with one item - the expanded panel. If you have more than one expanded panel they will each be contained in the array.
You could do:
Ext.onReady(function(){
var p1 = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 100,
height: 100,
title: 'Foo',
collapsed: true
});
var p2 = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 100,
height: 100,
title: 'Foo',
collapsed: false
});
console.log(Ext.ComponentQuery.query('[collapsed=false]'));
});