grid

[hacpro]

hello.. i tried some with the grid.. but know i got a little problem.. got a button witch wont listen to my event.. the button is in the grid.. and should open a browse window...



Ext.onReady(function(){

function browseFiles(id) {
var obj = frames['iframe'+id].document.getElementById('pfad'+id);
var id = id;
obj.onchange = function () {
grid.getDataSource().getById(id).set('pfad',this.value);
}
obj.click();
}

function rightScroll(id) {
var wrapper = Ext.get('browseBtnWrapper'+id);
wrapper.dom.scrollLeft = 1000;
}

// shorthand alias
var fm = Ext.form, Ed = Ext.grid.GridEditor;

var cm = new Ext.grid.ColumnModel([
{
header: "Icon",
dataIndex: "icon",
width: 50

},

{
header: "Name",
dataIndex: 'name',
width: 300,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},

{
header: "Pfad",
dataIndex: 'pfad',
width: 300,
editor: new Ed(new Ext.form.TextField({
allowBlank: false
}))
},


{
header:"BrowseButton",
dataIndex: 'upload',
sortable: true,
renderer: function(v,md,record) {
if (!Ext.isGecko) {
// Do IE6+, Safari, etc
return '<input type=button onClick="browseFiles('+record.id+')" value="Browse..">';
} else {
// Do FireFox
rightScroll.defer(500,null,[record.id]);
return '<div style="position: relative;"><div style="width:81px;overflow:hidden;" id="browseBtnWrapper'+record.id+'"><input type="file" onChange="grid.getDataSource().getById('+record.id+').set(\'filename\',this.value);" style="position: relative; text-align: left; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity:0; z-index: 99991;"><div style="position: absolute; top: 0px; left: 0px; z-index: 99990;"><img src="browse.gif"></div></div></div>';
}
}

}

]);



// by default columns are sortable
cm.defaultSortable = true;


var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'name', type: 'string'},
{name: 'pfad', type: 'string'},
{name: 'upload'}
//{name: 'price', type: 'float'}

]);


// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url:'plants.xml'})

});





// create the editor grid
var grid = new Ext.grid.EditorGrid('editor-grid', {
ds: ds,
cm: cm,
enableColLock:true
});

var layout = Ext.BorderLayout.create({
//Hier wird die Positon des Grids festgelegt
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');


// render it
grid.render();

// trigger the data store load
ds.load();

ds.add([
new Ext.data.Record({name: 'Field 1 Data, Row 1', pfad: 'Field 2 Data, Row 1', upload: ''}),
new Ext.data.Record({name: 'Field 1 Data, Row 2', pfad: 'Field 2 Data, Row 2', upload: ''}),
new Ext.data.Record({name: 'Field 1 Data, Row 3', pfad: 'Field 2 Data, Row 3', upload: ''})
]);
});




anyway thx for reading...

[fay]

Clicking on the "BrowseButton" field certainly works for me in FireFox, though there are other issues with your code:



You are not providing a reader in your data store. See: http://extjs.com/deploy/ext/docs/output/Ext.data.Store.html#config-reader

Your PLANT record makes no metion of 'icon' which is referred to in your ColumnModel; or 'filename' which is referred to in getById.

Add the additional records after your data store has loaded. See: http://extjs.com/deploy/ext/docs/output/Ext.data.Store.html#event-load

You've obviously changed the contents of PLANT.XML - when providing example code it's quicker if folks don't have to guess (and then re-engineer) what your underlying data is!

Not too sure how you expect the onChange event handler to know about your grid.

The following code (bearing in mind the points above) might get you started:


<script>
var UploadGrid = function(){
var ds, grid;

function browseFiles(id)
{
var obj = frames['iframe'+id].document.getElementById('pfad'+id);
var id = id;
obj.onchange = function () {
ds.getById(id).set('pfad',this.value);
}
obj.click();
};

function rightScroll(id)
{
var wrapper = Ext.get('browseBtnWrapper'+id);
wrapper.dom.scrollLeft = 1000;
};

return{
init : function(){

var fm = Ext.form, Ed = Ext.grid.GridEditor;

var cm = new Ext.grid.ColumnModel([
{header: "Icon", dataIndex: "icon", width: 50},
{header: "Name", dataIndex: 'name', width: 300, editor: new Ed(new fm.TextField({ allowBlank: false}))},
{header: "Pfad", dataIndex: 'pfad', width: 300, editor: new Ed(new Ext.form.TextField({ allowBlank: false }))},
{header:"BrowseButton", dataIndex: 'upload', sortable: true,
renderer: function(v,md,record)
{
if (!Ext.isGecko) // Do IE6+, Safari, etc
{
return '<input type=button onClick="browseFiles('+record.id+')" value="Browse..">';
} else
{
// Do FireFox
rightScroll.defer(500,null,[record.id]);
return '<div style="position: relative;"><div style="width:81px;overflow:hidden;" id="browseBtnWrapper'+record.id+'"><input type="file" onChange="javascript:UploadGrid.updateRecord('+ record.id +', this.value);" style="position: relative; text-align: left; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity:0; z-index: 99991;"><div style="position: absolute; top: 0px; left: 0px; z-index: 99990;"><img src="browse.gif"></div></div></div>';
}
}
}
]);

cm.defaultSortable = true;

var Plant = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'pfad', type: 'string'},
{name: 'upload'}
]);

ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'plants.xml'}),
reader: new Ext.data.XmlReader({record: 'plant'}, Plant)
});

grid = new Ext.grid.EditorGrid('editor-grid', {ds: ds, cm: cm, enableColLock:true });

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');

grid.render();

ds.on('load', function(){
ds.add([
new Ext.data.Record({name: 'Field 1 Data, Row 1', pfad: 'Field 2 Data, Row 1', upload: ''}),
new Ext.data.Record({name: 'Field 1 Data, Row 2', pfad: 'Field 2 Data, Row 2', upload: ''}),
new Ext.data.Record({name: 'Field 1 Data, Row 3', pfad: 'Field 2 Data, Row 3', upload: ''})
]);
});

ds.load();
},

updateRecord: function(id, filename)
{
ds.getById(id).set('filename', filename);
}
}
}();
Ext.onReady(UploadGrid.init, UploadGrid);
</script>


<body>
<div id="grid-panel" style="width:600px;height:300px;">
<div id="editor-grid"></div>
</body>
</html>

[hacpro]

thx for the fast answer..