PDA

View Full Version : Combobox in Grid not working



qnavry
23 Jun 2011, 6:26 AM
When I try to add a row to to the grid I have values in the combo boxes, but it only lets me select the first item. Then it does not even show that once the edit is complete. The field is just blank. Any Ideas? here is the code.




Ext.onReady(function () {
var Step = Ext.data.Record.create([
{
name: 'Id',
type: 'string'
}, {
name: 'Step',
type: 'string'
}, {
name: 'Status',
type: 'string'
}, {
name: 'DueDate',
type: 'string'
}, {
name: 'AssignedTo',
type: 'string'
}
]);

var User = Ext.data.Record.create([
{
name: 'Id',
type: 'string'
}, {
name: 'UserName',
type: 'string'
}, {
name: 'UserId',
type: 'string'
}
]);
var Status = Ext.data.Record.create([
{
name: 'Id',
type: 'string'
}, {
name: 'StatusName',
type: 'string'
}, {
name: 'StatusId',
type: 'string'
}
]);


var writer = new Ext.data.JsonWriter({
encode: false,
listful: true,
writeAllFields: true
});

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

var proxy = new Ext.data.HttpProxy({
api: {
read: '/Manage/Load',
create: '/Manage/Create',
update: '/Manage/Update',
destroy: '/Manage/Delete'
},
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
});

var store = new Ext.data.Store({
id: 'step',
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.
});

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 userreader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'Id',
root: 'users',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, User);
var usersproxy = new Ext.data.HttpProxy({
api: {
read: '/Manage/GetAllUsers'

},
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
});

var usersstore = new Ext.data.Store({
id: 'user',
proxy: usersproxy,
reader: userreader,
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.
});

usersstore.load();
// create reusable renderer

// create the combo instance
var usercombo = new Ext.form.ComboBox({
typeAhead: true,
editable: false,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: usersstore,
valueField: 'UserID',
displayField: 'UserName',
id: 'cboUser'

});

var statusreader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'Id',
root: 'statuses',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, Status);
var statusproxy = new Ext.data.HttpProxy({
api: {
read: '/IdeaManager/GetAllStatuses'

},
headers: { 'Content-Type': 'application/json; charset=UTF-8' }
});

var statusstore = new Ext.data.Store({
id: 'status',
proxy: statusproxy,
reader: statusreader,
fields: ['StatusName', 'StatusID'],
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.
});

statusstore.load();


// create the combo instance
var statuscombo = new Ext.form.ComboBox({
typeAhead: true,
editable: false,
triggerAction: 'all',
lazyRender: false,
mode: 'local',
store: statusstore,
valueField: 'StatusID',
displayField: 'StatusName',
id: 'cboStatus',
listeners: {
change: {
fn: function (combo, newValue, oldValue) {
Ext.getDom('TagTwoId').value = newValue;
}
}
}

});

// create reusable renderer for ComboBox
Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField || combo.displayField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: "Step(s)",
width: 170,
sortable: true,
dataIndex: 'Step',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{ header: "Status",

width: 160,
sortable: true,
dataIndex: 'StatusName',
editor: statuscombo,// specify reference to combo instance
renderer: Ext.util.Format.comboRenderer(statuscombo) // pass combo instance to reusable renderer



}, {
xtype: 'datecolumn',
header: 'Due Date',
dataIndex: 'DueDate',
format: 'm/d/Y',
width: 100,
sortable: true,
groupRenderer: Ext.util.Format.dateRenderer('M y'),
editor: {
xtype: 'datefield',
allowBlank: false,
minValue: '01/01/2006',
minText: 'Can\'t have a start date before the company existed!',
maxValue: (new Date()).format('m/d/Y')
}
},
{
header: "Assigned To",
width: 170,
sortable: true,
dataIndex: 'AssignedTo',
editor: usercombo,
renderer: Ext.util.Format.comboRenderer(usercombo)

}
],
plugins: [editor],
title: 'NextSteps',
height: 300,
width: 510,
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Step',
handler: function () {
var e = new Step({
Step: '',
Status: '',
DueDate: '',
AssignedTo: ''
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
}, {
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Step',
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();
}
}]
});

grid.getSelectionModel().on('selectionchange', function (sm) {
grid.removeBtn.setDisabled(sm.getCount() < 1);
});

grid.render('crud-grid');

}); // end of onReady

skirtle
24 Jun 2011, 3:25 AM
That's far too much code for a help request. Try cutting it down to a minimal test case that exhibits the problem.