akbeyfb
28 Jul 2007, 6:27 AM
hi...
i have basic-grid.i got the datas from my database with php to the my grid.and then when i double click the any row of the grid,i want that a form is opened to edit datas.
but we couldnt the take datas.we couldnt change form field values.how can we do this?
alll of the my codes fallowing
<?
include "../db/baglanti.php";
?>
<?
$sorgu=mysql_query("SELECT * FROM kullanici WHERE id=50");
$satir=mysql_fetch_object($sorgu);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layout Dialog Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script >
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var r = new Ramazan();
r.init();
});
//----
function Ramazan(){
this.init = function (){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
/*
* ================ Simple form =======================
*/
var simple = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php'
});
this.simple = simple;
simple.add(
new Ext.form.TextField({
fieldLabel: 'id',
name: 'id',
width:175,
allowBlank:false,
value:'<?=$satir->id?>',
readOnly:true
}),
new Ext.form.TextField({
fieldLabel: 'Kullanıcı Adı',
name: 'kullanici_adi',
width:175,
allowBlank:false,
value:'<?=$satir->kullanici_adi?>'
}),
new Ext.form.TextField({
fieldLabel: 'Şifre',
name: 'kullanici_sifre',
width:175,
value:'<?=$satir->kullanici_sifre?>'
}),
new Ext.form.TextField({
fieldLabel: 'Adı Soyadı',
name: 'kullanici_isim',
width:175,
value:'<?=$satir->kullanici_isim?>'
}) );
simple.remove(new Ext.form.TextField({
fieldLabel: 'Adı Soyadı',
name: 'kullanici_isim',
width:175,
value:'<?=$satir->kullanici_isim?>'
}));
/*this.simple.setValues({ kullanici_adi:'DENEME'});
this.simple.reload();*/
//this.simple.findField('kullanici_adi').setValue('DENEME');;
//this.simple.getValues()['kullanici_adi'] = 'DENEME';
for(i in simple){
//alert(i + ' -' + simple[i]);
}
simple.addButton({
text: 'Save1',
handler: this.save,
scope: this
});
simple.addButton('Save');
simple.addButton('Cancel');
simple.render('form-3');
}
this.save = function(){
this.tableName ='kullanici';
//Ext.MessageBox.confirm('Confirm', "Are you sure?", function (answer) {
// if (answer == 'yes') {
var tosend = {};
//var newItem = {id : ''};
//tosend.push(newItem);
//for(i in this.simple) alert(i);
//alert(Ext.urlEncode(this.simple.getValues()) );
var a = this.simple.getValues();
Ext.each(a, function(fld){
for(i in fld)
tosend[i] = fld[i] ;
});
load({className: 'Kullanici', action: 'save_data', table: this.tableName, data: Ext.encode(tosend)}
, this.saved, this);
//}
//}, this);
}
this.saved = function(o, ifSuccess, xhr ){
//Ext.MessageBox.hide();
if (!ifSuccess) return Ext.MessageBox.alert('Error', 'Can`t save the data');
var data = Ext.decode(xhr.responseText);
if (data.success) {
Ext.MessageBox.alert('OK', 'İşlem tamamdır ağabey');
//this.grid.getDataSource().commitChanges();
//this.grid.getDataSource().reload();
} else {
Ext.MessageBox.alert('Error', 'Some problem occured while saving data. Please, retry.');
}
//alert('geldim ');
}
}//ramazanın sonu
function load(params, handler, scope) {
for(i in params) alert(i+' == '+ params[i]);
(new Ext.data.Connection()).request({url: 'load.php', params: params, callback: handler , scope: scope});
}
//----
// create the LayoutExample application (single instance)
var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block
// define some private variables
var dialog, showBtn;
var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);
/////////////////////////////////////////////////////////////////////////////////////////////
var DataGrid = {
init : function(){
// some data yanked off the web
var myData = [
<?
include "../db/baglanti.php";
$sorgu=mysql_query("SELECT * FROM kullanici");
$arr=array();
while($satir=mysql_fetch_object($sorgu)){
$arr[$count++]="['$satir->kullanici_adi','$satir->kullanici_sifre','$satir->kullanici_isim']";
}
echo implode(",",$arr);
?>
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'kullanici_adi'},
{name: 'kullanici_sifre', type: 'string'},
{name: 'kullanici_isim', type: 'string'}
])
});
ds.load();
// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';
}
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{header: "Kullanıcı Adı", width: 160, sortable: true, locked:false, dataIndex: 'kullanici_adi'},
{header: "Kullanıcı Şifre", width: 75, sortable: true, dataIndex: 'kullanici_sifre'},
{id:'kullanici_isim',header: "Kullanıcı İsim", width: 75, sortable: true, renderer: change, dataIndex: 'kullanici_isim'}
]);
// create the Grid
var grid = new Ext.grid.Grid('grid-example', {
ds: ds,
cm: colModel,
autoExpandColumn: 'kullanici_isim'
});
grid.on('rowdblclick', function(grid, rowIndex, e) {
var selectedId = ds.data.items[rowIndex].id;
for(i in ds.data.items[rowIndex]){
//alert(i + ' '+ rowIndex + '' + ds.data.items[rowIndex][i]);
}
alert(ds.data.items[rowIndex].json[0]);
LayoutExample.showDialog();
//LayOutExample.showDialog();
alert(selectedId);
});
var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');
grid.render();
grid.getSelectionModel().selectFirstRow();
}
};
Ext.onReady(DataGrid.init, DataGrid);
</script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Layout Dialog Example</h1>
<p>This example shows how to create a modal dialog with an embedded BorderLayout using LayoutDialog.</p>
<input type="button" id="show-dialog-btn" value="Show Dialog" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="layout.js">layout.js</a> for the full source code.</p>
<!-- dialog is created from existing markup -->
<div id="hello-dlg" style="visibility:hidden;">
<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<div id="form-3"></div>
</div>
</div>
<div id="grid-panel" style="width:600px;height:300px;">
<div id="grid-example"></div>
</div>
</body>
</html>
i have basic-grid.i got the datas from my database with php to the my grid.and then when i double click the any row of the grid,i want that a form is opened to edit datas.
but we couldnt the take datas.we couldnt change form field values.how can we do this?
alll of the my codes fallowing
<?
include "../db/baglanti.php";
?>
<?
$sorgu=mysql_query("SELECT * FROM kullanici WHERE id=50");
$satir=mysql_fetch_object($sorgu);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Layout Dialog Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script> <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script >
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
Ext.onReady(function(){
var r = new Ramazan();
r.init();
});
//----
function Ramazan(){
this.init = function (){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
/*
* ================ Simple form =======================
*/
var simple = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php'
});
this.simple = simple;
simple.add(
new Ext.form.TextField({
fieldLabel: 'id',
name: 'id',
width:175,
allowBlank:false,
value:'<?=$satir->id?>',
readOnly:true
}),
new Ext.form.TextField({
fieldLabel: 'Kullanıcı Adı',
name: 'kullanici_adi',
width:175,
allowBlank:false,
value:'<?=$satir->kullanici_adi?>'
}),
new Ext.form.TextField({
fieldLabel: 'Şifre',
name: 'kullanici_sifre',
width:175,
value:'<?=$satir->kullanici_sifre?>'
}),
new Ext.form.TextField({
fieldLabel: 'Adı Soyadı',
name: 'kullanici_isim',
width:175,
value:'<?=$satir->kullanici_isim?>'
}) );
simple.remove(new Ext.form.TextField({
fieldLabel: 'Adı Soyadı',
name: 'kullanici_isim',
width:175,
value:'<?=$satir->kullanici_isim?>'
}));
/*this.simple.setValues({ kullanici_adi:'DENEME'});
this.simple.reload();*/
//this.simple.findField('kullanici_adi').setValue('DENEME');;
//this.simple.getValues()['kullanici_adi'] = 'DENEME';
for(i in simple){
//alert(i + ' -' + simple[i]);
}
simple.addButton({
text: 'Save1',
handler: this.save,
scope: this
});
simple.addButton('Save');
simple.addButton('Cancel');
simple.render('form-3');
}
this.save = function(){
this.tableName ='kullanici';
//Ext.MessageBox.confirm('Confirm', "Are you sure?", function (answer) {
// if (answer == 'yes') {
var tosend = {};
//var newItem = {id : ''};
//tosend.push(newItem);
//for(i in this.simple) alert(i);
//alert(Ext.urlEncode(this.simple.getValues()) );
var a = this.simple.getValues();
Ext.each(a, function(fld){
for(i in fld)
tosend[i] = fld[i] ;
});
load({className: 'Kullanici', action: 'save_data', table: this.tableName, data: Ext.encode(tosend)}
, this.saved, this);
//}
//}, this);
}
this.saved = function(o, ifSuccess, xhr ){
//Ext.MessageBox.hide();
if (!ifSuccess) return Ext.MessageBox.alert('Error', 'Can`t save the data');
var data = Ext.decode(xhr.responseText);
if (data.success) {
Ext.MessageBox.alert('OK', 'İşlem tamamdır ağabey');
//this.grid.getDataSource().commitChanges();
//this.grid.getDataSource().reload();
} else {
Ext.MessageBox.alert('Error', 'Some problem occured while saving data. Please, retry.');
}
//alert('geldim ');
}
}//ramazanın sonu
function load(params, handler, scope) {
for(i in params) alert(i+' == '+ params[i]);
(new Ext.data.Connection()).request({url: 'load.php', params: params, callback: handler , scope: scope});
}
//----
// create the LayoutExample application (single instance)
var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block
// define some private variables
var dialog, showBtn;
var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);
/////////////////////////////////////////////////////////////////////////////////////////////
var DataGrid = {
init : function(){
// some data yanked off the web
var myData = [
<?
include "../db/baglanti.php";
$sorgu=mysql_query("SELECT * FROM kullanici");
$arr=array();
while($satir=mysql_fetch_object($sorgu)){
$arr[$count++]="['$satir->kullanici_adi','$satir->kullanici_sifre','$satir->kullanici_isim']";
}
echo implode(",",$arr);
?>
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'kullanici_adi'},
{name: 'kullanici_sifre', type: 'string'},
{name: 'kullanici_isim', type: 'string'}
])
});
ds.load();
// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';
}
// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{header: "Kullanıcı Adı", width: 160, sortable: true, locked:false, dataIndex: 'kullanici_adi'},
{header: "Kullanıcı Şifre", width: 75, sortable: true, dataIndex: 'kullanici_sifre'},
{id:'kullanici_isim',header: "Kullanıcı İsim", width: 75, sortable: true, renderer: change, dataIndex: 'kullanici_isim'}
]);
// create the Grid
var grid = new Ext.grid.Grid('grid-example', {
ds: ds,
cm: colModel,
autoExpandColumn: 'kullanici_isim'
});
grid.on('rowdblclick', function(grid, rowIndex, e) {
var selectedId = ds.data.items[rowIndex].id;
for(i in ds.data.items[rowIndex]){
//alert(i + ' '+ rowIndex + '' + ds.data.items[rowIndex][i]);
}
alert(ds.data.items[rowIndex].json[0]);
LayoutExample.showDialog();
//LayOutExample.showDialog();
alert(selectedId);
});
var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');
grid.render();
grid.getSelectionModel().selectFirstRow();
}
};
Ext.onReady(DataGrid.init, DataGrid);
</script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Layout Dialog Example</h1>
<p>This example shows how to create a modal dialog with an embedded BorderLayout using LayoutDialog.</p>
<input type="button" id="show-dialog-btn" value="Show Dialog" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="layout.js">layout.js</a> for the full source code.</p>
<!-- dialog is created from existing markup -->
<div id="hello-dlg" style="visibility:hidden;">
<div id="center" class="x-layout-inactive-content" style="padding:10px;">
<div id="form-3"></div>
</div>
</div>
<div id="grid-panel" style="width:600px;height:300px;">
<div id="grid-example"></div>
</div>
</body>
</html>