I would like , how to puts data in grid Panel when i clik on a tree's node ?
When , i clik on a node, it fires a itemclick events, i have model on parameters ...
now, i want to "write" the data's model on my gridPanel. I want to had one line on my grid !
With a grid Panel, i must to use store , so i have tested with memory store who contains an empty data properties .. ! I thought , i can putting data on the fly in my grid ... maybe i can't !
I need helps, thanks a lot :) !
To add data to a grid, you need to add the data to the grid's Store. There is a ton of documentation about adding new items, but you would do something like this:
var Item = grid.getStore().recordType;
var newItem = new Banner(
{
// attributes of your newItem here
// these would be the same as your Store
});
store.insert(0, newItem);
That would insert your new item as the first item in your store, and should automatically fire the grid to refresh. If it doesn't, you can manually fire a refresh by doing:
bannerGrid.getView().refresh();
Documentation for Store. Take a look at the add() and insert() methods.
Related
I have a search button that triggers Ajax request to fetch data from DB. When the promise is resolved I populate gridoptions.data. The grid is rendered in the screen.
I make some changes in the grid, like hide some columns, enter something into the header filters, change sort order etc.. When I hit the search button again, the data is fetched again and grid is updated with that data but the grid layout remains as is, all the the changes I made earlier in place..
I need to intialize the grid every time I hit search button... I tried redefining gridoptions.columnDefs but that didn't work..
Suggestions please.
Try:
$scope.gridoptions = {} as the first line in the search function, instead of just clearing the columnDefs.
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 trying to change ComboBox configuration by reinitializing:
Ext.onReady(function(){
var mycb = new Ext.form.ComboBox({
//params
});
//here is other component initizing
var other = ....
onChange: function() {
//here I'm trying to reinitialize ComboBox
mycb = new Ext.form.ComboBox({
// other params
});
}
});
But after onChange event my ComboBox's disapeared. I tried to invoke mycb.destroy() methods, but there's the same result.
Should I unregister or something like that ComboBox? Why my component is disapearing?
use below code ..
mycb.reset();
mycb.removeAll();
// for loading new data
mycb.loadData("new data store");
// to load attributes
mycb.load({params:{start:0, limit:25, reset:true}});
this is working in my code. Please change as per your need.
Probably a better idea would be to remove the original combobox from its container and add a new one in its place. Also perhaps all you need is to reload the store with new data?
Wrap this combo in panel with fit layout. In onChange handler remove combo from that panel, destroy it (combo), and add new combo to the panel. Having additional panel will give you easy way to put it in right place in the layout.
I have a grid and when I click on a button in the toolbar of the panel I want to check if a row in the grid is selected.
If true I need de value of one cell of that row, so I can put it behind a url.
But I have no idea how I can use the selection model to get the cell value of a selected row in EXT JS 4.
Perhaps try something like:
grid.getSelectionModel().getSelection()
This will return an array of all selected records withing the grid.
Then, you can iterate over the selection, find your row and call row.get('PropName') to get the value.
Hope this helps.
You're approaching the issue backwards though. You want to register for the 'selectionchange' event from the grid.
thisController.control ({'#mygrid':
{
selectionchange:onSelectionChange}
});
function:onSelectionChange(model, selected, eOpts )
{
//do work here
}
So basically you want to create an event driven model.
I am not looking at clearing all the store items with removeAll(). I have a paginated grid which has multiple pages. I want to clear out everything and before i assign new set of data , it should look afresh ? Does anyone know of any API ?
Regards
ExtJS grids are bound to an Ext.data.Store, all of their data comes from the store. If you want to clear the contents of a grid you'd have to clear the contents of its store.
If your data can be loaded from the same store URL with different parameters then you could try just manually overriding them when you want to load fresh data...
grid.getStore().load({
params: {
newParam: value
}
});
The way to clear grid data(without doing a backend hit) is to clear the associated store data and refresh the grid view.
Lets say transactionsGrid is associated with a store, then we can clear data shown in grid as below:
clear data using : transactionsGrid.store.clearData();
then refresh the grid view as : transactionsGrid.view.refresh();