PDA

View Full Version : I am using an example having problems displaying data. =(



brink668
11 May 2010, 5:07 AM
My problem is I can't display the rows in the EXTJS table. However, I can send the records to the MySQL database.

What is going on!!?

Using EXTJS 3.2.0 / 3.2.1 have same results.

simplegrid.js


Ext.onReady(function(){

Ext.QuickTips.init();

var Checkbox = new Ext.grid.CheckboxSelectionModel();

var PhoneDirectoryDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'simplegrid.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'

},
[
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'address', type: 'string'},
{name: 'email', type: 'string'}

]),
sortInfo:{field: 'id', direction: "ASC"}
});

PhoneDirectoryDataStore.load({params:{start:0,limit:900}});


var SimpleColumnModel = new Ext.grid.ColumnModel(
[
Checkbox,
{
header: 'Id',
readOnly: true,
dataIndex: 'id',
width: 40,
hidden: false

},{
header: 'Name',
dataIndex: 'name',
width: 130

},{
header: 'Address',
dataIndex: 'address',
width: 200

},{
header: 'Email',
dataIndex: 'email',
vtype:'email',
width: 180
}]
);
SimpleColumnModel.defaultSortable= true;

var simpleAdd = new Ext.FormPanel({
url:'simplegrid.php?act=add',
baseCls: 'x-plain',
labelWidth: 90,
defaultType: 'textfield',
defaults: {

allowBlank: true

},
items: [{

xtype: 'textfield',
fieldLabel: 'Name',
anchor: '100%',
name: 'name'
},
{
xtype:'textarea',
fieldLabel: 'Address',
anchor: '100%',
name: 'address'
},
{

fieldLabel: 'Email',
anchor: '100%',
name: 'email',
xtype:'textfield',
vtype:'email'

}],
buttons: [{
text: 'Save',
handler: function(){
if(simpleAdd.getForm().isValid()){
simpleAdd.getForm().submit({
waitMsg: 'Uploading your data...',
success: function(simpleAdd, o){

Ext.MessageBox.alert('Message','Add file Success..');
PhoneDirectoryDataStore.reload();
SimpleWindow.hide();

},
failure: function(simpleAdd, o){
Ext.MessageBox.alert('Warning','Add file Failure..');
}
});
}
}
},{
text: 'Reset',
handler: function(){
simpleAdd.getForm().reset();
}
}]
});

var SimpleWindow= new Ext.Window({
title: 'Add new record',
width: 340,
height:250,
layout:'card',
plain:true,
bodyStyle:'padding:3px;',
buttonAlign:'center',
closeAction:'hide',
modal: true,
animCollapse:true,
activeItem:0,
items: [simpleAdd
]

});

function displayFormWindow(){
if(!SimpleWindow.isVisible()){
SimpleWindow.show();
} else {
SimpleWindow.toFront();
}
}

var formEdit = new Ext.form.FormPanel({
url:'simplegrid.php?act=edit',
baseCls: 'x-plain',
labelWidth: 90,
defaultType: 'textfield',
reader: new Ext.data.JsonReader ({
root: 'results',
totalProperty: 'total',
id: 'id',
fields: [
'id','name','address','email'
]
}),
items: [
new Ext.form.Hidden ({
name: 'id'
}),
{
fieldLabel: 'Name',
name: 'name',
anchor:'100%'
},
{
fieldLabel: 'Address',
name: 'address',
xtype:'textarea',
// flex:3,
width:220
},
{
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:220
}
],

buttons: [{
text: 'SAVE',
handler:function(){
formEdit.getForm().submit({
waitMsg:'Storing Data...',
failure: function(form, action) {
Ext.MessageBox.alert('Error Message', 'Data Failure....');
formEdit.getForm().reset();
},
success: function(form, action) {
Ext.MessageBox.alert('Confirm', 'Success to storing data...');
PhoneDirectoryDataStore.load({params:{start:0,limit:6}});
window.hide();
formEdit.getForm().reset();
}
})
}
},{
text: 'Cancel',
handler: function(){
window.hide();
}
}]
});
var window = new Ext.Window({
title: 'Edit Record',
width: 340,
height:250,
layout:'card',
plain:true,
bodyStyle:'padding:3px;',
buttonAlign:'center',
closeAction:'hide',
modal: true,
animCollapse:true,
activeItem:0,
items: [
formEdit
]
});

function del(btn)
{
if(btn == 'yes')
{
var m = SimpleListingEditorGrid.getSelectionModel().getSelections();
var store = SimpleListingEditorGrid.getStore();

for(var i=0; i< m.length; i++){
var rec = m[i];
if(rec){
PhoneDirectoryDataStore.load({
params:{del:rec.get("id"),start:0,limit:6},
callback: function(){

}
});store.remove(rec);
}
}

}
}
var SimpleListingEditorGrid = new Ext.grid.GridPanel({
title: 'Phone',
store: PhoneDirectoryDataStore,
cm: SimpleColumnModel,
sm: Checkbox,
tbar:[

{
text: 'Add',
iconCls:'add',
handler: displayFormWindow
},'-',

{

text:'Edit',
iconCls:'edit-grid',

handler: function()
{
var m = SimpleListingEditorGrid.getSelectionModel().getSelections();
if(m.length > 0)
{
formEdit.getForm().load({url:'simplegrid.php?act=get&id='+ m[0].get('id'), waitMsg:'Loading'});
window.show();
}
else
{
Ext.MessageBox.alert('Message', 'please... Choose one of file...!');
}

}

},'-',
{
text:'Delete',
iconCls:'delete',

handler: function()
{
var m = SimpleListingEditorGrid.getSelectionModel().getSelections();
if(m.length > 0)
{
Ext.MessageBox.confirm('Message', 'Are you sure to delete this file?' , del);
}
else
{
Ext.MessageBox.alert('Message', 'please... Choose one of file...!');
}

}

}




],
viewConfig: {
forceFit:true
},

frame:true,
//collapsible: true,
//animCollapse: true,
width:750,
height:650,

bbar: new Ext.PagingToolbar({
pageSize: 6,
store: PhoneDirectoryDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})

});

SimpleListingEditorGrid.render('form');

});
simplegrid.php

<?php

$connect = mysql_connect('localhost','root1','root1');
$db = mysql_select_db('phonedirectorydb',$connect);

if($_GET["act"] == "get"){
$sql = "select * from phonedirectorytable where id = '".$_GET["id"]."'";
$result = mysql_query($sql);
$rows = mysql_num_rows($result);
$arr = array();
while($obj = mysql_fetch_object($result))
{
$arr[] = $obj;
}
$jsonresult = json_encode($arr);
echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
}
else if($_GET["act"] == "add"){
$sql = "INSERT INTO phonedirectorytable VALUES (NULL,'".$_POST["name"]."', '".$_POST["address"]."', '".$_POST["email"]."')";
mysql_query($sql) or die(mysql_error());
echo "{success:true}";
}

else if($_GET["act"] == "edit"){
$sql = "update phonedirectorytable set name = '".$_POST["name"]."',address='".$_POST["address"]."', email='".$_POST["email"]."' where id='".$_POST["id"]."'";
mysql_query($sql) or die(mysql_error());
echo "{success:true}";
}

else if(isset($_POST["del"])){
$sql = "delete from phonedirectorytable where id ='".$_POST["del"]."'";
mysql_query($sql) or die(mysql_error());
mysql_close();
}

else
{ $query = "SELECT * FROM phonedirectorytable";
$result = mysql_query($query);
$nbrows = mysql_num_rows($result);
$start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
$end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
$limit = $query." limit ".$start.",".$end;

$result = mysql_query($limit);

if($nbrows>0)
{
while($rec = mysql_fetch_array($result)) {

$arr[] = $rec;
}
$jsonresult = json_encode($arr);
echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
}
else
{
echo '({"total":"0", "results":""})';
}

}



?> The SQL File:

-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: May 11, 2010 at 01:00 AM
-- Server version: 5.1.36
-- PHP Version: 5.3.0

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `phonedirectorydb`
--

-- --------------------------------------------------------

--
-- Table structure for table `phonedirectorytable`
--

CREATE TABLE IF NOT EXISTS `phonedirectorytable` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`address` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=14 ;

--
-- Dumping data for table `phonedirectorytable`
--

INSERT INTO `phonedirectorytable` (`id`, `name`, `address`, `email`) VALUES
(12, '', '', '[email protected]'),
(13, 'hi', 'why cant i add this', '[email protected]');Index.html file

<html>
<head>
<title>Simple form</title>
<link rel="stylesheet" type="text/css" href="ext-3.2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.0/ext-all.js"></script>
<script type="text/javascript" src="simplegrid.js"></script>

<style type="text/css">
.add {
background-image:url(add.png) !important;
}
.delete {
background-image:url(delete.png) !important;
}
.edit-grid{
background-image:url(edit.png) !important;
}
</style>
</head>
<body bgcolor="#D9E7F4">
<div style="height:0px"></div>
<table align="center">
<tr><td>
<div id="form">
</div>
</td>
</tr>
</table>
</body>
</html>

odandi
11 May 2010, 5:56 AM
How does the JSON data object returned from the server look like? Also I didnt see a success:true property in your php code.

brink668
11 May 2010, 6:28 AM
I am not sure how it returns, I have included the code so it will be easier to work with in a zip file.
I am so confused now.

CrazyEnigma
11 May 2010, 7:06 AM
Posting all your code won't help. Have you debugged through your code? Have you narrowed down where your code is failing? What sort of debugging techniques are you using to figure this out?

fay
11 May 2010, 7:44 AM
Use FireFox+FireBug and examine the JSON response from simplegrid.php when 'act'='get'. Is this JSON valid? Does it match what your JSON reader expects? To discover the problem... go one step at time, don't test simplegrid.js with everything else in it - get the store loading first, get the grid displaying the data, etc., etc.,

brink668
11 May 2010, 9:19 AM
Ok I'll keep trying.