PDA

View Full Version : grid with editor that opens dialog :-)



tab
29 Mar 2007, 1:01 PM
I would like to have a column in my grid table that can be edited with a modal dialog box (wouldn't we all?) I tried to search for something close to this, an example or an idea how to get started. Any suggestions?

Ext is great! I'm using the tree and the grid and they are very good. Thanks again!

JeffHowden
29 Mar 2007, 1:22 PM
I would like to have a column in my grid table that can be edited with a modal dialog box (wouldn't we all?) I tried to search for something close to this, an example or an idea how to get started. Any suggestions?

The solution (and its complexity) will depend on whether or not you're using a regular grid or an editable grid. Assuming it's a regular grid though, you can start by listening for the cellclick event and opening your edit dialog if it's a cell from the proper column.

http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/#output/Ext.grid.Grid.html

tab
29 Mar 2007, 1:29 PM
Thanks for the quick help. I'm using an editable grid, other columns use text or drop downlists. I guess that makes it more complex?

A little back ground, when someone wants to edit this field it may require a new record to be created in another dataset- that is what the dialog is used for. So for example if you want to select from a drop down list "joe, fred, jane, new" then selecting new could open the dialog that would allow creating the new user and password. just a made up example but maybe it help.

JeffHowden
29 Mar 2007, 1:36 PM
Then, I suspect you'd listen for the onchange event of the select for that column. If the text of the selected option was "New..." (or the value was empty or something special), you could open a dialog with the relevant fields in a form that'd post back to the server using XHR and then could take the response from the server to populate the select for the edit with the new option's value and text.

tab
29 Mar 2007, 6:35 PM
A new issue as I'm trying to implement this. I'm trying to make one column of the grid a combo box that is loaded with JSON data. I don't understand what I need to do to get the data into the combo box as the grid is created. I took the edit-grid example as a base and then
- create a datastore


// create the Data Store
var dscombo = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'data?cmd=getCombo'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.JsonReader({
root: 'items',
totalProperty: 'totalCount',
id: 'id'
}, [
{name: 'name'},
{name: 'id'}
]),

});


Then I use the data store (dscombo) in the column definition


},{
header: "Light",
dataIndex: 'name',
width: 130,
editor: new Ed(new Ext.form.ComboBox({
store: dscombo,
typeAhead: true,
triggerAction: 'all'
}))


And just to add to the fun, here is what is in the combo box if I click on it


<div class="x-grid-col-2 x-grid-cell-inner"><div class="x-grid-cell-text" unselectable="on"></div></div>


Nothing appears in the combo box. And my JSON backend code never gets called.

Do I need to call dscombo.load() or ....

Thank you

JeffHowden
29 Mar 2007, 6:40 PM
Do I need to call dscombo.load() or ....

That's a fine question. What happens when you do that? (Conversely, where is the data going to come from if you don't tell the store to load the data?) :twisted:

tab
29 Mar 2007, 8:12 PM
I did try calling dscombo.load() and nothing happened, but it is probably a tiny mistake somewhere getting all the pieces correctly arranged.

thanks again.

JeffHowden
30 Mar 2007, 12:38 AM
Did you try:


dscombo.load({
params: {
start: 0
, limit: 20
}
});

I'm not 100%, but I think it needs you to pass it an object literal that defines the start and limit for the request.