I have a panel and within the panel i have three grids.
I want to be able to move the grid by dragging and dropping.
I have the draggable: true and enableDragDrop: true, that seems to allow me to drag but not drop.
Any genius help will be much appreciated.
In order to drop something that is draggable, you need to define an Ext.dd.DropTarget or Ext.dd.DropZone and define the behavior that you want when the item is dropped. Use DropZone if there are multiple drop targets in a zone that handle the drop differently, but it sounds like you want DropTarget, which is used for dropping on a single element (such as inside your panel).
To make an entire panel be able to drop things onto, pass the panel into the constructor of DropTarget, and override the notifyDrop function:
var panelDropTarget = new Ext.dd.DropTarget(panel, {
notifyDrop: function(dragsource, event, data) {
// do something with the dragsource
}
});
The dragsource that is passed into the function will have your grid in it (I think it will be dragsource.panel, but use Firebug debugging to determine exactly what that source object has in it).
Once you have a handle on the grid, you can reorder it in the panel, move itsomewhere, or define whatever behavior you want.
Related
I am using react material-ui v4.9 in my project and have multiple ExpantionPanels.
I would like to define a ref for each and have a top level button on my page to let use user Expand All and Collapse All via one click. On that click event, I would like to use the refs for each panel and either collapse or expand them all.
Is that something that is possible?
I see that the panel has an expanded property that maybe I could set to true or false, but I think that will get out of sync if the user expand or collapses some panels. Also, some panels have the defaultExpanded property turned on as well.
Can we have a ExtJs5 Tree Grid Panel which provides below features:
Inifinite Scroll so that rows are rendered with some limit on scroll and not all records at sametime.
On Click of any root node of a particular row (could be 2/3 levels), i can fire a ajax call to populate a grid/form inside the expanded row.
Please provide your expert suggestions in this regard asap.
Thanks !
1. yes you can use infinite scrolling for TreeGrid. Checkout the example
2. If you want expand a row and inside that row you want a form or a grid, then I would say that is nearly impossible. You can only handle this with a custom renderer for the gridpanel and even with this you must create it via Ext.create and render it into the treepanel.
Why dont use something like this: https://fiddle.sencha.com/#fiddle/l26
I have a main window with a custom Ext.panel.Panel using ExtJS 5.0.1.
Clicking an item shown on the custom panel creates and shows a custom Ext.window.Window for editing said item.
For the purpose of getting some kind of answer, or a starting point for my own situation, I'll ask for standard Ext components.
On closing the custom window, a variable in the custom panel needs to be updated to show that changes have been made.
This is a different requirement to a confirmation message before closing the window; the window does not control saving of information to a DB, but needs to let another component know that changes have been made.
This should be as simple as setting a boolean unsavedChanges to true on the panel if the window's information has been altered; I've performed this on a simpler page, which did not have the additional window as an obstacle.
Due to the use of the window, my typical go-to methods of calculating a variable as use of this.up or this.lookupReference returns null, or throw an error.
I'm aware that I can consider going to the parent of the page, then try and work down, but I'm not experienced enough to consolidate standard javaScript with the up and down capabilities of ExtJS, or at least understand the intricacies of ExtJS to navigate past the "item window" back to the panel.
How would I be able to refer to the panel while closing the window in order to update the panel's data?
Well, there's a couple of ways.
First, you can pass in your panel, or a callback function, during the construction of the window. e.g.:
// in panel
var window = Ext.create('MyWindow', { callingPanel: this })
...
// in window
onClose: function() { this.callingPanel.doStuff(); }
The other way to be to register a listener to the 'close' event of the window.
// in panel
var window = Ext.create('MyWindow', {
listeners: {
scope: this,
close: this.doStuff
}
})
The listener approach tends to work best when you don't want to tightly couple the window to the calling panel.
I've got two form fields, one select list, and another grid panel. Changing the selection in the select list will trigger its change event and fire a custom event called datasourcechange which the grid panel listens for. These two components have to be separate because they are used across different forms and not always together.
The problem is that when I sort the grid panel, it fetches an unfiltered list of records. I would like it to reapply the filter from the select list, if it's available.
I've tried remoteSort: false, but was thinking I could do something similar to how the select list fires an event that the panel is listening for, but I need a way to determine when the column headers have been clicked, either via a sort event or click event on the headers themselves, could anyone recommend a best practice approach for this?
We are using Extjs 4.0.5, and can't upgrade to 4.1.x. Any assistance is appreciated!
That´s a common problem. What you have to do is implement something like this:
When changing the selection in the select list, save the selected value on the grid´s store.
var store = getGridStore(); // you have to implement this method
store.selectedValue = theSelectedValue;
Next, you have to subscribe to the store´s load event in order to apply the filter before perform the request. This is, something like this:
getGridStore().on('beforeload', function (store) {
store.proxy.extraParams = { filteredByValue: store.selectedValue
}, this);
I don´t know how your implementation is, however this describes the general idea.
I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within it.