PDA

View Full Version : Apply State in Tree Grid not working with grouped column header



nicholasnet
16 Aug 2012, 7:40 AM
I am trying to save state of a treegrid and apply it based on user selection. However, apply part is not working as expected is there anyway to apply different states after treegrid is rendered. So, far I tried this but it is not working.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Case</title>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext-4.1.1-gpl/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext-4.1.1-gpl/examples/shared/example.css">
<style type="text/css">
.task
{
background-image: url(http://cdn.sencha.com/ext-4.1.1-gpl/examples/shared/icons/fam/cog.gif) !important;
}
.task-folder
{
background-image: url(http://cdn.sencha.com/ext-4.1.1-gpl/examples/shared/icons/fam/folder_go.gif) !important;
}
</style>
<script type="text/javascript" src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function()
{
var tree = Ext.create('Ext.tree.Panel',
{
title: 'Core Team Projects',
width: 500,
height: 300,
autoScroll: true,
renderTo: Ext.getBody(),
useArrows: true,
rootVisible: false,
store: Ext.create('Ext.data.TreeStore',
{
fields:['task','user','duration'],
proxy: {type: 'ajax',url: 'treegrid.json'},
folderSort: true
}),
tbar:
[{
text: 'Save State',
handler: function(btn)
{
var tree = btn.up('treepanel');
var state = tree.getState();
state = Ext.encode(state);
tree.el.mask('Saving your state please wait');
Ext.Ajax.request
({
url: 'state.php',
method: 'POST',
params: {state: state},
success: function(response)
{
tree.el.unmask();
Ext.MessageBox.alert('Success', 'Changes saved successfully. Now make some changes in column width and click apply state.');
}
});
}
},'->',{
text: 'Apply previously saved State',
handler: function(btn)
{
var tree = btn.up('treepanel');
tree.el.mask('Applying your saved state please wait');
Ext.Ajax.request
({
url: 'state.php',
method: 'GET',
success: function(response)
{
var result = Ext.decode(response.responseText);
var state = Ext.decode(result.state);
tree.el.unmask();
tree.applyState(state);
tree.getView().refresh();
tree.el.unmask();
}
});
}
}],
columns:
[{
xtype: 'treecolumn',
text: 'Task',
flex: 1,
minWidth :200,
sortable: true,
dataIndex: 'task'
},{
text: 'Duration',
width : 75,
dataIndex: 'duration'
},{
text: 'Grouped',
columns:
[{
text: 'Duration',
width : 75,
dataIndex: 'duration'
},{
text: 'Assigned To',
width : 75,
dataIndex: 'user'
}]
},{
text: 'Grouped',
columns:
[{
text: 'Duration',
width : 75,
dataIndex: 'duration'
},{
text: 'Assigned To',
width : 75,
dataIndex: 'user'
}]
},{
text: 'Duration',
width : 75,
dataIndex: 'duration'
}]
});
});
</script>
</head>
<body>
</body>
</html>

state.php


<?php
session_start();
if(!empty($_POST['state']))
{
$state = $_POST['state'];
$_SESSION['state'] = $state;
}

else
{
echo json_encode(array('state' => $_SESSION['state']));
}

nicholasnet
17 Aug 2012, 10:15 AM
I tried this case without grouped columns and still got the same problem. Can anyone confirm this issue...?

evant
19 Aug 2012, 8:53 PM
This isn't a bug, applyState needs to be called as part of the initialization process. By the time you're calling it, it's way too late. Moving to help.

nicholasnet
21 Aug 2012, 6:12 AM
So, there is no way that you can apply different state to tree-grid based on user selection. Seems like apply state is not working after tree-grid is rendered. Is there any possible work around.

waqar
4 Sep 2012, 6:47 AM
Hello every one,


@nichol did you found any solution ?

I am working on grids and tree and making them stateful for the app. too ... what I am facing is that

If we dont over ride the applyState(state) every thing in grid / panel is restored successfully

but if we do over ride applyState in over gird and leave it empty and do nothing the state is not restored, I just want some extra work to be done on state reload other then that I want it to behave just like it works without over riding the function.

Can any body guide me about this ?

Am I missing some thing ?


Code :




......
{
region: 'left',
stateId: 'stater',
xtype: 'grid',

// RESTORE STATE (If this function below is here state would not be restored
// if I remove it state is restored sucessfully )

applyState: function(state){
console.info(state);

// if(state != null){
// console.info('applying state');
// Ext.apply(this, state); // nothing happens with this line
// }
},

store: feedingStore,
columns: [{
text: 'Digger',
dataIndex: 'dig'
}, {
text: 'Nora Master Valve',
dataIndex: 'nmv'
}, {
text: 'Pressure Per Head',
dataIndex: 'pph'
}, {
flex: 1,
text: 'Log Traces',
dataIndex: 'lt
}]
}
.............
....