New to PrimeNG/Angular here. We have a element that first opens as a fairly small window. Users can click on a link to expand the dialog. When expanded, the width expands to the right but the dialog stays positioned as when it first opened.
I understand there's supposed to be a dialog center() method but I can't figure out how to wire it up. Thanks!
Got it to work by using this as an inspiration: PrimeNG p-dialog positionTop
Basically, I'm setting an 'expanded' class on the ui-dialog element itself, as well as some inner elements, and then programmatically setting the left position.
private centerDialog() {
const dialogElement = <HTMLElement>document.querySelector('.ui-dialog');
if (!dialogElement) {
setTimeout(() => {
this.centerDialog();
}, 100);
} else {
this.toggleExpandedClass();
dialogElement.style.left =
window.innerWidth / 2 - dialogElement.clientWidth / 2 + 'px';
}
}
Related
I am using react-calendar-timeline and there I am using controlled scrolling feature very similar to this example. Now as you can see only current date is being displayed but user can scroll the canvas to previous and next date. That means canvas is taking 3x width of the dateRange.
I just need the current date to be displayed in canvas only.
Thank you in advance.
I have also dug a lot over the docs and internet to solve this problem.
Finally, I got it. I am sharing my solution with those who are in the same situation.
Create defaultTimeRange and set to min and max zoom props to disable the zoom.
Then write a handler function for onTimeChange and take the third callback funciton to disable the scroll.
// Set the visible start and date somewhere in the beginning like this using useEffect
setVisibleTimeStart(currentDate.startOf("day").valueOf());
setVisibleTimeEnd(currentDate.endOf("day").valueOf());
...
const defaultTimeRange = visibleTimeEnd - visibleTimeStart;
<Timeline
...
minZoom={defaultTimeRange} <--- To disable Zoom
maxZoom={defaultTimeRange} <--- To disable Zoom
onTimeChange={(_start, _end, updateScrollCanvas) => {
updateScrollCanvas( <--- To disable Scroll
moment(visibleTimeStart).valueOf(),
moment(visibleTimeEnd).valueOf()
);
}}
>
Then you have to override one css class like this
.react-calendar-timeline .rct-scroll{
overflow-x: hidden !important;
}
I have created 3 variables
const defaultTimeStart = moment().add(0, 'hour');
const defaultTimeEnd = moment().add(6, 'hour');
const defaultVisableTimeEnd = moment().add(24, 'hour');
// create calendar view of one day
const defaultTimeRange =defaultTimeStart - defaultVisableTimeEnd;
<Timeline
...
minZoom={defaultTimeRange}
maxZoom={defaultTimeRange}
//it will not allow to scroll more than [enter image description here][1]a day
onTimeChange={(_start, _end, updateScrollCanvas) => {
if (_start > defaultTimeStart && _end < defaultVisableTimeEnd)
updateScrollCanvas(_start, _end);
}}
/>
I have an app that uses ExtJS 3.3.0. It uses an EditorGridPanel in which after the store is reloaded - I would like it to preserve the scroll position of the grid rather than sending it back up to the top.
Since it's an earlier version of ExtJS - this does not work.
viewConfig: {
preserveScrollOnRefresh: true
}
I thought I had found a solution per Zeke's suggestion to use a scrollTo function like so:
//Save position
var top = grid.getView().scrollergetScroll().top;
//Restore position
grid.getView().scroller.scrollTo('top',top);
This works great - except that after it's done reloading it goes right back up to the top. Basically this would be a perfect solution if only I didn't need preserve the cursor position after reloading the store.
grid().getStore().reload({
callback: function (response) {
//Works at this point
grid.getView().scroller.scrollTo('top',top);
}
}
//However the cursor pops right back up to the top after popping out of
//reload() block
Thanks in advance
This is a little kludgy - maybe the best strategy is just not to use older versions of ExtJS - but this seems to work okay.
Basically just declare some global variables that can be seen from anywhere in the file - one is a flag to indicate that the event that triggers the reload has occured (rowClicked), and one to represent the last known position of the scrollbar
var rowClicked = false;
var prevScrollPosition = -1;
When the event occurs that will trigger the re-load - set the global variable rowClicked to true
rowclick: function(grid, rowIndex, event) {
rowClicked = true;
Then in the listeners of the grid use the rowClicked variable to determine when to re-position the scrollbar.
listeners : {
bodyscroll: function(sl, st) {
if (rowClicked) {
getScenarioLineOrderNumbersGrid().getView().scroller.scrollTo('top',prevScrollPosition);
rowClicked = false;
}
prevScrollPosition = st;
}
Kludgy - but it works.
i am working in extjs4. i have grid with checkbox selection model. Grid is displaying files and folders. If folder get selected then i want to hide some menu. So have written code as-
selectionchange:function( model, selected, eOpts ){
var centralPanel = me.up();
var actionBtn = centralPanel.queryById('libraryactionBtn');
if(selected.length > 1) {
actionBtn.show();
//var i=0;
for(i=0;i<selected.length;i++)
{
if(selected[i].data.isLeaf)
{
centralPanel.queryById('library-action-menu-view').hide();
centralPanel.queryById('library-action-menu-viewOrAddTag').hide();
centralPanel.queryById('library-action-menu-viewOrAddNotes').hide();
centralPanel.queryById('library-action-menu-copyToCompaign').hide();
centralPanel.queryById('library-action-menu-copyToProject').hide();
centralPanel.queryById('library-action-menu-sendLink').hide();
centralPanel.queryById('library-action-menu-addtofavorite').hide();
centralPanel.queryById('library-action-menu-downloadItem').hide();
}
}
} else {
actionBtn.hide();
}
where selected.data.isLeaf is false for folder. Its executing correctly only first time. Next time when i am selecting file,then also its hiding menu for file. And if folder is deselected then also its hiding menu. So what modifications i need to do
first of all I don't see any code that shows the menu..You are just hiding the menu.
Secondly make sure selected[i].data.isLeaf is false and not "false".
I am currently creating a web-based Mobile App using Phonegap 1.6.0 and Sencha Touch 1.1. The app consists of a number of panels through which the user can click.
Some of these panels have textfields or textareas in them. Upon entering the panel, we want these to automatically be focused. This seems to work with textfields but not with textareas.
I have a Panel with the following component:
xtype: 'textareafield',
cls: 'jasbackblock',
id: 'addreactiontextarea',
height: '100%',
grow: true,
listeners: {
afterrender: function(cmp) {
console.log('Component rendered.');
cmp.fieldEl.dom.focus();
}
Whenever I first open the panel, it automatically focuses, which is good. However, when I leave the panel and then return to it, I cannot think of a good way to do this with events.
I have previously tried the show listener in the panel:
listeners: {
show: function(cmp) {
Ext.get('addreactiontextarea').fieldEl.dom.focus();
}
}
This gives me the following error:
Uncaught TypeError: Cannot read property 'fieldEl' of null
It seems that I cannot access the element during the show event. Is there any other event that I could use which fires every time the panel is loaded and allows me to access the textarea?
If it is any help, this is the method we call to switch from one panel to another:
function switchScreen(from, to, newArgs) {
/* Save screen information. */
if (from != -1)
historyStack.push([from, screenArgs]);
if (currentPage > 2) {
if (to != 3)
main.getComponent(3).hide();
app.getComponent(currentPage - 3).hide();
}
else
main.getComponent(currentPage).hide();
screenArgs = newArgs;
if (to > 2) {
main.setActiveItem(3);
app.setActiveItem(to - 3);
/* setActiveItem does not fire a screen's show event if it has been
* shown before. Since we want the code in the screen's show listener to
* be executed every time we switch to the screen, we call show manually
* just to fire the event. */
main.getComponent(3).show();
app.getComponent(to - 3).show();
}
else {
main.setActiveItem(to);
main.getComponent(to).show();
}
if (to == 0 || to == 1)
adMode = to;
else
adMode = -1;
currentPage = to;
}
I solved the problem. The issue was that I was not quite aware of how DOM elements worked.
Ext.get('id') returns the DOM element of the Javascript Object with the id 'id'. It does not return the object itself.
Ext.getCmp('id') returns the Javascript object with the id 'id'. Therefore, Ext.getCmp('id').fieldEl returns the same object as Ext.get('id').
Because of a bug in Sencha Touch 1.1, we chose to use the DOM focus function rather than the Sencha focus function. One can access this function by either Ext.getCmp('id').fieldEl.dom.focus() or Ext.get('id').dom.focus(). As you can see in my question, I mixed these up. Because of my lack of experience with DOM elements, I became even more confused when I tried to use an Object function this way. (Ext.get('id').reset() is simply illogical.)
If you have any questions, feel free to message.
I want to show only one GridPanel,which I dynamically add by switch click button event, in window.
var event_menu = new Ext.menu.Menu( {
id : "event_menu",
items : [ {
text : 'record1',
handler : function() {
win.add(item_list_panel);//dynamica add GridPanel to show server data
win.doLayout();
item_list_store.load();
}
}, {
text : 'record2',
handler : function() {
win.remove(item_list_panel);//I want to remove it inorder to show the item_list_panel2 and only show one panel.
win.add(item_list_panel2);
win.doLayout();
item_list_store.load();
}
} ]
});
and this menu belong to my window tbar.
when I click record win will show item_list_panel and I want to when I click record2 the item_list_panel2 will show in win and item_list_panel will hide.
If I win.remove(item_list_panel) will have an error :
c.getPositionEl().dom is undefined
How can I do it,Thanks
I can barely understand your question, but if I understand correctly you can do it several ways.
you can destroy the component directly
item_list_panel.destroy()
you can go through your items and select it by id
win.items.item('item_id').destroy()
There are also ways to remove it without completely destroying it, depends what you want to do