PDA

View Full Version : Combo Box in a Grid Panel



grahamarends
30 Dec 2010, 11:46 AM
Hello!

I am very new to ext.js. I need a ComboBox for a the Column "Team Name", mainly for data validator purposes so that SQL errors are not thrown right and left. I have looked online for hours trying to figure this out, but I could only find examples using the EditorGridPanel.

Any advice or direction is greatly appreciated. Below is the Javascript.



Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = '/extjs-crud-grid/ext-3.2.1/resources/images/default/s.gif';

var StaffUserRow = Ext.data.Record.create([
{name: 'staffuser_id'},
{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'username',
type: 'string'
}, {
name: 'team_name',
type: 'string'
}]);

var proxy = new Ext.data.HttpProxy({
api: {
read : 'staffuser/view.action',
create : 'staffuser/create.action',
update: 'staffuser/update.action',
destroy: 'staffuser/delete.action'
}
});

var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'staffuser_id',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
},
StaffUserRow);

// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true
});

// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
id: 'user',
proxy: proxy,
reader: reader,
writer: writer, // <-- plug a DataWriter into the store just as you would a Reader
autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
});

//read the data from simple array
store.load();

Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
Ext.Msg.show({
title: 'ERROR',
msg: res.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
});


var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});


// create grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "FIRSTNAME",
width: 170,
sortable: true,
dataIndex: 'firstname',
editor: {
xtype: 'textfield',
allowBlank: false
}},
{header: "LASTNAME",
width: 160,
sortable: true,
dataIndex: 'lastname',
editor: {
xtype: 'textfield',
allowBlank: false
}},
{header: "EMAIL",
width: 160,
sortable: true,
dataIndex: 'email',
editor: {
xtype: 'textfield',
allowBlank: false
}},
{header: "TEAM NAME",
width: 160,
sortable: true,
dataIndex: 'team_name',
editor: {
xtype: 'textfield',
allowBlank: false
}}
],
viewConfig:{forcefit:true},
plugins: [editor],
title: 'Staff Users',
height: 300,
width:835,
frame:true,
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Staff User',
handler: function(){
var e = new Contact({
firstname: 'first',
lastname: 'last',
email: '[email protected]',
username: 'new user',
team_teamname: 'new team'
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
},{
iconCls: 'icon-user-delete',
text: 'Remove Contact',
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
},{
iconCls: 'icon-user-save',
text: 'Save All Modifications',
handler: function(){
store.save();
}
}]
});

//render to DIV
grid.render('staffuser-grid');
});

Markj
4 Jan 2011, 12:36 PM
http://dev.sencha.com/deploy/dev/examples/grid/edit-grid.html

check out the Light column, maybe you can find some help there ;)

vishalnnsingh
4 Jan 2011, 8:48 PM
Grid Panel cannot have a combo box. You got to use EditorGridPanel for this purpose.