View Full Version : Tree, ExtJs grid and Date

1 Jun 2011, 11:30 AM
I am sorry but I am new to ExtJs and just really stuck. I have created a page with a west panel and center panel. The west panel is an ExtJs tree and when a node is selected a url is displayed via tabs into the center panel in this example an ExtJs grid. That is working all well at the moment but now I need to have a date that a user can put in a form in the same panel as the tree and based on the date when the user selects a node it will filter the grid.

I have built an ExtJs date entry box in my west panel, but I have no clue how I could have it look for the nodes to be selected and then filter the table based on date.

Thank you in advance for any help.

2 Jun 2011, 7:44 PM
The answer to this question is quite involved depending on exactly how you're laying out your code. You have a tree, datefield and grid and data needs to flow from the tree and datefield to the grid. You could have some combination of those classes knowing about each other and listening on each other's events. More likely you'd have a separate section of code (possibly in the class that has the border layout) that sets up the relationships between the components using event listeners. The ref config option can be useful when writing code like this.

All of this depends on how you split your code up into classes. Below I've included an example that does something similar to what you're trying to do (I've used a combobox instead of a datefield but the principle is the same). In this example I haven't factored anything out into classes and effectively I'm using global variables to allow the components to see each other. Obviously this is bad. However, without seeing your code it's the best I can do.

Ext.onReady(function() {
var combobox = new Ext.form.ComboBox({
forceSelection: true,
store: ['red', 'green', 'blue'],
triggerAction: 'all'

var root = new Ext.tree.TreeNode({text: 'Shapes'});

root.appendChild(new Ext.tree.TreeNode({shape: 'square', text: 'Square'}));
root.appendChild(new Ext.tree.TreeNode({shape: 'circle', text: 'Circle'}));
root.appendChild(new Ext.tree.TreeNode({shape: 'triangle', text: 'Triangle'}));

var tree = new Ext.tree.TreePanel({
border: false,
flex: 1,
root: root,
rootVisible: false,
xtype: 'treepanel',
selModel: new Ext.tree.MultiSelectionModel({
listeners: {
selectionchange: function(selModel, nodes) {
var shapes = Ext.pluck(Ext.pluck(nodes, 'attributes'), 'shape');
var color = combobox.getValue();

grid.getStore().filterBy(function(record) {
if (color && color !== record.get('color')) {
return false;

return Ext.isEmpty(shapes) || shapes.indexOf(record.get('shape')) !== -1;

var grid = new Ext.grid.GridPanel({
margins: '5 5 5 0',
region: 'center',
title: 'Main',
xtype: 'grid',
columns: [
{dataIndex: 'color', header: 'Color'},
{dataIndex: 'shape', header: 'Shape'}
store: new Ext.data.ArrayStore({
fields: ['color', 'shape'],
data: [['red', 'square'], ['green', 'circle'], ['red', 'circle'], ['blue', 'triangle']]

new Ext.Viewport({
layout: 'border',
items: [
margins: '5 0 5 5',
region: 'west',
split: true,
title: 'Navigate',
width: 300,
items: [
layout: {
align: 'stretch',
defaultMargins: '5',
type: 'vbox'

9 Jun 2011, 7:50 AM
Thank you so much I will try that out and see how it goes.