Hello i am want output in grid data from two store (store:'book' and store:'price')
i am do this:
Ext.define('TPL.book', {
title: 'Price for Books',
store: 'Book',
header: false,
stripeRows: true,
constructor: function (config) {
this.initConfig(config);
this.callParent(arguments);
},
initComponent: function() {
this.columns = [
{header: 'Id', dataIndex: 'id', flex: 1, hidden: true},
{header: 'Name', dataIndex: 'name', width: 600, hidden: false},
{header: 'Price', dataIndex: '???', width: 100, hidden: false},
];
this.callParent(arguments);
}
});
I am want in column 'Price' output data from store 'Price' where id from store 'Book' equal id from store 'Price'
You would just do a store filter on your click event or load event. Good example here: How to filter a store with multiple values at once?
If you have it in two stores and need to combine it down to one store you could do a Ext.each(array, function(value) {}); and then just push the matched pairs into a new store. I would use the filters and give them filter IDs though and you could then remove filters pretty easily.
Related
Ext.define('TPL.view.Book', {
extend: 'Ext.grid.Panel',
alias: 'widget.book',
title: 'Books',
store: 'Book',
header: false,
stripeRows: true,
initComponent: function() {
this.columns = [
{header: 'Id', dataIndex: 'id', flex: 1},
{header: 'Author', dataIndex: 'author', width: 50, flex: 0},
{header: 'Price', dataIndex: 'price', width: 50, flex: 0},
];
this.callParent(arguments);
}});
And in header (column - 'Author') i am want make filter - so when a user enters a word into the filter, then outputs the result in the table (filter should be independent case for words). How make this? thanks
about this:
To use filters on the grid panel you have to do the following:
add 'Ext.ux.grid.FiltersFeature' to the 'requires' property of your grid,
add filters as a feature to your grid panel:
features: [
{
ftype: 'filters',
local: true
}
]
and finally, mark the columns you which to have the filter using the property 'filter':
{
xtype: 'gridcolumn',
filter: {
type: 'string'
}
...
}
Ext.define('MyApp.view.MyVehicleGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
header: false,
store: UserStore,
multiSelect: false,
columns: [
{
xtype: 'gridcolumn',
dataIndex: '_id',
text: 'Vehicle ID'
},
{
xtype: 'gridcolumn',
width: 126,
dataIndex: 'Plat_No',
text: 'Plat Number'
},
{
xtype: 'gridcolumn',
width: 200,
dataIndex: 'Name',
text: 'Added By'
}
]
})
i dont have any id declare in the gridpanel, because it will used in dynamicly,
so, i m using alias to find my grid component like below code
var grid = Ext.ComponentQuery.query('mygrid');
console.log( Ext.ComponentQuery.query('mygrid') );
if (grid.getSelectionModel().hasSelection()) { //error at here
var row = grid.getSelectionModel().getSelection()[0];
console.log(row.get('Plat_No'));
};
But, firebug return error with TypeError: grid.getSelectionModel is not a function
any other way to find my gridpanel component?
Ext.ComponentQuery.query() returns an array of matched Components from within the passed root object.
So if you have only one mygrid component in your application, you can get your grid like this:
var grid = Ext.ComponentQuery.query('mygrid')[0];
I have done live search on grid. it is searching based on which column i mentioned filter code. But i need to filter grid records based on multiple column search. In below code only searches name column because mentioned only the name filed in filter code. I am not getting how to achieve multiple column value search? Can any one tell me how to achieve? great appreciated. Thank you .
Grid Code Here:
{
xtype: 'gridpanel',
flex: 2,
hidden: false,
store: store,
loadMask: true,
id: 'grid',
columns: [
{id:'id',header: 'ID', width: 100, sortable: true, dataIndex: 'id'},
{header: 'Name', width: 150, dataIndex: 'name'},
{header: 'Position', width: 150, dataIndex: 'position'},
{header: 'Ambition', width: 250, dataIndex: 'ambition'}
],
stripeRows: true,
title:'Straw Hats Crew',
},
liveSearch text change even Here:
onTextFieldChange: function(field, newValue, oldValue, options){
var grid = Ext.getCmp('grid');
if(newValue==''){
grid.store.clearFilter();
}
else {
grid.store.clearFilter();
grid.store.load().filter([
{id: 'name', property: "name", value: newValue, anyMatch: true}
]);
}
},
Something like this should work. You can specify an arbitrary filter function that can check all the fields in your model.
onTextFieldChange: function(field, newValue, oldValue, options){
var grid = Ext.getCmp('grid');
grid.store.clearFilter();
if (newValue) {
var matcher = new RegExp(Ext.String.escapeRegex(newValue), "i");
grid.store.filter({
filterFn: function(record) {
return matcher.test(record.get('id')) ||
matcher.test(record.get('name')) ||
matcher.test(record.get('position')) ||
matcher.test(record.get('ambition'));
}
});
}
}
I am trying to implement grouping to the gridpanel using grouping store and grouping view.
Basically I want to modify the example given in this link;
http://api.geoext.org/1.1/examples/wms-capabilities.html
It is using Geoext web mapping library developed on extjs framework.Here GeoExt.data.WMSCapabilitiesStore is the store used for data from a url in XML.
Sample working xml can be viewed here:
url for xml
I am modifying the code to group the resulted records based on for example, 'name'.
Some how I am not able to properly configure the grouping store.
Here is my code sample:
var store;
Ext.onReady(function() {
// create a new WMS capabilities store
store = new GeoExt.data.WMSCapabilitiesStore({
url: "data.xml"
});
// load the store with records derived from the doc at the above url
store.load();
store.on('load',function(store,records,opts){
console.log(store.getRange());
}); //show the array data in firebug console
var reader = new Ext.data.ArrayReader({
fields: [{name: 'title'},
{name: 'name'},
{name: 'queryable'},
{name: 'abstract'}
]});
var grpstore = new Ext.data.GroupingStore({
data: store,
autoLoad: true,
reader: reader,
sortInfo:{field: 'title', direction: "ASC"},
groupField:'name'
});
//SP
// create a grid to display records from the store
var grid = new Ext.grid.GridPanel({
title: "WMS Capabilities",
store: grpstore,
columns: [
{header: "Title", dataIndex: "title", sortable: true},
{header: "Name", dataIndex: "name", sortable: true},
{header: "Queryable", dataIndex: "queryable", sortable: true, width: 70},
{id: "description", header: "Description", dataIndex: "abstract"}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
autoExpandColumn: "description",
listeners: {
rowdblclick: mapPreview
},
iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
renderTo: "capgrid"
});
function mapPreview(grid, index) {
var record = grid.getStore().getAt(index);
var layer = record.getLayer().clone();
var win = new Ext.Window({
title: "Preview: " + record.get("title"),
width: 512,
height: 256,
layout: "fit",
items: [{
xtype: "gx_mappanel",
layers: [layer],
extent: record.get("llbbox")
}]
});
win.show();
}
});
I am getting the panel with group options in the columns but the grid is empty. I tried many options in the data input of grouping store, but could not make it work.
Is it good way to get the data from 'store' as array, and then read it again in grouping store? But I couldnt make it working.
store.getRange() is showing all the data in the firebug console, probably as an array. I tried it as per this post. How to then call this array as data in grouping store, if this is a good way of doing it.
Any lead on this would be very helpful
Thanks
Sajid
I was looking to do exactly the same thing. I found two things:
You can use the store.Each function to copy the data from the WMSCapabilitiesStore to the Grouping Store
This was the trouble - the loading of the store is asynchronous, so you have to use store.on to set up a callback function to populate the groupingStore once the WMSCapabilitiesStore is finished loading.
Here's the code:
store = new GeoExt.data.WMSCapabilitiesStore({
url: "data.xml"
});
store.load();
grpStore = new Ext.data.GroupingStore({
groupField: 'name',
sortInfo: {field: 'name', direction: 'ASC'},
groupOnSort: true
});
store.on('load', function(store, records, options)
{
store.each(function(eachItem) {
grpStore.add(eachItem);
});
});
var grid = new Ext.grid.GridPanel({
store: grpStore,
columns: [
{header: "Title", dataIndex: "title", sortable: true},
{header: "Name", dataIndex: "name", sortable: true},
{id: "description", header: "Description", dataIndex: "abstract"}
],
autoExpandColumn: "description",
height: 300,
width: 650,
view: new Ext.grid.GroupingView({
forcefit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
});
When I initialize my ArrayStore with some data then I can insert new records and everything displays correctly. However, if I initialize the ArrayStore with an empty array then while the first record inserted works every subsequent insert overwrites the first record in the grid.
This seems a simple problem but I can't find a working way to initialize the grid as empty.
So what am I doing wrong?
Many thanks in advance!
var myData = [
// Initializing with the following element works.
//['Hyannis Connector',3456.9,'Hyannis Connector Bridle Path','Hyannis Connector/Baden Powell'],
// Initializing with this element works but leaves an empty row in the grid..
//[]
];
// create the data store
segmentStore = new Ext.data.ArrayStore({
fields: [
{name: 'trailName'},
{name: 'segmentLength', type: 'float'},
{name: 'startJunction'},
{name: 'endJunction'},
]
});
// manually load local data
segmentStore.loadData(myData);
// create the Grid
segmentGrid = new Ext.grid.GridPanel({
region: 'south',
store: segmentStore,
columns: [
{header: 'Trail Name', width: 140, sortable: true, dataIndex: 'trailName'},
{header: 'Segment Length', width: 75, sortable: true, dataIndex: 'segmentLength'},
{header: 'Start Junction', width: 75, sortable: true, dataIndex: 'startJunction'},
{header: 'End Junction', width: 75, sortable: true, dataIndex: 'endJunction'},
],
stripeRows: true,
height: 150,
width: 600,
title: 'Trail Segments in Route',
layout: 'fit'
});
var defaultData = {
trailName: segment.getTrailName(),
segmentLength: segment.getLength(),
startJunction: '',
endJunction: ''
};
var recId = 3;
var p = new segmentStore.recordType(defaultData, recId);
segmentStore.insert(0, p);
The answer was provided in the ExtJS Forum.
I needed to ensure the record id of the new records was different.