PDA

View Full Version : Editor Grid: refresh row data after selection in cell



Tumac
20 Feb 2010, 11:33 AM
i have an editor grid that has a dropdown to select an "skuID". After selection of that item, I want the grid to show values related to that skuID within that row in the other cells.

ie.

Add new record to grid
Focus on "skuID" -> dropdown list
Select skuID
On selection of "skuID" set "item Description", "item price", etc

My grid is working as an editor grid for manual edits of al columns. Now I just want to automate the data related to the "skuID" being selected.


I have read this thread http://www.extjs.com/forum/showthread.php?t=62098 , and the FAQ section on refreshing row (http://www.extjs.com/learn/Ext_FAQ_Grid#Change_one_cell_and_update_others_in_same_rowand) and the API, but I am still missing something.

If I look at the post data in Firebug, the code is setting the column values properly, but the values are not showing up on my refresh.

What piece am I missing or what part of API/Tutorials should I be reading?

ComboBox with Listener


var comboSKU = new Ext.form.ComboBox({
triggerAction: 'all'
,mode: 'local'
,fieldLabel: 'Item'
,store: itemMasterStore
,displayField:'skuID'
,valueField: 'skuID'
,hiddenName:'skuID'
,listeners: {
select:{
fn: function (e,rec) {

var sm = itemGrid.getSelectionModel().getSelected();
sm.set('cusDescription',rec.data.cusDescription);
sm.set('itemCost',rec.data.itemCost);
sm.set('qty_uomID',"7");
sm.set('item_uomID',"6");
itemGrid.getView().refresh(rec);
itemGrid.getSelectionModel().selectRow(rec);
}
}
}



GRID


var ItemRecord = new Ext.data.Record.create([
{name: 'poID',type:'string'}
,{name: 'skuID',type:'string'}
,{name: 'millDescription',type:'string'}
,{name: 'cusDescription',type:'string'}
,{name: 'qty',type:'string'}
,{name: 'qtyUOM',type:'string', mapping:'uomDesc'}
,{name: 'itemCost',type:'float'}
,{name: 'itemUOM',type:'string',mapping:'uomDesc'}
,{name: 'qty_uomID',type:'string'}
,{name: 'item_uomID',type:'string'}
]);

var itemReader = new Ext.data.JsonReader({
id:'poID'
,totalProperty:'rows'
,root: 'data'
}
,ItemRecord

);
var itemWriter = new Ext.data.JsonWriter ({
encode:false
});
var itemProxy = new Ext.data.HttpProxy({
url: 'index.php?c=po&m=json_poDetail'
,method:'POST'
});

var itemStore = new Ext.data.Store ({
proxy: itemProxy
,reader: itemReader
,writer:itemWriter

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


var itemGrid = new Ext.grid.GridPanel ({
id:'itemGrid'
,height:140
,cls:'x-panel-blue'
,frame:false
,store: itemStore
,plugins: [editor]
,sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
,tbar:[{
text: 'Add'
,iconCls: 'icon-add'
,handler: function() {
var item = new ItemRecord({
poID: Ext.getCmp('field_poID').getValue()
,skuID:''
,qty: ''
,qty_uom: ''
,itemCost: ''
,item_uom: ''
});
editor.stopEditing();
itemStore.insert(0, item);
itemGrid.getView().refresh();
itemGrid.getSelectionModel().selectRow(0);
editor.startEditing(0);
}
,loadmask:true
,striperows:true
,viewConfig:
{forceFit:true}
},{
ref: '../removeBtn'
,iconCls: 'icon-del'
,text: 'Remove Item'
,disabled: true
,handler: function(){
editor.stopEditing();
var sm = itemGrid.getSelectionModel();
var sel = sm.getSelected();
if (sm.hasSelection()){
Ext.Msg.show({
title: 'Remove Item'
,buttons: Ext.MessageBox.YESNOCANCEL
,msg: 'Remove '+sel.data.skuID+'?'
,fn: function(btn){
if (btn == 'yes'){
itemGrid.getStore().remove(sel);
}
}
});
}
}
}]
,columns: [
{id: 'grid_poID', header: "poID", dataIndex: 'poID',hidden:false,}
,{header: "Item", dataIndex: 'skuID', width:100, editor: comboSKU}
,{header: "Description", dataIndex: 'cusDescription', width:300}
,{header: "Qty", dataIndex: 'qty', width:50,editor:{xtype: 'textfield'}}
,{header: "U/M", dataIndex: 'qty_uomID', width:50, editor: comboUOM, renderer: Ext.ux.comboBoxRenderer(comboUOM) }
,{header: "Price (USD)", dataIndex: 'itemCost', width:75,editor:{xtype: 'textfield'},renderer: 'usMoney'}
,{header: "U/M", dataIndex: 'item_uomID', width:50,editor: comboUOM2, renderer: Ext.ux.comboBoxRenderer(comboUOM) }
]
,listeners: {
beforeedit: function(e) {
if (Ext.getCmp('grid_poID').getValue()=="") {
Ext.Msg.alert('Please Enter PO Number at top of form');
e.record.reject();
}else{
e.record.commit();
}
}
}

}); //END itemGrid


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



POST DATA after selection of "skuID":
{"data":{"poID":"2313","skuID":"","qty":"","itemCost":"149.00","cusDescription":"1x6 T&G Edge Vee / Flush Smooth Back - Bridgetown Mahogany","qty_uomID":"7","item_uomID":"6"}}

linuxguy2001
18 Feb 2011, 4:49 AM
Hi Tumac, I myself have looked all over the place for this as well, and eventually came up with something that addresses my needs, hopefully this will help you. With that being said, I'm sure some expert is going to say this isn't pretty or they can do better, but this works for me. So, here is what I did:

This is what the listener for my second dropdown looks like, this is the one that loads the values on all other cells (please adjust accordingly):


http://vimeo.com/20100178




var test_cmb = new Ext.form.ComboBox({store: destest_store,
id:'Test_id',
hiddenName:'test_hid',
valueField:'test',
displayField:'test',
width: 55,
typeAhead: true,
mode: 'local',
forceSelection: false,
triggerAction: 'all',
lastQuery: '',
selectOnFocus:true,
listeners: {
select:
//
function() {
// Find out what test has been selected
var des = Ext.getCmp('Designation_id').getValue();
var test = Ext.getCmp('Test_id').getValue();
// Now reload the store with the param
var meas = Ext.getCmp('um_id');

// Load the store so the measure dropdown is populated
meas.store.load({params: {des: des}});

// Run the request below to load the new measure depending on the test selected
Ext.Ajax.request({
url: 'stores/perfmeasdataQ.php',
method: 'POST',
params :{des: des, test:test, new_desig: 'nd'},
success: function(resp){ // there were no errors running the url above
// Check if there was any data and load the default value for the specific record
var data = Ext.util.JSON.decode(resp.responseText);
if (data.success === true) { // We've found records

// Grab the current record (the one we just added to the grid)
record = perf_grid.getSelectionModel().getSelected();
// Set its initial value
record.set('pmtask', data.task);
record.set('measure', data.measure);
record.set('setpoint', data.setpoint);
record.set('tmin', data.tmin);
record.set('tmax', data.tmax);
record.set('testid', data.task);


}
else // We've found no records
{
alert('No Records Found');
}
},
failure: function (){ // If there was a problem running the url
alert('Failure');
}

});

}
}
})

This pretty much loads the values on all other cells for the speficied row. Of course you'll need to create the file ajax.request uses, this is what mine looks like:




<?php
include('../../Connections/web.php');

//connection String
$web = mysql_connect($hostname_web, $username_web, $password_web) or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database_web, $web);
//Select The database
$bool = mysql_select_db($database_web, $web);
if ($bool === False){
print "can't find $database_web";
}


$newdesig = $_POST['new_desig'];

if (!$newdesig) {


$query = "SELECT
concept, unitabbr
FROM
unitsofmeasure
WHERE concept LIKE '{$_POST['des']}'
ORDER by unitabbr ASC";

$result = mysql_query($query, $web);
// Test the query
if(!$result){
die("SQL Query ERROR! " . mysql_error($web));
}

if (mysql_num_rows($result) > 0){
while($obj = mysql_fetch_object($result)){
$arr[] = $obj;
}
}

echo '{desmeasinfo:'.json_encode($arr).'}';

}


else if ($newdesig == 'nd'){

$query = "SELECT
testid, designationid, test, measure, setpoint, tmin, tmax
FROM
pmtasktest
WHERE (designationid LIKE '{$_POST['des']}' AND test LIKE '{$_POST['test']}')
ORDER by measure ASC";

$result = mysql_query($query, $web);
// Test the query
if(!$result){
die("SQL Query ERROR! " . mysql_error($web));
}

if (mysql_num_rows($result) > 0){
while($obj = mysql_fetch_object($result))
{
$desid = $obj->testid;
$measure = $obj->measure;
$setpoint = $obj->setpoint;
$tmin = $obj->tmin;
$tmax = $obj->tmax;
}
}


$res = array('success' => true, 'task' => $desid, 'measure' => $measure, 'setpoint' => $setpoint, 'tmin' => $tmin, 'tmax' => $tmax);
echo json_encode($res);



}

?>


it is a straight forward php/mysql/json file used to load the store. Please let me know if any of this doesn't make sense and I'll help you out some more. I also have some other tutorials on my site if you'd like to check them out www.foscode.com (http://www.foscode.com)