PDA

View Full Version : grouping store data not coming in grid



rahulmehta
25 May 2010, 4:40 AM
hiii

m new to ext js
and want to fetch the data for grouping store in grid but data is not coming here is my code please check
data is coming from the tasklist.php i have seen in the firebug

var myRecord = Ext.data.Record.create( [
{name: 'id'},
{name: 'customer'},
{name: 'project'},
{name: 'employee'},
{name: 'task'},
{name: 'duedate', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'completiondate', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'handsonhours'}
]);


var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id_contact',
root: 'data'},

myRecord

);
var store = new Ext.data.GroupingStore({
reader: reader,
proxy: new Ext.data.HttpProxy({
url: 'tasklist.php'
}),
sortInfo:{field: 'customer', direction: "ASC"},
groupField:'customer'
});
// load data from the url ( data.php )
store.load();

//grid code...
var grid = new xg.GridPanel({
store: store,
columns: [
{id:'id',header: "id", width: 20, sortable: true, dataIndex: 'id'},
{header: "customer", width: 20, sortable: true, dataIndex: 'customer'},
{header: "project", width: 20, sortable: true, dataIndex: 'project'},
{header: "employee", width: 20, sortable: true, dataIndex: 'employee'},
{header: "task", width: 20, sortable: true, dataIndex: 'task'},

{header: "due date", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'duedate'},
{header: "completion date", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'completiondate'},
{header: "handsonhours", width: 20, sortable: true, dataIndex: 'handsonhours'}
],

view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
width: 900,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Listing of Task',
iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
}
}],
renderTo: document.body
});

data is coming from the tasklist.php i have seen in the firebug but not showing in the grid...
code of tasklist.php.............
<?php
include "connection.php";


$result=mysql_query ("SELECT * FROM tasks") or die (mysql_error ());

$data = array();

while ($row=mysql_fetch_object($result))
{
$data [] = $row;
}

echo json_encode($data);
?>

please check and reply ASAP..

thanks rahul

mayurid
16 Jun 2010, 1:15 AM
hi,
i to have same prob? did u find it,if yes wt is the prob

rahulmehta
16 Jun 2010, 1:22 AM
hi,
i to have same prob? did u find it,if yes wt is the prob

hi ,

i was not generating the json properly , check your json...

mayurid
16 Jun 2010, 2:56 AM
its cmg properly....but its not displaying in grid m getting empty columns can u post d code

rahulmehta
16 Jun 2010, 3:05 AM
its cmg properly....but its not displaying in grid m getting empty columns can u post d code
u post your code.........

mayurid
16 Jun 2010, 3:09 AM
Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

var reader = new Ext.data.JsonReader({

idProperty: 'e_name',
fields: [
{name:'e_name',type: 'string' },
{name: 'datesel', type: 'string'},
{name: 'in_time', type: 'time'},
{name: 'out_time', type: 'time'},
{name:'total_time',type:'time'}
]
});

var summary = new Ext.grid.GroupSummary();


var grid = new Ext.grid.GridPanel({
ds: new Ext.data.GroupingStore({
reader: reader,
autoload:true,
sortInfo: {field: 'datesel', direction: 'ASC'},
data:'results' ,

proxy: new Ext.data.ScriptTagProxy({
url:'sample3.php'

}),

groupField:'e_name'
}),


columns: [
{

header: 'datesel',
width: 80,
sortable: true,
dataIndex: 'datesel',
summaryType: 'count',
hideable: false,
summaryRenderer: function(v, params, data){
return ((v === 0 || v > 1) ? '(' + v +' Days)' : '(1 Day)');
}

},{
header: 'e_name',
width: 20,
sortable: true,
dataIndex: 'e_name'
},{
header: 'in_time',
width: 25,
sortable: true,
dataIndex: 'in_time'

},{
header: 'out_time',
width: 20,
sortable: true,
dataIndex: 'out_time',

},{
header: 'hours',
width: 20,
sortable: true,
dataIndex: 'total_time'
}
],
view: new Ext.grid.GroupingView({
forceFit: true,
showGroupName: false,
enableNoGroups: false,
enableGroupingMenu: false,
hideGroupedColumn: true
}),
plugins: summary,
frame: true,
width: 800,
height: 450,
clicksToEdit: 1,
collapsible: true,
animCollapse: false,
trackMouseOver: false,
// enableColumnMove: false,
title: 'Sponsored Projects',
iconCls: 'icon-grid',
renderTo: document.body
});

});

rahulmehta
16 Jun 2010, 3:11 AM
write your php code

mayurid
16 Jun 2010, 3:12 AM
<?php
extract($_REQUEST);

mysql_connect("localhost", "root", "") or
die("Could not connect: " . mysql_error());
mysql_select_db("test");
include("JSON.php");

$payload=array();
$payload["results"]=array();
if(!isset($start))
$start=0;

$query="SELECT e_master.e_name as e_name,e_detail.datesel as datesel,e_detail.in_time as in_time, e_detail.out_time as out_time,concat(HOUR(TIMEDIFF(

e_detail.out_time,
e_detail.in_time
)),'.',minute(TIMEDIFF(

e_detail.out_time,
e_detail.in_time
)))as total_time
FROM e_detail, e_master
WHERE e_detail.ID=e_master.ID ";

$query2="select count(*) as no from e_detail ";

$payload["total"]=mysql_result(mysql_query($query2),0,'no');


$res=mysql_query($query);

if(mysql_num_rows($res)>0)
{



while($data=mysql_fetch_assoc($res))
{ $payload["results"][]=$data; }

}
$json = new Services_JSON();
echo $_GET['callback']."(";
print $json->encode($payload);
echo ");";

?>

rahulmehta
16 Jun 2010, 3:14 AM
var reader = new Ext.data.JsonReader({

idProperty: 'e_name',
fields: [
{name:'e_name',type: 'string' },
{name: 'datesel', type: 'string'},
{name: 'in_time', type: 'time'},
{name: 'out_time', type: 'time'},
{name:'total_time',type:'time'}
]
});
remove id property from here and check

mayurid
16 Jun 2010, 3:19 AM
checked nt working

rahulmehta
16 Jun 2010, 3:21 AM
u check with my code
//grouoping store for spaces.........
var spaceds = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'spacelist.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({

},
[
//this is field in database
{name: 'id_space', type: 'numeric'},
{name: 'name', type: 'string'},
{name: 'type', type: 'string'},
{name: 'num_owners', type: 'string'},
{name: 'inner_template', type: 'string'},
{name: 'inner_data', type: 'string'},
{name: 'outer_template', type: 'string'},
{name: 'outer_data', type: 'string'},
{name: 'ownername', type: 'string'},
{name: 'multiselect', type: 'string'},
{name: 'id_user', type: 'string'}

]),

});
var grid = new xg.GridPanel({
store: spaceds,
id:'grid',
columns: [
{header: "Id", width: 10, sortable: true, dataIndex: 'id_space'},
{header: "Name", width: 20, sortable: true, dataIndex: 'name'},
{header: "Type", width: 20, sortable: true, dataIndex: 'type'},
{header: "Inner Template", width: 20, sortable: true, dataIndex: 'inner_template'},
{header: "Inner Data", width: 20, sortable: true, dataIndex: 'inner_data'},
{header: "Outer Template", width: 20, sortable: true, dataIndex: 'outer_template'},
{header: "Outer Data", width: 20, sortable: true, dataIndex: 'outer_data'},
{header: "Owner's Name", width: 20, sortable: true, dataIndex: 'ownername'},
{header: "Owner's Name", width: 20, sortable: true, dataIndex: 'id_user',hidden:true},
{header: "Owner's Name", width: 20, sortable: true, dataIndex: 'multiselect',hidden:true}
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
/* addTab();
Ext.getCmp("task").getForm().loadRecord(rec);*/
}
}
}),
listeners: {
viewready: function(g) {
g.getSelectionModel().selectRow(0);
} // Allow rows to be rendered.
},
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, ds) {
var xf = Ext.util.Format;
p.body = '<p>' + xf.ellipsis(xf.stripTags(record.data.comment), 200) + '</p>';
return 'x-grid3-row-expanded';
}
},
view: new Ext.grid.GroupingView({
forceFit:true,

groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),


plugins: filters,
frame:true,
width: 1000,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Listing of Spaces',

iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
spaceds.clearGrouping();
}
},'-', {
text:'Add ',
iconCls: 'icon-clear-group',
handler : function(){
addspace(0);

}
},'-', {
text:'Refresh',
iconCls: 'icon-clear-group',
handler : function(){
grid.getStore().removeAll();
grid.getStore().load();

}
},'-', {
text:'Update',
iconCls: 'icon-clear-group',
handler : function(){
var selectedKeys = grid.selModel.selections.keys;
if(selectedKeys.length > 0)
{
addspace(1);

}
else
{
Ext.MessageBox.alert('Message','Please select at least one item to delete');
}

}
}/*,'-', {
text:'Delete',
iconCls: 'icon-clear-group',
handler : function(){
var selectedKeys = grid.selModel.selections.keys;
if(selectedKeys.length > 0)
{
Ext.MessageBox.confirm('Message','Do you really want to delete selection?', deleteRecord);
}
else
{
Ext.MessageBox.alert('Message','Please select at least one item to delete');
}

}
}*/,'-', {
text:'Log Out',
iconCls: 'add16',
handler : function(){
Ext.Ajax.request({
url:'logout.php',
success:function( result, request)
{
//~ alert(result.responseText);
window.location='index.php';
},
failure:function( result, request){
//~ alert(result.responseText);
window.location='index.php';},
});

}
}
]
});

rahulmehta
16 Jun 2010, 3:22 AM
check with my code



//grouoping store for spaces.........
var spaceds = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'spacelist.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({

},
[
//this is field in database
{name: 'id_space', type: 'numeric'},
{name: 'name', type: 'string'},
{name: 'type', type: 'string'},
{name: 'num_owners', type: 'string'},
{name: 'inner_template', type: 'string'},
{name: 'inner_data', type: 'string'},
{name: 'outer_template', type: 'string'},
{name: 'outer_data', type: 'string'},
{name: 'ownername', type: 'string'},
{name: 'multiselect', type: 'string'},
{name: 'id_user', type: 'string'}

]),

});

var grid = new xg.GridPanel({
store: spaceds,
id:'grid',
columns: [
{header: "Id", width: 10, sortable: true, dataIndex: 'id_space'},
{header: "Name", width: 20, sortable: true, dataIndex: 'name'},
{header: "Type", width: 20, sortable: true, dataIndex: 'type'},
{header: "Inner Template", width: 20, sortable: true, dataIndex: 'inner_template'},
{header: "Inner Data", width: 20, sortable: true, dataIndex: 'inner_data'},
{header: "Outer Template", width: 20, sortable: true, dataIndex: 'outer_template'},
{header: "Outer Data", width: 20, sortable: true, dataIndex: 'outer_data'},
{header: "Owner's Name", width: 20, sortable: true, dataIndex: 'ownername'},
{header: "Owner's Name", width: 20, sortable: true, dataIndex: 'id_user',hidden:true},
{header: "Owner's Name", width: 20, sortable: true, dataIndex: 'multiselect',hidden:true}
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
/* addTab();
Ext.getCmp("task").getForm().loadRecord(rec);*/
}
}
}),
listeners: {
viewready: function(g) {
g.getSelectionModel().selectRow(0);
} // Allow rows to be rendered.
},
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, ds) {
var xf = Ext.util.Format;
p.body = '<p>' + xf.ellipsis(xf.stripTags(record.data.comment), 200) + '</p>';
return 'x-grid3-row-expanded';
}
},
view: new Ext.grid.GroupingView({
forceFit:true,

groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),


plugins: filters,
frame:true,
width: 1000,
height: 450,
collapsible: true,
animCollapse: false,
title: 'Listing of Spaces',

iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
spaceds.clearGrouping();
}
},'-', {
text:'Add ',
iconCls: 'icon-clear-group',
handler : function(){
addspace(0);

}
},'-', {
text:'Refresh',
iconCls: 'icon-clear-group',
handler : function(){
grid.getStore().removeAll();
grid.getStore().load();

}
},'-', {
text:'Update',
iconCls: 'icon-clear-group',
handler : function(){
var selectedKeys = grid.selModel.selections.keys;
if(selectedKeys.length > 0)
{
addspace(1);

}
else
{
Ext.MessageBox.alert('Message','Please select at least one item to delete');
}

}
}/*,'-', {
text:'Delete',
iconCls: 'icon-clear-group',
handler : function(){
var selectedKeys = grid.selModel.selections.keys;
if(selectedKeys.length > 0)
{
Ext.MessageBox.confirm('Message','Do you really want to delete selection?', deleteRecord);
}
else
{
Ext.MessageBox.alert('Message','Please select at least one item to delete');
}

}
}*/,'-', {
text:'Log Out',
iconCls: 'add16',
handler : function(){
Ext.Ajax.request({
url:'logout.php',
success:function( result, request)
{
//~ alert(result.responseText);
window.location='index.php';
},
failure:function( result, request){
//~ alert(result.responseText);
window.location='index.php';},
});

}
}
]
});

mayurid
16 Jun 2010, 3:32 AM
got any idea y its not working