PDA

View Full Version : How I can add conbobox in row editor grid ?



chid007
4 Jul 2010, 8:09 AM
function GetWorkflowList() {
var cbData = $.ajax({
type: "POST",
url: '<%= Url.Action("GetWorkFlowsList","Workflow") %>',
dataType: "json",
success: function(workflowlist) {
return workflowlist;

},
error: function(req, status, error) {
alert("Connect Server Is Problem:");
}
});
var workflow = Ext.data.Record.create(
[
{ name: 'WorkflowId', type: 'int' },
{ name: 'WorkflowName', type: 'string' }

]
);

var workflowstore = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({ fields: workflow }),
data: cbData,
sortInfo: { field: 'WorkflowId', direction: 'ASC' }
});
var wfCb = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: workflowstore,
displayField: 'WorkflowName',
valueField: 'WorkflowId'
});





$.ajax({
type: "POST",
url: '<%= Url.Action("GetOwnerGroupList","Workflow") %>',
dataType: "json",
success: function(result) {
var wptUsers = Ext.data.Record.create(
[
{ name: 'WFOwnerGroupId', type: 'int' },
{ name: 'WorkflowId', type: 'int' },
{ name: 'OwnerGroupName', type: 'string' },
{ name: 'DefaultUserAccountId', type: 'string' },
{ name: 'IsDefaultSameAsLast', type: 'bool' },
{ name: 'Description', type: 'string' }
]
);

var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({ fields: wptUsers }),
data: result,
sortInfo: { field: 'WFOwnerGroupId', direction: 'ASC' }
});
var editor = new Ext.ux.grid.RowEditor({
floating: true,
shadow: false,
monitorValid: true,
focusDelay: 250,
errorSummary: false,
saveText: 'Save',
cancelText: 'Cancel',
commitChangesText: 'You need to commit or cancel your changes',
errorText: 'Errors',
defaults: {
normalWidth: true
}
});


var grid = new Ext.grid.GridPanel({
store: store,
width: "100%",
height: 485,
region: 'center',
margins: '0 5 5 5',

//autoExpandColumn: 'name',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: 'Add User',
handler: function() {
var e = new wptUsers({
ownerGroupName: 'OwnerGroupName',
workflowId: 'WorkflowId',
defaultUserAccountId: 'DefaultUserAccountId',
isDefaultSameAsLast: 'IsDefaultSameAsLast',
description: 'Description'
});
editor.stopEditing();
store.insert(0, e);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
editor.startEditing(0);

}
}, {
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove User',
disabled: true,
handler: function() {
editor.stopEditing();
var selectedItem = grid.getSelectionModel().getSelected();
if (confirm("confirm delete?") == true) {
$.ajax({
type: "POST",
url: '<%= Url.Action("DeleteItems","Item") %>',
data: "user_id=" + selectedItem.get('user_id'),
dataType: "json",
success: function(result) {
alert(result[0].AlertMessage);
},
error: function(req, status, error) {
alert("Connect Server Is Problem:");
}
});
var s = grid.getSelectionModel().getSelections();
for (var i = 0, r; r = s[i]; i++) {
store.remove(r);

}
}

}
}],

columns: [
new Ext.grid.RowNumberer(),
{
header: 'OwnerGroupName',
dataIndex: 'OwnerGroupName',
width: 150,
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'WorkflowId',
dataIndex: 'WorkflowId',
width: 100,
sortable: false,
editor: new Ext.grid.GridEditor(wfCb),
renderer: function(value, p, record) {
return record.data['WorkflowName'];
}

}, {
header: 'DefaultUserAccountId',
dataIndex: 'DefaultUserAccountId',
width: 100,
sortable: false,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
xtype: 'booleancolumn',
header: 'Active',
dataIndex: 'IsDefaultSameAsLast',
align: 'center',
width: 50,
trueText: 'Yes',
falseText: 'No',
editor: {
xtype: 'checkbox'
}
}, {
header: 'Description',
dataIndex: 'Description',
width: 510,
sortable: false,
editor: {
xtype: 'textfield',
allowBlank: false
}
}]
});

editor.on({
scope: this,
afteredit: function(roweditor, changes, record, rowIndex) {
if (record.get('user_id') != null) {
$.ajax({
type: "POST",
url: '<%= Url.Action("editItem","Item") %>',
data: "user_id=" + record.get('user_id') +
"&name=" + record.get('name') +
"&sname=" + record.get('sname'),
dataType: "json",
success: function(result) {
// alert(result[0].AlertMessage);
},
error: function(req, status, error) {
alert("Connect Server Is Problem:");
}
});
} else {
$.ajax({
type: "POST",
url: '<%= Url.Action("AddItems","Item") %>',
data: "name=" + record.get('name') +
"&sname=" + record.get('sname'),
dataType: "json",
success: function(result) {
// alert(result[0].AlertMessage);
},
error: function(req, status, error) {
alert("Connect Server Is Problem:");
}
});

}
}
});


var layout = new Ext.Panel({
title: 'ownergroup Management',
layoutConfig: {
columns: 1
},
width: "100%",
height: 485,
items: [grid]
});
layout.render(ownergroup);

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



},
error: function(req, status, error) {
alert("Connect Server Is Problem:");
}
});
}

Ext.onReady(function() {
GetWorkflowList();

});

5 Jul 2010, 7:51 AM
PLEASE use [ code ] tags when posting code! I've modified your post accordingly.

5 Jul 2010, 7:52 AM
To answer your question, set the combo as an editor for a column.