PDA

View Full Version : Ext4.1 Ext.grid.plugin.RowEditing the combo value is [object Object]



caodegao
10 Jul 2012, 9:51 PM
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>????</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<link rel="stylesheet" href="extjs/resources/css/ext-all.css" type="text/css"></link>
<link rel="stylesheet" href="extjs/examples/shared/example.css" type="text/css"></link>

<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/examples/shared/examples.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.define("Everts",{
extend:"Ext.data.Model",
fields:[
{name:"id"},
{name:"calendar"},
{name:"title"},
{name:"start", type:"date", dateFormat:"Y-m-dTH:i:s"} ,
{name:"end", type:"date", dateFormat:"Y-m-dTH:i:s"} ,
{name:"loc"},
{name:"notes"},
{name:"url"},
{name:"ad", type: 'bool'},
{name:"rem"},
{name:"n", type: 'bool'}
]
});

Ext.define("Calendar",{
extend:"Ext.data.Model",
fields:[
{name:"id"},
{name:"title"}
]
});

Ext.create('Ext.data.Store', {
model : 'Everts',
storeId:'evertsStore',
fields: ['id', 'calendar','title', 'start','end', 'loc','notes', 'url','ad', 'rem', 'n'],
proxy: {
type: 'ajax',
url: 'findEverts.action',
reader: {
type: 'json',
root: 'everts'
}
},
//??????format
getGroupString: function(instance) {
var group = this.groupers.first();
if (group) {
if (group.property === 'start') {
return Ext.Date.format(new Date(instance.get('start')), 'Y-m-d');
}
return instance.get(group.property);
}
return '';
},
sorters: {property: 'title', direction: 'ASC'},
groupField: 'start',//????
autoLoad: true
});

Ext.create('Ext.data.Store', {
model : 'Calendar',
storeId:'calendarsStore',
proxy: {
type: 'ajax',
url: 'findCalendars.action',
reader: {
type: 'json',
root: 'calendars'
}
},
autoLoad: true
});

Ext.data.StoreManager.lookup('calendarsStore').on('load', function(t, records, successful, operation, eOpts) {
if(records.length > 0){
Ext.getCmp('comboCS').setValue(records[0]);
}
});

//???
var rowEditing= Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
layout:'fit',
store: Ext.data.StoreManager.lookup('evertsStore'),
selModel : Ext.create('Ext.selection.CheckboxModel', {}),
columns: [
{ header: 'id', dataIndex: 'id', hidden: true},
{
header: 'calendar',
dataIndex: 'calendar',
renderer: function(value){
if(value != null){
return value.title;
}
},
width: 120,
editor: {
xtype: 'combo',
id: 'combogroup',
queryMode: 'local',
store: Ext.data.StoreManager.lookup('calendarsStore'),
displayField: 'title',
valueField: 'id',
triggerAction: 'all',
editable: false,
allowBlank: false
},
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' ?';
}
},
{
header: 'title', dataIndex: 'title',
editor: {
xtype: 'textfield'
},
flex: 1
},
{
xtype:'datecolumn' ,header: 'end', dataIndex: 'end', format: 'Y-m-d',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d'
}
},
{ header: 'loc',dataIndex: 'loc',
editor: {
xtype: 'textfield'
}
},
{ header: 'notes', dataIndex: 'notes', editor: {
xtype: 'textfield'
}
},
{ header: 'url', dataIndex: 'url', editor: {
xtype: 'textfield'
}
},
{
header: 'ad',
dataIndex: 'ad',
renderer: function(value){
if (value) {
return '?';
}else{
return '';
}
},
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
},
//{ header: 'rem', dataIndex: 'rem' },
{
header: 'n',
dataIndex: 'n',
renderer: function(value){
if (value) {
return '?';
}else{
return '';
}
},
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}

],
tbar: [{
xtype: 'combo',
queryMode: 'local',
id: 'comboCS',
store: Ext.data.StoreManager.lookup('calendarsStore'),
displayField: 'title',
valueField: 'id',
triggerAction: 'all',
editable: false
},{
text: '??',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();
// ?????
var r = Ext.create('Everts', {
//'id', 'calendar','title', 'start','end', 'loc','notes', 'url','ad', 'rem', 'n'
calendar: Ext.data.StoreManager.lookup('calendarsStore').getAt(0),
title: 'new',
start: new Date(),
end: new Date()
});
//?????
Ext.data.StoreManager.lookup('evertsStore').insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: '??',
iconCls: 'employee-remove',
handler: function() {
var records = grid.getSelectionModel().getSelection();
if(records.length != 1){
Ext.example.msg('??', '???????!');
return;
}
var params = {
'id': records[0].data.id
};
var url = "deleteEvert.action";
var succFn = function(){
e.record.commit();
Ext.data.StoreManager.lookup('evertsStore').load();
};
var failMsg = "??";
//????????,??????
Ext.MessageBox.show({
title:'??',
msg: '??????????',
buttons: Ext.MessageBox.YESNO,
fn: actionFn(params,url,succFn,msg),
icon: Ext.MessageBox.QUESTION
});
},
disabled: true
}],
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
enableGroupingMenu: false
}],
plugins: [rowEditing] ,
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeEmployee').setDisabled(!records.length);
}
},
renderTo: 'editor-grid'
});

//??????
grid.on('edit', function(editor, e) {
var params = {
'evert.id': e.record.data.id,
'evert.calendar.id': e.record.data.calendar,
'evert.title': e.record.data.title,
'evert.start': e.record.data.start,
'evert.end' : e.record.data.end,
'evert.loc' : e.record.data.loc,
'evert.notes' : e.record.data.notes,
'evert.url' : e.record.data.url,
'evert.ad' : e.record.data.ad,
//'evert.rem' : e.record.data.rem,
'evert.n' : e.record.data.n
};
var url = "saveEvert.action";
var succFn = function(){
e.record.commit();
Ext.data.StoreManager.lookup('evertsStore').load();
};
var failMsg = "??";

actionFn(params,url,succFn,failMsg);
});

/**
????action??;
params: ??,
url: ??,
succFn: ????????,
failMsg: ????.
*/
function actionFn(params,url,succFn,failMsg){
Ext.Ajax.request({
params: params,
url: url,
success: function(response) {
var resp = Ext.JSON.decode(response.responseText);
if (resp.status == "ok") {
succFn();
} else {
Ext.MessageBox.alert(msg+'??', resp.status);
}
}
});
}

});
</script>
<style type="text/css">
.employee-add {
background-image: url('extjs/examples/shared/icons/fam/user_add.gif') !important;
}


.employee-remove {
background-image: url('extjs/examples/shared/icons/fam/user_delete.gif') !important;
}
.task .x-grid-cell-inner {
padding-left: 15px;
}
.x-grid-row-summary {
color:#333;
background: #f1f2f4;
}
.x-grid-row-summary .x-grid-cell-inner {
font-weight: bold;
font-size: 11px;
padding-bottom: 4px;
}
.x-grid-hide-summary .x-grid-row-summary {
display:none;
}
.x-grid-row .x-grid-cell-cost {
background-color:#f1f2f4;
}
.x-grid-row-summary .x-grid-cell-cost {
background-color:#e1e2e4;
}
</style>
</head>

<body>
<div id="editor-grid"></div>
</body>
</html>





37038

look this image : combo value is [object Object].

mitchellsimoens
11 Jul 2012, 6:25 AM
Can I get a locally runnable test case and also what minor version.. 4.1.0, 4.1.1?

caodegao
11 Jul 2012, 5:07 PM
version 4.0 is right,and the top code i pasted is the version 4.1.* . I used another methor coding 4.1,and find that row edit is OK ,but drop down list go wrong again

I tried this scheme.
Ext.override(Ext.form.field.ComboBox, {
findRecord: function(field, value) {
var ds = this.store,
idx = ds.findExact(field, value[field]);
return idx !== -1 ? ds.getAt(idx) : false;
}
});
but -->.
tbar: [{xtype: 'combo' ...]}.
this view is valueField.
37089



thank you!

Romick
12 Jul 2012, 2:51 AM
Problem is in combobox:
In ExtJS 4.0.7 we can set combobox value by valueField, displayField or an object.
In ExtJS 4.1.0 - only by valueField or displayField.
Is it the issue?
http://www.sencha.com/forum/showthread.php?220347-Editable-combobox-in-treepanel-shows-Object-object-in-edit-mode.

caodegao
13 Jul 2012, 12:01 AM
I tried this scheme, The 4.0.7 version of the setValue method to cover version 4.1 .



Ext.override(Ext.form.field.ComboBox, {
setValue: function(value, doSelect) {
var me = this,
valueNotFoundText = me.valueNotFoundText,
inputEl = me.inputEl,
i, len, record,
models = [],
displayTplData = [],
processedValue = [];

if (me.store.loading) {
// Called while the Store is loading. Ensure it is processed by the onLoad method.
me.value = value;
me.setHiddenValue(me.value);
return me;
}

// This method processes multi-values, so ensure value is an array.
value = Ext.Array.from(value);

// Loop through values
for (i = 0, len = value.length; i < len; i++) {
record = value[i];
if (!record || !record.isModel) {
record = me.findRecordByValue(record);
}
// record found, select it.
if (record) {
models.push(record);
displayTplData.push(record.data);
processedValue.push(record.get(me.valueField));
}
// record was not found, this could happen because
// store is not loaded or they set a value not in the store
else {
// If we are allowing insertion of values not represented in the Store, then set the value, and the display value
if (!me.forceSelection) {
displayTplData.push(value[i]);
processedValue.push(value[i]);
}
// Else, if valueNotFoundText is defined, display it, otherwise display nothing for this value
else if (Ext.isDefined(valueNotFoundText)) {
displayTplData.push(valueNotFoundText);
}
}
}

// Set the value of this field. If we are multiselecting, then that is an array.
me.setHiddenValue(processedValue);
me.value = me.multiSelect ? processedValue : processedValue[0];
if (!Ext.isDefined(me.value)) {
me.value = null;
}
me.displayTplData = displayTplData; //store for getDisplayValue method
me.lastSelection = me.valueModels = models;

if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
inputEl.removeCls(me.emptyCls);
}

// Calculate raw value from the collection of Model data
me.setRawValue(me.getDisplayValue());
me.checkChange();

if (doSelect !== false) {
me.syncSelection();
}
me.applyEmptyText();

return me;
}
});


37132