PDA

View Full Version : Problems with grid



nikolnikon
20 Dec 2011, 2:23 AM
Hello!

I'm beginner in JS and ExtJS.
I would like to use grid with row editing, but I have several problems.


When I load data from server (xml) they are displayed in grid normally. But when I begin editing the fields of editor are blank.

When I push button to insert a new record request is sending to server immediately with enpty xml nodes. The editor don't apear.

I need the following behavior of editor: when updating a record only a few fields are editable, when inserting a new record all fields are editable. How can I do this?


Code is below.


Ext.require(['Ext.data.*', 'Ext.grid.*']);

Ext.define('Price', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
useNull: true
}, 'alloy_name', 'grade', 'prod_name', 'note', 'diameter', 'length', 'width', 'thickness', 'other_dim', 'quantity', 'mass', 'price']
});

Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Price',
proxy: {
type: 'ajax',
api: {
read: 'test_xml_gen.php',
create: 'test_editor.php',
update: 'test_editor.php',
destroy: 'test_editor.php'
},
reader: {
type: 'xml',
root: 'data',
record: 'item',
idProperty: 'id',
successProperty: 'success',
messageProperty: 'message'
},
writer: { // ???????? ?? ?????? POST-??????, ?????????? xml
type: 'xml',
header: '<?xml version=\'1.0\' encoding=\'utf-8\'?>',
documentRoot: 'request',
record: 'item',
writeAllFields: false
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;


if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
//Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId())); // ????????, ?????? example
}
}
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
'edit': function(editor, e) {
editor.record.commit();
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
renderTo: 'test_editor',
plugins: [rowEditing],
width: 1400,
height: 400,
frame: true,
title: '?????-????',
store: store,
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
}, {text: "????????", width: 110, dataIndex: 'alloy_name', sortable: true},
{text: "?????", width: 180, dataIndex: 'grade', sortable: true},
{text: "??? ???????", width: 115, dataIndex: 'prod_name', sortable: true},
{text: "??????????", width: 100, dataIndex: 'note', sortable: true},
{text: "???????", width: 100, dataIndex: 'diameter', sortable: true},
{text: "?????", width: 100, dataIndex: 'length', sortable: true},
{text: "??????", width: 100, dataIndex: 'width', sortable: true},
{text: "???????", width: 100, dataIndex: 'thickness', sortable: true},
{text: "?????? ??????", width: 100, dataIndex: 'other_dim', sortable: true},
{text: "??????????", width: 100, dataIndex: 'quantity', sortable: true, editor: {xtype: 'numberfield', allowBlank: true, minValue: 1, maxValue: 150000}},
{text: "?????", width: 100, dataIndex: 'mass', sortable: true, field: {xtype: 'textfield'}},
{text: "????", width: 100, dataIndex: 'price', sortable: true, field: {xtype: 'textfield'}}
],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: '???????? ??????',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Price());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: '??????? ??????',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
});

XML-response when loading data

<price_list>

<success>true</success>

<message>Loaded data</message>

<data>
<item>
<id>3</id>

<alloy_name>??????</alloy_name>

<grade>?1?</grade>

<prod_name>????</prod_name>

<note></note>

<diameter></diameter>

<length>1000</length>

<width>200</width>

<thickness>10</thickness>

<other_dim></other_dim>

<quantity></quantity>

<mass>235</mass>

<price>950</price>


</item>

<item>
<id>4</id>

<alloy_name>??????</alloy_name>

<grade>??2</grade>

<prod_name>?????</prod_name>

<note></note>

<diameter></diameter>

<length></length>

<width>10</width>

<thickness>1</thickness>

<other_dim></other_dim>

<quantity></quantity>

<mass>100</mass>

<price>1235</price>


</item>

<item>
<id>5</id>

<alloy_name>??????</alloy_name>

<grade>?1?</grade>

<prod_name>????</prod_name>

<note></note>

<diameter></diameter>

<length></length>

<width></width>

<thickness></thickness>

<other_dim>????????</other_dim>

<quantity></quantity>

<mass>300</mass>

<price>1450</price>


</item>

<item>
<id>6</id>

<alloy_name>??????</alloy_name>

<grade>??2</grade>

<prod_name>?????????</prod_name>

<note></note>

<diameter>1.2</diameter>

<length></length>

<width></width>

<thickness></thickness>

<other_dim></other_dim>

<quantity></quantity>

<mass>150</mass>

<price>2800</price>


</item>


</data>


</price_list>




Thank you.

mitchellsimoens
20 Dec 2011, 5:13 AM
2. That is because you have autoSync set to true so as soon as the store detects a datachanged event, it will automatically sync.
3. On beforeedit, you can disable certain fields.

nikolnikon
22 Dec 2011, 5:34 AM
Thank you for answer.

2. It works.
3. I try to get access to the editor (field) and disable it. But there is the error: "editor.grid.columns[2].editor is undefined".


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function(editor, e) {
editor.store.sync();
editor.record.commit();
},
beforeedit: function(editor, e, eOpts) {
var id = editor.record.get('id');
if (id > 0) {
alert("in");
//editor.grid.columns[2].disable(); //????????, ?? ?? ??
editor.grid.columns[2].editor.disable();
}
alert(id);
}
}
});