PDA

View Full Version : [INFOREQ]Problems using sandbox for ext3/ext4 compatibility



jigermano
1 May 2011, 2:36 PM
Hi. I was trying to use the sandox (ext-all-sandbox.js) which I understand can be used to run both Ext JS 3 and Ext JS 4 in the same page, by renaming the namespace for Ext JS 4 to "Ext4". I had a datagrid working fine using just Ext4. The grid has an "actioncolumn" with an image and a handle. When I setup the sandbox and rename the namespace, though, the handle stops working, no errors shown in the javascript console. I can reproduce this with the example code from the source code documentation. So, for example, this doesn't seem to work:



Ext4.create('Ext4.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael", lastname:"Scott"},
{firstname:"Dwight", lastname:"Schrute"},
{firstname:"Jim", lastname:"Halpert"},
{firstname:"Kevin", lastname:"Malone"},
{firstname:"Angela", lastname:"Martin"}
]
});

Ext4.create('Ext4.grid.Panel', {
title: 'Action Column Demo',
store: Ext4.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: 'images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
],
width: 250,
renderTo: Ext4.getBody()
});


I am using Ext JS 4.0.0.

evant
1 May 2011, 10:09 PM
I can't reproduce this. For example if I modify the sandbox.js example:



Ext4.onReady(function(){

Ext.get('chart-win-shortcut').on('click', function(){
Ext4.create('Ext4.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'senority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott"
}, {
firstname: "Dwight",
lastname: "Schrute"
}, {
firstname: "Jim",
lastname: "Halpert"
}, {
firstname: "Kevin",
lastname: "Malone"
}, {
firstname: "Angela",
lastname: "Martin"
}]
});

var grid = Ext4.create('Ext4.grid.Panel', {
title: 'Action Column Demo',
store: Ext4.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex){
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}, {
icon: 'images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex){
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}]
});

Ext4.create('Ext.window.Window', {
width: 200,
height: 200,
layout: 'fit',
items: grid
}).show();
});
});


It shows the window as you'd expect.

jigermano
10 May 2011, 5:19 PM
Evan, thanks for your response. I'm afraid I can reproduce the problem with your example too. The window does show, but clicking the images in the action column doesn't do anything, it doesn't display the alert. I don't think I'm doing anything wrong here: just to be sure, I downloaded the framework again, (ext-4.0.0-gpl.zip), extracted it, I replaced the contents of sandbox.js with your code, opened sandbox.html, and yes, the data grid shows when clicking the "Charts" icon, but clicking in the images doesn't show anything.

jgarriso
11 May 2011, 10:35 AM
I've encountered this same problem using the sandbox and after some mucking around with a debugger I found the bug.

Line 110930 of ext-all-sandbox-debug.js:


actionIdRe: /x-action-col-(\d+)/,

This ignores the baseCSSPrefix and therefore it won't work in sandboxed mode.

If you change this line to:


actionIdRe: new RegExp(Ext.baseCSSPrefix+"action-col-(\\d+)"),

Then the action columns will work as expected.

jgarriso
11 May 2011, 10:45 AM
This is really a bug in the core EXTJS, not just the sandbox.

In /src/grid/column/Action.js they are using baseCSSPrefix all over the place except in this one regular expression.

Line 136 should be changed to something like what I wrote above rather than having the prefix hard coded.

jigermano
11 May 2011, 3:40 PM
Thanks, it's working.