How to use switch between two store in one grid - javascript

I have a two data set in which one i am loading in store. My grid is completely fine. Now in some certain condition i want to load 2nd data to my store. I am using extjs 3
My code for grid is :
{
xtype: 'grid',
id: 'COGRID,
autoHeight: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
frame: true,
columns : this.columns,
store : store, // store is loading my data.
stripeRows: true,
}
My store and data :
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole ',2,'eSample'] ];
var myData2 = [
['USA','at','a'],
['France','bt',b'],
['Aus','ct','c'] ];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData); // Here I am loading first data to store

button handler config , you need to set your data according to your requirement.
e.g
{
xtype:button,
text:'Click Me',
handler:function(btn){
Ext.getCmp('COGRID').getStore().loadData(myData);
}

Related

Extjs 4.2.1 Local filtering of Grid panel with Paging

Fiddle with the problem is here https://fiddle.sencha.com/#view/editor&fiddle/2o8q
There are a lot of methods in the net about how to locally filter grid panel that have paging, but no one is working for me. I have the following grid
var grid = Ext.create('Ext.grid.GridPanel', {
store: store,
bbar: pagingToolbar,
columns: [getColumns()],
features: [{
ftype: 'filters',
local: true,
filters: [getFilters()],
}],
}
Filters here have the form (just copy pasted part of my filters object)
{
type: 'string',
dataIndex: 'name',
active: false
}, {
type: 'numeric',
dataIndex: 'id',
active: false
},
The store is the following
var store = Ext.create('Ext.data.Store', {
model: 'Store',
autoLoad: true,
proxy: {
data: myData,
enablePaging: true,
type: 'memory',
reader: {
type: 'array',
}
},
});
Here myData - comes to me in the form of
["1245", "Joen", "Devis", "user", "", "email#com", "15/6/2017"],
["9876", "Alex", "Klex", "user", "", "email#com", "15/6/2017"],[...
Also I have the the pagingToolbar
var pagingToolbar = Ext.create('Ext.PagingToolbar', {
store: store, displayInfo: true
});
So all the elements use the store I declared in the top. I have 25 elements per grid page, and around 43 elements in myData. So now I have 2 pages in my grid. When I am on first page of grid and apply string filter for name, for example, it filters first page (25 elements), when I move to 2d page, grid is also filtered, but in scope of second page. So as a result each page filters seperately. I need to filter ALL pages at the same time when I check the checkbox of filter, and to update the info of pagingToolbar accordingly. What I am doing wrong?
Almost sure that it is a late answer, but I have found the local store filter solution for paging grid you are probably looking for:
https://fiddle.sencha.com/#fiddle/2jgl
It used store proxy to load data into the grid instead of explicitly specify them in store config.
In general:
create empty store with next mandatory options
....
proxy: {
type: 'memory',
enablePaging: true,
....
},
pageSize: 10,
remoteFilter: true,
....
then load data to the store using its proxy instead of loadData
method
store.getProxy().data = myData;
store.reload()
apply filter to see result
store.filter([{ property: 'name', value: 'Bob' }]);
See President.js store configuration in provided fiddle example for more details.
Hope it helps

Extjs 6 combobox values and display values not displaying correctly when setting values dynamically per row

Oof that was a long title.
In my current project I have a grid that holds a set of workshop records. For each of these workshops there is a set of rates that apply specifically to the given workshop.
My goal is to display a combobox for each row that shows the rates specific to that work shop.
I've got a prototype that works for the most part up on sencha fiddle, but there's something off about how the selection values are being created:
Ext.define('Rates',{
extend: 'Ext.data.Store',
storeId: 'rates',
fields: [
'rateArray'
],
data:[
{
workshop: 'test workshop 1',
rateArray: {
rate1: {show: "yes", rate: "105", description: "Standard Registration"},
rate3: {show: "Yes", rate: "125", description: "Non-Member Rate"},
rate4: {show: "yes", rate: "44", description: "Price for SK tester"}
}
},
{
workshop: 'test workshop 2',
rateArray: {
rate1: {show: "yes", rate: "10", description: "Standard Registration"},
rate2: {show: "yes", rate: "25", description: "Non-Member Registration"}
}
}
]
});
Ext.define('MyGrid',{
extend: 'Ext.grid.Panel',
title: 'test combo box with unique values per row',
renderTo: Ext.getBody(),
columns:[
{
xtype: 'gridcolumn',
text: 'Name',
dataIndex: 'workshop',
flex: 1
},
{
xtype: 'widgetcolumn',
text: 'Price',
width: 200,
widget:{
xtype: 'combo',
store: [
// ['test','worked']
]
},
onWidgetAttach: function (column, widget, record){
var selections = [];
Ext.Object.each(record.get('rateArray'), function (rate, value, obj){
var desc = Ext.String.format("${0}: {1}", value.rate, value.description);
// according to the docs section on combobox stores that use 2 dimensional arrays
// I would think pushing it this way would make the display value of the combobox
// the description and the value stored the rate.
selections.push([rate, desc]);
});
console.log(selections);
widget.getStore().add(selections);
}
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Rates');
Ext.create('MyGrid',{store: store});
}
});
In the grid widget that I'm using for the combobox I'm using the onWidgetAttach method to inspect the current row's record, assemble the rate data from the record into 2 dimensional array, and then setting that to the widget's store.
When I look at the sencha docs section on using a 2 dimensional array as the store, it states:
For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo valueField, while the value at index 1 is assumed to be the combo displayField.
Given that, I would expect the combo box to show the assembled description (e.g.
"$150: Standard Registration") and use the object key as the actual stored value (e.g. "rate1").
What I'm actually seeing is that the display value is the rate and I'm not sure how sencha generates the combobox selections to see how the selection is being rendered out.
Is my assumption about how the 2-dimensionally array gets converted to the store wrong?
Well, your question is suffering from the XY problem. Because what you really want to do is the following:
You want to create a decent store for your combo, using a well-defined model with the meaningful column names you already have in "rateArray", then you define displayField and valueField accordingly, and in onWidgetAttach, just stuff the "rateArray" object into that store using setData.
Sth. along the lines of
xtype: 'widgetcolumn',
text: 'Price',
width: 200,
widget:{
xtype: 'combo',
store: Ext.create('Ext.data.Store',{
fields:['rate','description','show']
filters:[{property:'show',value:"yes"}]
}),
displayField:'description',
valueField:'rate',
onWidgetAttach: function (column, widget, record){
widget.getStore().setData(record.get("rateArray"));
}
},

Updating entire dojox.grid.datagrid row

I've been trying to update the entire row of my grid, but having issues. I am able to update a single cell (if it doesn't have a formatter), but I would like to be able to update the entire row. Alternatively, I could update the column, but I'm not able to get it working if it has a formatter.
Here is the code that I'm using to update the grid:
grid.store.fetch({query : { some_input : o.some_input },
onItem : function (item ) {
dataStore.setValue(item, 'input', '123'); //works!
dataStore.setValue(item, '_item', o); //doesn't work!
}
});
And the structure of my grid:
structure: [
{ type: "dojox.grid._CheckBoxSelector"},
[[{ name: "Field1", field: "input", width:"25%"}
,{ name: "Field2", field: "another_input", width:"25%"}
,{ name: "Field3", field: "_item", formatter:myFormatter, width:"25%"}
,{ name: "Field4", field: "_item", formatter:myOtherFormatter, width:"25%"}
]]
]
Got some information in the #dojo freenode channel from 'tk' who kindly put together a fiddle showing the proper way to do this, most noteably putting an idProperty on the memoryStore and overwriting the data: http://jsfiddle.net/few3k7b8/2/
var memoryStore = new Memory({
data: [{
alienPop: 320000,
humanPop: 56000,
planet: 'Zoron'
}, {
alienPop: 980940,
humanPop: 56052,
planet: 'Gaxula'
}, {
alienPop: 200,
humanPop: 500,
planet: 'Reiutsink'
}],
idProperty: "planet"
});
And then when we want to update:
memoryStore.put(item, {
overwrite: true
});
Remember that item has to have a field 'planet', and it should be the same as one of our existing planets in order to overwrite that row.

understanding store in ExtJS

I am new to ExtJS and I find documentation confusing, I need to get the first data from store, which I get from the report. How to do it correctly?
this.divisionList = new ....SimplestReportCombo({
fieldLabel: "Division",
allowBlank: false,
valueField: 'KEY',
displayField: store.load.get(0),
width: 200,
reportID: 'USER_ACCESS',
store : new Ext.data.ArrayStore({
fields: [{name: 'KEY'}],
data: [{name: 'VALUE'}]
}
)
});
Javascript Stores mostly resembles RDBMS tables. They have in memomy storage and they are helpful to perform various grid level operation like sorting , paging , shuffling , editing etc.
Lets come to your code now,
You dont need to load store get its elements.If you requirement is only to select 1st ellement from store then you can do that using getAt function like below:
this.divisionList = new ....SimplestReportCombo({
fieldLabel: "Division",
allowBlank: false,
valueField: 'KEY',
displayField: store.getAt(0),
width: 200,
reportID: 'USER_ACCESS',
store : new Ext.data.ArrayStore({
fields: [{name: 'KEY'}],
data: [{name: 'VALUE'}]
}
)
});
or else you can also use following store method if you want to render mere 1st element:
store.first()

Json data not showing in extjs grid

Given data in the form:
var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]
I wish to draw a grid like so:
The grid shows with 2 rows but with no data, I can't find the problem in the following code:
var grid_store = Ext.create('Ext.data.Store', {
fields: [
{name: 'Property'},
{name: 'Value'}
],
data: grid_data
});
// create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
store: grid_store,
renderTo: 'info_panel',
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Property',
width : 100,
sortable : true,
dataIndex: 'Property'
},
{
text : 'Value',
width : 80,
sortable : false,
dataIndex: 'Value'
}
],
height: 350,
width: 600,
title: 'Array Grid',
viewConfig: {
stripeRows: true
}
});
Renders to:
<div id="info_panel"></div>
If you're wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I'd prefer to miss out that step and insert the data as-is.
edit:
I think what I'm really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:
{value: 'Hello'}, {property: 'World'}
As one of the commenters and your edit suggested, your grid is built to consume a json with 'Property' and 'Value' being the keys for the json objects. I don't know if it's possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:
var new_data = [];
Ext.each(grid_data, function(obj) {
for (var prop in obj) {
new_data.push({
Property: prop,
Value: obj[prop]
});
}
}, this);

Categories