You sure your using 3.x ? if so, what version exactly?Quote:
Originally Posted by Thomas Triplet
If you have an example page with this problem, that would help.
Printable View
You sure your using 3.x ? if so, what version exactly?Quote:
Originally Posted by Thomas Triplet
If you have an example page with this problem, that would help.
Yes, I am using version 3.0.0
I dont have the page online, but bellow are relevant pieces of code:
The data is very straight forward, just a spreadsheet with 5 columns, one for each of the fields defined in the RecordCode:Passport.spreadsheet_panel = new Ext.grid.EditorGridPanel( {
id: 'spreadsheet_panel',
title:"Substrates",
iconCls: 'icon-grid',
store: Passport.spreadsheet_store,
cm: cmSubstrates,
bbar: pagingBar,
autoExpandColumn: 'substrates_name',
view: new Ext.grid.GroupingView( {
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items": "Item"]})'
}),
region: 'center',
layout: 'fit',
stripeRows: true,
loadMask: true,
plugins: filters,
autoResize: true,
autoScroll: true,
clicksToEdit: 1,
columnLines: true,
//plugins: [Ext.ux.grid.DataDrop],
bodyCfg: {
cls: 'x-panel-body x-panel-body-with-bbar'
}
});
Passport.Substrate = Ext.data.Record.create( [
{ name: 'substrate_id', type: 'int', allowBlank :false},
{ name: 'substrate_name', type: 'string', allowBlank :false},
{ name: 'comments', type: 'string' },
{ name: 'version', type: 'int' },
{ name: 'history', type: 'string' }
]);
var cmSubstrates = new Ext.grid.ColumnModel( [
{
header: 'Id',
width: 35,
fixed:true,
align: 'center',
menuDisabled:true,
sortable: true,
groupable: false,
editable: false,
id: 'numberID',
dataIndex: 'substrate_id',
editor: new Ext.form.NumberField( {
allowNegative: false,
allowBlank: false,
lazyRender: true
})
}, {
header: "Substrate Name",
sortable: false,
groupable: false,
width: 300,
id: 'substrates_name',
dataIndex: 'substrate_name',
editor: new Ext.form.TextField( {
allowBlank: false,
lazyRender: true
})
}, {
header: "Version",
sortable: false,
groupable: false,
menuDisabled:true,
editable: false,
width: 50,
fixed:true,
align: 'center',
id: 'substrates_version',
dataIndex: 'version'
}, {
header: "Comments",
sortable: false,
groupable: false,
width: 460,
id: 'substrates_comments',
dataIndex: 'comments',
editor: new Ext.form.HtmlEditor( {
height: 250,
enableFonts: true,
enableLists: false,
enableLinks: true,
enableAlignments: true,
enableColors: true,
allowBlank: true,
lazyRender: true
})
}
]);
Passport.spreadsheet_store = new Ext.data.GroupingStore( {
storeId: 'Passport.spreadsheet_store',
remoteGroup: true,
reader: new Ext.data.JsonReader( {
root: 'results',
idProperty: 'substrate_id',
totalProperty: 'number_records'
}, Passport.Substrate),
proxy: new Ext.data.HttpProxy({url:'php/jsoner/substrates.php'})
});
// save function, called from button in toolbar
function saveSubstrates() {
var modifiedRecords = Passport.spreadsheet_store.getModifiedRecords();
for (var n = 0;n < modifiedRecords.length;n++) {
//Ajax call for each modifiedRecords[n]
}
}
Thanks :)
Set it to break on all errors, then see what it's doing there.Quote:
Originally Posted by Thomas Triplet
Hi guys,
I am seeing some strange behavious with the plugin (which is great by the way)
If I combine it with row editor, once I open up the editor I am unable to select another cell and the caret seems to dissapear to the top cornet of the grid.
So to reproduce this is what I am doing
- Double Click on cell to open Editor
- Cell is selected for edit as expected
- Move to different cell in the row and selection/focus does not respond
- I notice a sliglitly visible caret at the top left corner of the grid
- I am now unable to select any cell anymore... :(
Removing the DragDrop plugin will make IE behave as expected with RowEditor
This is only happening in IE, Firfox behaves as expected with BOTH PLUGINS and the ability to move between cells when the RowEdit is opened.
Any clues why this is happening? Is it the big layer in drag drop taht makes IE mess up?
Let me know
I suspect some work will have to be done to hide the masking div on edit start and show it again on edit end.
does DragDrop have access to the grid itself to check this? Was wondering how difficult it is to patch... but only IE has this, Firefox behaves...
I have noticed a bug with this plugin!
When the textarea is generate on top of the grid, it actually covers and disables the scroll bars...
I have added the size of the scroll bar to the resize function; which fixes it fixes it. ~o)
Code:Ext.ns('Ext.ux.grid');
/**
* @author Shea Frederick - http://www.vinylfox.com
* @contributor Nigel (Animal) White, Andrea Giammarchi & Florian Cargoet
* @class Ext.ux.grid.DataDrop
* @singleton
* <p>A plugin that allows data to be dragged into a grid from spreadsheet applications (tabular data).</p>
* <p>Requires the Override.js file which adds mouse event forwarding capability to ExtJS</p>
* <p>Sample Usage</p>
* <pre><code>
{
xtype: 'grid',
...,
plugins: [Ext.ux.grid.DataDrop],
...
}
* </code></pre>
*/
Ext.ux.grid.DataDrop = (function () {
var lineEndRE = /\r\n|\r|\n/,
sepRe = /\s*\t\s*/;
// After the GridView has been rendered, insert a static transparent textarea over it.
function onViewRender() {
var v = this.view;
if (v.mainBody) {
this.textEl = Ext.DomHelper.insertAfter(v.scroller, {
tag: 'textarea',
id: Ext.id(),
value: '',
style: {
'font-size': '1px',
border: '0px none',
overflow: 'hidden',
color: '#fff',
position: 'absolute',
top: v.mainHd.getHeight() + 'px',
left: '0px',
'background-color': '#fff',
margin: 0,
cursor: 'default'
}
},
true);
this.textEl.setOpacity(0.1);
this.textEl.forwardMouseEvents();
this.textEl.on({
mouseover: function () {
Ext.TaskMgr.start(this.changeValueTask);
},
mouseout: function () {
Ext.TaskMgr.stop(this.changeValueTask);
},
scope: this
});
resizeDropArea.call(this);
}
}
// on GridPanel resize, keep scroller height correct to accomodate textarea.
function resizeDropArea() {
if (this.textEl) {
var v = this.view,
sc = v.scroller,
scs = sc.getSize,
s = {
width: sc.dom.clientWidth - v.getScrollOffset() + 2 || (scs.width - v.getScrollOffset() + 2),
height: sc.dom.clientHeight - v.getScrollOffset() + 2 || scs.height
};
this.textEl.setSize(s);
}
}
// on change of data in textarea, create a Record from the tab-delimited contents.
function dataDropped(e, el) {
var nv = el.value;
el.blur();
if (nv !== '') {
var store = this.getStore(),
Record = store.recordType;
el.value = '';
var rows = nv.split(lineEndRE),
cols = this.getColumnModel().getColumnsBy(function (c) {
return !c.hidden;
}),
fields = Record.prototype.fields;
if (cols.length && rows.length) {
for (var i = 0; i < rows.length; i++) {
var vals = rows[i].split(sepRe),
data = {};
if (vals.join('').replace(' ', '') !== '') {
for (var k = 0; k < vals.length && k < fields.keys.length; k++) {
// var fldName = cols[k].dataIndex;
// Change sfunction to support ALL columns rather then just visible ones
var fldName = fields.keys[k];
var fld = fields.item(fldName);
data[fldName] = fld ? fld.convert(vals[k]) : vals[k];
}
var newRec = new Record(data);
newRec.markDirty();
store.add(newRec);
var idx = store.indexOf(newRec);
this.view.focusRow(idx);
Ext.get(this.view.getRow(idx)).highlight();
}
}
resizeDropArea.call(this);
}
}
}
return {
init: function (cmp) {
Ext.apply(cmp, {
changeValueTask: {
run: function () {
dataDropped.call(this, null, this.textEl.dom);
},
interval: 100,
scope: cmp
},
onResize: cmp.onResize.createSequence(resizeDropArea)
});
cmp.getView().afterRender = cmp.getView().afterRender.createSequence(onViewRender, cmp);
}
};
})();
its really great job =D>
Hi Guys
I m trying to forward also the contextmenu event to my underlying grid.
So i have added the event in Animal's override :
So the event gets forwarded, but it also triggers the browser context menu to be displayed.Code:forwardMouseEvents: function(evt) {
var me = this,
xy, t, lastT,
evts = [ 'mousemove', 'mousedown', 'mouseup', 'dblclick', 'mousewheel','contextmenu' ];
Anybody know how to prevent that?
Cheers
You have to stop the event (underlying method on the browser event is "preventDefault").