I have a grid.panel on the side with table names and I'd like to show the table(or it's structure) when the user clicks on it, in another grid.panel inside a tab view.
what i did:
in the actionlistener
var store = Ext.data.StoreManager.lookup('Tables');
currentTable = store.findRecord('name',record.get('name'));
var structureView = Ext.ComponentQuery.query('structure')[0];
structureView.showTable(currentTable);
in the view
showTable: function(table) {
this.storeObj.getProxy().url = '/tables/stucture/' + table.data.name;
this.storeObj.load();
this.update();
}
In the Tables store I have table descriptors, with some basic data like name, etc. and the list with table names displays the content of this store. So I look up the Tables store and get the tabledescriptor and pass it to the view, which then loads the store('Columns' in this case) with the data it will display. And all this works fine until I switch tabs. After changing the active tab and then changing back data is not refreshed on clicking on another table's name and I get this: Uncaught TypeError: Cannot call method 'removeChild' of null. It seems that it can't load the store anymore after changing the active tab. I found this issue on forums but I couldn't find a solution for it.
Do you have any ideas?
Thanks for your time.
Edit:
Ext.define('App.view.Table.Structure', {
extend: 'Ext.grid.Panel',
alias: 'widget.structure',
store: 'Columns',
width: 800,
storeObj: undefined,
initComponent: function () {
this.columns = [{
header: 'Column name',
dataIndex: 'name',
flex: 1
}, {
header: 'Position',
dataIndex: 'position',
flex: 1
}, {
header: 'Default value',
dataIndex: 'defaultValue',
flex: 1
}, {
header: 'Column type',
dataIndex: 'type',
flex: 1
}, ];
this.storeObj = Ext.StoreManager.lookup('Columns');
this.callParent(arguments);
}
Well I managed to solve it at last, but I don't really understand why this solved the problem. So this is what I did:
Every time I needed to update the Columns store(or the others) I looked it up
instead of just looking it up in the initcomponent.
Instead of calling update() method I called reconfigure()
Now it works like charm, but I don't see why update didn't do the trick and why I had to look up the store every time I wanted to call load() on it... So if someone could explain it I would be thankful.
Related
I am working on an existing application in which they have used ag-grid library for angular for most of the grids that they have in their application. Now the ag-grid gives the functionality to filter the grid based on a column value by using the filter option in the column header. I am giving a link to that https://www.ag-grid.com/angular-data-grid/filtering-overview/. I wanted to implement a feature in which we can save the filter keyword that the user is searching for and when he comes back to the same grid the previous filter is already applied. for example https://plnkr.co/edit/?p=preview&preview here we can pick athlete and filter that by going to the column and searching a value so what I want is that if I search 'abc' I should be able to preserve that. is there a way to do that ? I am giving the colDef for the link above
this.columnDefs = [
{ field: 'athlete' },
{
field: 'age',
filter: 'agNumberColumnFilter',
maxWidth: 100,
},
{
field: 'date',
filter: 'agDateColumnFilter',
filterParams: filterParams,
},
{
field: 'total',
filter: false,
},
];
this.defaultColDef = {
flex: 1,
minWidth: 150,
filter: true,
};
}
Any kind of help is appreciated, thanks :)
You can save the filter applied by using the Grid Event onFilterChanged. Inside here you can get the filterModel by calling api.getFilterModel(). In the plunkr below we are showcasing this by saving the filter model to local storage and restoring it by applying it inside the Grid Event onFirstDataRendered
onFilterChanged(params) {
const filterModel = params.api.getFilterModel();
localStorage.setItem('filterModel', JSON.stringify(filterModel));
}
onFirstDataRendered(params) {
const filterModel = JSON.parse(localStorage.getItem('filterModel'));
if (filterModel) {
params.api.setFilterModel(filterModel);
}
}
See this implemented in the following plunkr
You may also find the following documentation pages relevant:
Saving and Restoring Filter Models
Grid Events
To apply existing filters to ag-grid, it can be done using by setting up filterModel on gridApi.
gridApi.getFilterInstance("fieldName").setModel({
"filterType":"equals", //type of filter condition
"type":"text", //Type of column [text/number/date]
"filter":"value" //Value need to be applied as filter.
})
Similarly onFilterChanged event you can capture changes and apply filter dynamically.
Im using the modern toolkit with extjs 6.5.1.
I want to use the renderer property in a grid cell to use html. The renderer simply returns '<a>...</a>' but when I use this it will encode the html code so that the cell shows '<a>...</a>' instead of a link.
Regarding to the answers on this thread I will need a cell property with "encodeHtml" turned to false but as soon as I add a cell property the renderer wont get executed anymore (Even when I use EncodeHtml) and shows the data like there was no renderer property.
Why cant I use the renderer property anymore?
Heres my code:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...',
cell: {
xtype: 'textcell',
encodeHtml: false
}
}
What it looks like without encodeHtml
This behavior is because you specify
cell: {
xtype: 'textcell'
}
in the first place. Just remove it, and your renderer can return HTML. This should work:
{
xtype: 'gridcolumn',
renderer: function(value, record, dataIndex, cell, column) {
console.log('hello world');
return '<a>...</a>';
},
width: 30,
text: '...'
}
At least id does in my application, where I use renderers returning html to generate special formatting.
If you need to specify the cell property, because of something you didn't show in your code, use the default cell xtype instead: gridcell.
I have a simple grid, which looks like so:
{
xtype: "grid",
columns: [{
header: 'Title', flex: 1, dataIndex: 'Title'
}],
store: Ext.create('Ext.data.Store', {
fields:['id', 'Title']
})
}
And I have a function (attached to a button) which, I believe, should populate this grid with some data. It does it like so:
grid.store.removeAll();
records = [{"id":"1", "Title", "Hello world"}];
grid.store.add(records);
grid.store.load();
console.log(grid.store.getCount());
But for some insane reason, the store is empty and grid.store.getCount() echoes "0". What the heck is going on? PS. I'm using ExtJS 6.
EDIT
If however I slightly change my code to this:
...
store: Ext.create('Ext.data.Store', {
autoLoad: false,
fields:['id','Title'],
data:[{"id": 1,"Title": "Hello world"}]
})
...
//and in function just one line of code:
grid.store.load();
then it starts working. So, it seems like the whole problem is with store.add. It does not do what it should.
Just remove grid.store.load().
The load marks the store as needing a load, but if your adding records using add that is not what you need.
Working example: https://fiddle.sencha.com/#fiddle/1fbv
How to store the selectfield in sencha touch, such that when a field is selected, the value used by any method, but when the page refreshed, it is automatically select the previous selection.
My Code:
{
xtype: 'fieldset',
items: [{
xtype: 'selectfield',
id: 'remem',
label: 'MY Label',
store: 'remem',
options: [
{
text: 'Option1',
value: 'a'
},
{
text: 'Option2',
value: 'b'
}]
}]
}
#developer, #jenson and I are suggesting you should save the value in a cookie so the value is persisted between browser refreshes. Extjs offers a cookie manager class in the utilities namespace if I remember correct.
EDIT
For Sencha Touch you should actually make use of the LocalStorage proxy as per the docs here
There's an example in the docs showing how to save user specific information for retrieval later on (after refreshes, etc)
I have actually made use of this for my own application by saving user display preferences in my application so when they next login the UI is as they left it.
Store:
Ext.define('MyApp.store.UserPreferencesStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.UserPreferencesModel',
'Ext.data.proxy.LocalStorage'
],
config: {
model: 'MyApp.model.UserPreferencesModel',
storeId: 'UserPreferencesStore',
proxy: {
type: 'localstorage',
id: 'userpreferences'
}
}
});
Model
Ext.define('MyApp.model.UserPreferencesModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'userPrefKey'
},
{
name: 'userPrefValue'
}
]
}
});
With this setup you can add a record as you normally would do for any other store
store.add({userPrefKey: '01-showMap', userPrefValue: true});
or edit existing entries
rec = store.findRecord('userPrefKey','01-showMap');
rec.set('userPrefValue',false);
You must also call sync() on the store whenever you want to save changes, and to retrieve the saved records from local storage just call load() like for any other store.
Note that my code was written for Touch 2.3, so it may have changed slightly in the most recent 2.4.x version. But this should certainly get you on your way.
store select field value into localstorage and assign that value to selectField whenever you refresh page . So you will get always previous selected value.
I have the following code (sloppy, I know...first javascript app). I am trying to get a combobox to populate with a list of features that fall under a given release (as selected in the first combobox). Almost everything is now working correctly, except everytime I click the feature combobox for the first time, it loads ALL features and completely ignores the filter. Even if I change the release box first, the feature box still populates with all features only on first click. Subsequent times it shows the correctly filtered features.
Even stranger, I've tried writing the total records in the Feature Store to the console, so I can see when this happens. When the feature combobox is first created, it has the correct number of records in it. However, as soon as I click the feature combobox for the first time, it triggers the "load" listener of the combobox, and pulls in all the features, ignoring the filter completely.
I'm so boggled, I've tried so many things to debug this, and at this point have no other options. Does anyone have any ideas as to why it would load the correct data first, then reload it and ignore the filters on first click?
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create("Rally.ui.combobox.ReleaseComboBox", {
fieldLabel: 'Choose a Release',
width: 300,
listeners: {
ready: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
select: function(combobox) {
this._releaseRef = combobox.getRecord().get("_ref");
this._loadFeatureInfo();
},
scope: this
}
});
this.add(relComboBox);
},
_loadFeatureInfo: function() {
var featureStore = Ext.create("Rally.data.WsapiDataStore", {
model: "portfolioitem/Feature",
fetch: ["Name", "_ref"],
autoLoad: true,
filters: [
{
property: "Release",
operator: "=",
value: this._releaseRef
}
],
listeners: {
load: function(store) {
this._updateFeatureBox(store);
},
scope: this
}
});
},
_createFeatureBox: function(featureStore) {
this._featureComboBox = Ext.create("Rally.ui.combobox.ComboBox", {
fieldLabel: 'Choose a Feature to move',
store: featureStore,
listeners: {
select: function (combobox) {
this._featureRef = combobox.getRecord().get("_ref");
//calls method to get and display children of this feature in a grid
},
scope: this
}
});
this.add(this._featureComboBox);
},
_updateFeatureBox: function(featureStore) {
if (this._featureComboBox === undefined) {
this._createFeatureBox(featureStore);
} else {
this._featureComboBox.clearValue();
this._featureComboBox.bindStore(featureStore);
//calls method to get and display children of this feature in a grid
}
}
This is probably an issue caused by the featureStore loading twice: once when you created it, and the combobox also tells it to load again once the user opens the combobox to pick a Feature.
I encountered a very similar issue with a combobox on Stories, and I'd betcha dollars to donuts that Matt Greer's answer:
Strange Load behavior with Rally.ui.combobox.ComboBox
To my question, is the answer to yours too...