PDA

View Full Version : grid with editing functions



blade226
23 Aug 2012, 12:30 AM
Hello,
i'm still a beginner and i desperate on a editing grid.

I search for an example (not from sencha) which
-> lays in a new row (id will be create in a database and should be direct sent to grid-store)
-> editing a row (update)
-> delete a row (delete)

Everytime should be opened a php-script which connected to database, do the required work and send back a json string.
I tried to convert the writer.js from sencha examples, but i surrender.

Can someone help me, please? As simple as possible!

vietits
23 Aug 2012, 1:17 AM
Did you check the "Row Editing Grid Example (http://file:///D:/Prog/script/sencha.com/extjs-4.1.1/examples/grid/row-editing.html)". To send request to php script, you only need to modify the proxy to use ajax proxy instead of memory proxy as in this example. Something like this:


var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Employee',
autoSync: true,
proxy: {
type: 'ajax',
api: {
read: 'url points to php script for loading records',
create: 'url points to php script for creating new record',
update: 'url points to php script for updating existing record',
destroy: 'url points to php script for removing record',
},
reader: {
type: 'json',
...
},
writer: {
type: 'json'
}
},
data: data,
sorters: [{
property: 'start',
direction: 'ASC'
}]
});

blade226
23 Aug 2012, 1:36 AM
Yes I tried it:


<html>
<head>
<meta http-equiv=„Content-Type“ content=„text/html; charset=UTF-8? />
<title>MassnahmenBudgetierung (Mabu)</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">


<link rel="stylesheet" type="text/css" href="extjs/examples/shared/example.css" />
<link rel="stylesheet" type="text/css" href="extjs/examples/ux/css/CheckHeader.css" />
<link rel="stylesheet" type="text/css" href="includes/writer.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!--script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script-->
<!-- script type="text/javascript" src="extjs/ext-lang-de.js"></script -->
<script type="text/javascript" src="extjs/bootstrap.js"></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;
}
</style-->
<script type="text/javascript">

//Überprüfen der Session Daten



Ext.Loader.setConfig({
enabled : true,
paths : {
Fake: 'jsd' // <- do not use Ext, it is for Ext framework source
}
});
Ext.Loader.setPath('Ext.ux', '/mabu/extjs/examples/ux');

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);

//{"success":true,"message":"Created record","data":{"id":11,"email":"[email protected]","first":"asf","last":"sdfsdf"}}
Ext.onReady(function(){
// Define our data model

Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'fuid_konto', type: 'numeric'},
{name: 'kontoinhaber', type: 'string'},
{name: 'kontonummer', type: 'numeric'},
{name: 'blz', type: 'numeric'},
{name: 'institut', type: 'string'},
{name: 'iban', type: 'numeric'},
{name: 'swift', type: 'numeric'},
{name: 'aktiv', type: 'numeric'},
{name: 'freigegeben', type: 'numeric'}

]

});
var sub = 1;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
autoLoad: true,
autoSync: true,

model: 'Employee',
proxy: {
type: 'ajax',
api: {
read: "includes/konto.php?pid="+sub,
create: "includes/konto.php?pid="+sub+"&konto=create",
update: "includes/konto.php?pid="+sub+"&konto=update",
destroy: "includes/konto.php?pid="+sub+"&konto=destroy"
},
reader: {
type: 'json',
successProperty: 'success',
//root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: false,
//root: 'data'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'Fehler',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});

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

// create the grid and specify what field you want
// to use for the editor at each column.


var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [ {header:"fuid_konto",dataIndex:"fuid_konto",flex:1},
{header:"Inhaber",dataIndex:"kontoinhaber",flex:1,editor: {allowBlank: false}},
{header:"Kontonummer",dataIndex:"kontonummer",flex:1},
{header:"BLZ",dataIndex:"blz",flex:1},
{header:"Institut",dataIndex:"institut",flex:1},
{header:"IBAN",dataIndex:"iban",flex:1,hidden:true},
{header:"Swift",dataIndex:"swift",flex:1,hidden:true},
{header:"Aktiv",dataIndex:"aktiv",flex:1,hidden:true},
{header:"Freigabe",dataIndex:"freigegeben",flex:1,hidden:true}
],
// renderTo: 'editor-grid',
width: 600,
height: 400,
title: 'Employee Salaries',
frame: true,
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler : function() {
rowEditing.cancelEdit();

// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: '[email protected]',
start: new Date(),
salary: 50000,
active: true
});

store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeEmployee').setDisabled(!records.length);
}
}
});




var tab_konto = Ext.create('Ext.tab.Panel', {
items: [{
title: 'Stammdaten'
},
{
title: 'Ansprechpartner'
},{
title: 'Adressen'
},{
title: 'Kontoverbindungen',
id: 'konto',
items: [grid]
}]
,activeTab: 'konto'
});
var frage = Ext.create('Ext.window.Window', {
title: 'Detailansicht Tr&auml;ger',
height: 600,
width: 800,

items:[tab_konto]


}).show();

})


</script>

</head>
<body>
<div>
<header>
<h1>cell_edit</h1>
</header>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
</p>
</nav>
<div></div>
<footer>
<p>
&copy; Copyright by slibera
</p>
</footer>
</div>
</body>
</html>

My problems here are:
1: Click first time on update. he sent a create request
2: second time it works
3: third time he sents create and update
4: how can i reload the store when i add a new row. i need the id from database

vietits
23 Aug 2012, 2:04 AM
1. You should define a field in your model to be the key. If this field name is not 'id', then you should config your model with idProperty to tell model which field plays the role of key.
2. Each time store does a sync with server, all modified records with no id will be sent in creating request. Updating request only be sent with modified records with id.
3. After each request (creating or updating), you should returns data with id to update the data in store. In case, you creating/updating multiple records, you should config clientIdProperty for your model also. If you follow this, you don't have to re-load store. It will be automatically updated. In case you want to load data again, just call <store>.load({...})

blade226
23 Aug 2012, 4:26 AM
Can you add your comments into the code?
I have problems with understanding and the implementation.

THX

blade226
24 Aug 2012, 1:51 AM
Thx for reply! 90 % works

But. When the php-script returns the changed store, the store is already reloaded. Already asynchronous. Sometimes it works, but ext is too fast. How can i stop the reload until php sends back the new data? Or how can i reload the store after php does his work?

i tried it so:

var store = Ext.create('Ext.data.Store', {

autoDestroy: true,
autoSync: true,

model: 'Employee',
proxy: {
type: 'ajax',
api: {
read: "includes/konto.php?pid="+sub,
create: "includes/konto.php?pid="+sub+"&konto=create",
update: "includes/konto.php?pid="+sub+"&konto=update",
destroy: "includes/konto.php?pid="+sub+"&konto=destroy",

},
reader: {
type: 'json',
successProperty: 'success',
messageProperty: 'message',

},
writer: {
type: 'json',
writeAllFields: false,
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'Fehler',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
,

update: function(store, r, operation, opts) {
if (operation == Ext.data.Model.COMMIT) {
store.destroy();
store.load();
}
},

create: function(store, r, operation, opts) {
if (operation == Ext.data.Model.COMMIT) {
store.reload();
}
},

destroy: function(store, r, operation, opts) {
if (operation == Ext.data.Model.COMMIT) {
//store.reload();
store.destroy();
store.load();
// store.refresh();
}
}


}
}
});

vietits
24 Aug 2012, 2:27 AM
If your php-scripts return valid json data after each writing operation (creating, updating or destroying), it will be automatically updated in store and then in grid. So it is not need to re-load your store after such an operation.
Let me explain more details about this. Suppose, your store is configured with autoSync set to true.
Below is what will happen with adding new record:
- You add new record (without id) to your store by using grid row editing plugin.
- Store will automaticallly generate a creating request to send this new added record to server script.
- Your script give new record with id and updates it into database. Then it returns a json data reflecting record with new id to client under Json format.
- On receiving returned json data, store will update its respective record and then grid update the related row. This will be done automatically by the framework, so you don't have to re-load store. The same with updating and destroying.

blade226
24 Aug 2012, 2:38 AM
Thx for description. It is true what you say, but here is a phenomenon

I add a new record

var r = Ext.create('Employee', {
kontoinhaber: 'Neuer Inhaber',
active: true
});
store.insert(0, r);


I see this in the grid
the php-scripts works and send back the whole store

in most cases then the line with the new record disappears. After clicking F5 i see the record.

Sometimes i add a new record and it will be shown with the new id.

vietits
24 Aug 2012, 2:41 AM
Your script should return just updated record instead of all records. Maybe you should use different scripts for each operation: script for loading, script for creating, script for updating and script for destroying.

blade226
24 Aug 2012, 2:50 AM
Thx. It works!