Sencha Inc. | HTML5 Apps

The Grid Component

Published Apr 26, 2011 | The Sencha Dev Team | Guide | Medium
Last Updated Jul 11, 2011

This Guide is most relevant to Ext JS, 4.x.

Guide guides/grid/README.js is not currently available
Share this post:
Leave a reply

Written by The Sencha Dev Team

6 Comments

Olivier Pons

3 years ago

That’s a very nice tutorial, but is there any way to handle key (up / press / down) events?
If the user press the “del” key => suppress current record;
If the user press the “enter” key => edit current record;
If the user press the “insert” key => create new record.

How would you do this?

DK

3 years ago

I used this code as an example ... my jsp includes ext-debug.js ... I keep getting “Uncaught TypeError: Cannot call method ‘substring’ of undefined” on line 5981 —>(if (namespace === from || namespace.substring(0, from.length) === from) {) What is it complaining about ?

Bo

3 years ago

tooltip for grid - trying to utilize MVC to create tooltip (e.g. http://docs.sencha.com/ext-js/4-0/#/api/Ext.tip.ToolTip);

care to show example of how that might look?

slemmon

3 years ago

@Olivier - Check out this page:
http://www.sencha.com/learn/grid-faq/

It’s for older Ext versions, but has a KeyMap section that I think might help you out.

Craig P

3 years ago

I tried to work this in to the existing MVC tutorial.

As for the paging, either docked on in-line scrolling: it didn’t work. Surprise surprise.

Tirumalasetti

3 years ago

I’m new to Ext Js. Starting working on Ext Js 4 since couple of days.

Pagination doesn’t work the below mentioned code. I mean store does not reflect with pageSize=n (Eg; 1,2,3,...etc).

Ext.create(‘Ext.data.Store’, {
  model: ‘User’,
  autoLoad: true,
  pageSize: 4,
  proxy: {
      type: ‘ajax’,
      url : ‘data/users.json’,
      reader: {
        type: ‘json’,
        root: ‘users’,
        totalProperty: ‘total’
      }
  }
});

Ext.create(‘Ext.grid.Panel’, {
  store: ‘User’,
  columns: ...,
  dockedItems: [{
      xtype: ‘pagingtoolbar’,
      store: userStore,  // same store GridPanel is using
      dock: ‘bottom’,
      displayInfo: true
  }]
});

Wasted couple of days to come to this conclusion. After googling i got the partly pagination solution with PaginationMemoryProxy.js. Again if i want to use Ajax proxy this doesn’t work out. Please fix this issue so that other folks should not be effected.

Leave a comment:

Commenting is not available in this channel entry.