Help ,ComboBox in EditorGrid Selecting [Archive]

totodo

6 Apr 2007, 2:39 AM

Hi,:)
look at the pic.

my Code is :

var cutTask4AssignLine = function(){
this.grid={};
this.ds={};
return {
createGrid:function(){
var devDS = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '../cutTask.do?method=findCutDevice&rscSpecId=10301001'
}),
reader: new Ext.data.JsonReader({
root: 'devResult',
totalProperty: 'totalResults',
id: 'DEVICE_ID'
}, [
{name: 'deviceId', mapping: 'DEVICE_ID'},
{name: 'devCode', mapping: 'DEVICE_CODE'},
{name: 'deviceName', mapping: 'DEV_NAME'},
{name: 'area', mapping: 'AREA_NAME'}
])
});

// Custom rendering Template
var resultTpl = new Ext.Template(
'<div class="search-item">',
'<h3><span>{devCode}</span>-{deviceName}</h3>',
'{area}',
'</div>'
);

var taskId = $('taskOps').value;
var CutTask = Ext.data.Record.create([
{name:'taskId', mapping: 'TASK_ID'},
{name: 'taskAtomId', mapping: 'TASK_ATOM_ID'},
{name: 'cutAtomName', mapping: 'CUT_ATOM_NAME'},
{name: 'oldDevName', mapping: 'OLD_DEV_NAME'},
{name: 'oldDevId', mapping: 'OLD_DEV_ID'},
{name: 'oldPortStartValue', mapping: 'OLD_PORT_START_VALUE'},
{name: 'oldPortEndValue', mapping: 'OLD_PORT_END_VALUE'},
{name: 'portTypeName', mapping: 'PORT_TYPE_NAME'},
{name: 'cutObjName',mapping:'CUT_OBJ_NAME'},
{name: 'newDevId',mapping:'NEW_DEV_ID'},
{name: 'newPortStartValue',mapping:'NEW_PORT_START_VALUE',type:'string'},
{name: 'newPortEndValue',mapping:'NEW_PORT_END_VALUE',type:'string'},
{name: 'newDevName',mapping:'NEW_DEV_NAME'}
]);

Ext.QuickTips.init();
var fm = Ext.form, Ed = Ext.grid.GridEditor;

var reader = new Ext.data.JsonReader({
root: 'cutTasks',
totalProperty: 'totalCount',
id: 'TASK_ATOM_ID'
}, CutTask);

var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '../cutTask.do?method=findCut2AtomsByTask'
}),
reader: reader
});
this.ds=ds;

function renderCheckBox(id){
return String.format('<input type="checkbox" id={0}"></input>',id);
}

function renderTopicPlain(value){
return String.format('<b>{0}</b>', value);
}

var cm =new Ext.grid.ColumnModel([
{header: "选择", width: 30, dataIndex: 'taskAtomId',renderer: renderCheckBox},
{header: "割接特性", width: 80, dataIndex: 'cutAtomName',renderer: renderTopicPlain},
{header: "原设备", width: 120, dataIndex: 'oldDevName',renderer: renderTopicPlain},
{header: "原设备起始值", width: 100, dataIndex: 'oldPortStartValue'},
{header: "原设备终止值", width: 100, dataIndex: 'oldPortEndValue'},
{header: "原设备割接类型", width: 80, dataIndex: 'portTypeName'},
{header: "新设备", width: 120, dataIndex: 'newDevName',
editor: new Ed(new Ext.form.ComboBox({
id:'devInput',
store: devDS,
displayField:'devName',
typeAhead: false,
triggerAction: 'all',
loadingText: 'Searching...',
minListWidth : 250,
width: 400,
queryParam: 'query',
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
forceSelection:true,
onSelect: function(record){ // override default onSelect to do redirect
//选中回车
//alert(record.data.deviceId+','+record.id);
}
}))},
{header: "新设备起始值", width: 100, dataIndex: 'newPortStartValue',
editor: new Ed(new fm.TextField({
allowBlank: true
}))},
{header: "新设备起始值", width: 100, dataIndex: 'newPortEndValue',
editor: new Ed(new fm.TextField({
allowBlank: true
}))}
]);

cm.defaultSortable = true;

var grid = new Ext.grid.EditorGrid('cutTask-grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel(),
enableColLock:false
});
this.grid=grid;
grid.render();
grid.on('afteredit', this.afteredit, this, true);
grid.on('cellclick',this.launchDetail,this);
ds.load();
//ds.on("load",this.onEndUpdate);
//ds.on("beforeload",this.onBeginUpdate);

var gridFoot = grid.getView().getFooterPanel(true);
var toolBar = new Ext.Toolbar(gridFoot);
toolBar.addButton({
text:'按文件分配',
enableToggle:true,
id:'assignByFile',
toggleHandler:this.assignLineByFile.createDelegate(this)
});
toolBar.addButton({
text:'分配',
id:'assignAuto',
enableToggle:true,
toggleHandler:this.assignLine.createDelegate(this)
});
toolBar.addButton({
text:'取消分配',
id:'cancelAssign'
});
toolBar.addText("【操作结果】<span id='msg' style='color: red'></span>");

//载入数据
Ext.get('qryBtn').on('click',function(){
taskId = $("taskOps").value;
var atomId = document.forms[0].atomId;
ds.proxy = new Ext.data.HttpProxy({
url: '../cutTask.do?method=findCut2AtomsByTask'
});
ds.baseParams ={taskId:taskId,atomId:atomId};
ds.load();
});
},

My question is :

how can i update the editing cell set its' value = recorder.data.filed ?

kjordan

6 Apr 2007, 3:54 AM

Not sure I understand, but are you wanting to have the grid submit one value, but display another?

totodo

8 Apr 2007, 10:21 PM

Not sure I understand, but are you wanting to have the grid submit one value, but display another?

Yeah, that acutually what i mean..

totodo

8 Apr 2007, 10:23 PM

kjordan

9 Apr 2007, 4:05 AM

Set a renderer:
{header:"blah" ...
renderer: renderBlah},

var renderBlah = function(v,p,r) {
return r.data['devCode'];
}

totodo

9 Apr 2007, 5:33 PM

Oh, that's great

thanks very much....!!

CableDawg

8 May 2007, 6:03 AM

Any thoughts on how to make this work with a normal TextField?

I would like to have the Grid display one value and edit a different value (one is formatted, the other is not, respectively)

It would be great to have a displayField and valueField for all editors.

para

15 May 2007, 1:01 PM

I think this is similar to the problem I'm having. In some of my cells I have objects (dataStores), with a custom editor to edit them. I have a renderer to display "Empty..." or "Details..." instead of the "Object [object]" it does by default.
My issue is that it changes to "Object [object]" as soon as I start editing the cell. Is there another renderer that I need to change or maybe something in the editor itself? Also, is there a way to lock the displayed text so that the user can't edit it directly? ( I have a trigger like the date editor that displays the editor).

So many questions... :)