View Full Version : Ex JS Grid Tab Button Navigation for Arabic Pages

12 Jun 2013, 11:32 PM
In my application i am using localization, the languages are english and arabic, at english pages the grid tab button navigation is working fine, it's moving left to right but at arabic pages its work like same as english pages, i need tab button navigation right to left at arabic pages. Is there any solution?

For further clearification you may look into the images.

For english which is working fine. 44340

For arabic, need a solution to tab button navigation direction

14 Jun 2013, 2:11 PM
Are you setting up the app similar to the RTL example here?

I edited the example in the 4.2.1 SDK download to use the cell selection model and cell editing and it seemed to work ok for me as expected.

18 Jun 2013, 1:43 AM
Thanks to reply, Yes I have looked into the Grid rtl example and what I found that used 'Ext.container.Viewport', and set its rtl property to true, but in my case I am using Ext.grid.Panel and i have already set its rtl value true, but it does not work in my case. Can its possible I can do that with Ext.grid.Panel?

18 Jun 2013, 6:26 PM
It should work ok. I tried with the below example and it worked ok for me:

<link rel='stylesheet' type='text/css' href='http://cdn.sencha.com/ext/commercial/4.2.1/resources/css/ext-all-neptune-rtl-debug.css'/>
<script type='text/javascript' src='http://cdn.sencha.com/ext/commercial/4.2.1/ext-all-rtl.js'></script>

<script tyle='text/javascript'>
enabled : true,
disableCaching : false

name: 'Test',
launch: function () {

Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'

Ext.create('Ext.grid.Panel', {
rtl: true,
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
{header: 'Phone', dataIndex: 'phone'}
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
height: 200,
width: 400,
renderTo: Ext.getBody()