Home » plugins » Javascript plugins » sfExt2JSPlugin basic examples
| sfExt2JSPlugin basic examples [message #49633] |
Thu, 10 April 2008 10:58  |
 |
IsRobot Messages: 83 Registered: March 2008 Location: East Midlands, UK |
Member |
|
|
I have managed to get a reasonably complex page layout to work using sfExtJS2Plugin which is great .
Hopefully this example might be useful to others getting started with this plugin as it is reasonably simple with no extra .js or data dependancies.
This will produce a viewport layout with north, east, west, south and center panels. The center panel contains tabs. The east and south panels are collapsible (but only when the panel has a title bar). The south and west tabs are resizeable. I have this in the showSuccess.php page of a module. See attached image for a screenshot.<?php
$tab1info = "Tab content to go here e.g. a welcome page";
$tab2info = "Tab content to go here e.g. a data grid";
$sfExtjs2Plugin = new sfExtjs2Plugin(array('theme'=>'blue'));
$sfExtjs2Plugin->load();
$sfExtjs2Plugin->begin();
// **************************************
// Application
// **************************************
$sfExtjs2Plugin_App_viewport = $sfExtjs2Plugin->Viewport(array
(
'layout' => 'border', 'items' => array
(
$sfExtjs2Plugin->Panel(array
(
'id'=>'tonyNp',
'region'=>'north',
'height'=>'auto',
'margins'=>'5 5 5 5',
'html'=>'<h1>Logo etc could go up here</h1>',
'border'=>'false'
)),
$sfExtjs2Plugin->Panel(array
(
'id'=>'tonyEp',
'region'=>'east',
'title'=>'East Panel',
'margins'=>'0 5 0 0',
'cmargins'=>'0 5 0 0',
'width'=>'200',
'minSize'=>'100',
'maxSize'=>'300',
'collapsible'=>'true'
)),
$sfExtjs2Plugin->Panel(array
(
'id'=>'tonySp',
'region'=>'south',
'margins'=>'0 5 5 5',
'cmargins'=>'0 0 0 0',
'height'=>'auto',
'minSize'=>'75',
'maxSize'=>'250',
'collapsible'=>'true',
'split'=>'true',
'html'=>'<p>Some extra information could go here e.g. system event logs, a feed or a news ticker</p>'
)),
$sfExtjs2Plugin->Panel(array
(
'id'=>'tonyWp',
'region'=>'west',
'title'=>'West Panel',
'margins'=>'0 0 0 5',
'cmargins'=>'0 0 0 0',
'width'=>'200',
'minSize'=>'100',
'maxSize'=>'300',
'split'=>'true'
)),
$sfExtjs2Plugin->TabPanel(array
(
'id'=>'tonyCp',
'region'=>'center',
'margins'=>'0 5 0 0',
'items'=>array(
$sfExtjs2Plugin->Panel(array(
'title'=>'First tab',
'html'=>$tab1info
)),
$sfExtjs2Plugin->Panel(array(
'title'=>'Second tab',
'html'=>$tab2info
))
)
))
)
));
$sfExtjs2Plugin->beginApplication(array
(
'name' => 'App',
'public' => array(
'init' => $sfExtjs2Plugin->asMethod("$sfExtjs2Plugin_App_viewport;"
)
)
));
$sfExtjs2Plugin->endApplication();
$sfExtjs2Plugin->end('Ext.onReady(App.init, App);');
?>
Next I want to have the viewport created in layout.php so that the layout is standard across the symfony app and to populate the panels with dynamic content from the database.
web development
|
|
| |
| Re: sfExt2JSPlugin basic examples [message #56879 is a reply to message #49633 ] |
Wed, 23 July 2008 21:27   |
|
sfExtjs2Plugin wiki page has an example with data - grids and json at the end of the page.
I would be generating a very large amount of data (up to 50000 records) in my controller, but I am not sure what the best way to pass this to the javascript datagrid is. If it is indeed JSON like shown with the executeJsonat the end of the page, where does the executeJson function go? It goes in the controller and then gets echo'd in the view?
[Updated on: Wed, 23 July 2008 21:34]
|
|
| |
| Re: sfExt2JSPlugin basic examples [message #56964 is a reply to message #49633 ] |
Thu, 24 July 2008 19:29   |
|
Sigh, I am missing how to invoke the executeJson() code in the action.
In my template I have
$private['ds'] = $sfExtjs2Plugin->JsonStore(
array(
'url' => 'example/Json',
'id' => 'id',
'totalProperty' => 'total',
...
but when I view my script in firebug the store value is null. Obviously the executeJson() function is not being called. I am calling it in the template of the example module by including it in the 'url' parameter as example/Json where example is the module and executeJson is the action. Sigh.. this makes me feel stupid.
Oh and the function looks like this
public function executeJson()
{
$this->getResponse ()->setHttpHeader ('Content-Type', 'text/javascript');
$output = array(array('Apple',29.89,0.24,0.81,'9/1 12:00am'),
array('Ext',83.81,0.28,0.34,'9/12 12:00am'),
array('Google',71.72,0.02,0.03,'10/1 12:00am'),
array('Microsoft',52.55,0.01,0.02,'7/4 12:00am'),
array('Yahoo!',29.01,0.42,1.47,'5/22 12:00am'));
$json = json_encode(array('total' => count($ouptut), 'data' => $output));
return $this->renderText ($json);
}
Thanks for the quick reply previously, I will reduce the number of records by giving a sample display and then download option for the rest.
[Updated on: Thu, 24 July 2008 19:31]
|
|
| |
| Re: sfExt2JSPlugin basic examples [message #57174 is a reply to message #49633 ] |
Mon, 28 July 2008 18:02   |
|
Ugh, still doesn't work after doing all that you suggested barring using the anonymous classes. Thanks again for your help but after all this, I think that I'm going to
<rant> I wish there was an easy way to use javascript and Extjs 2 directly. This way at least there is rich documentation to help guide the way. My disappointment with Symfony and the plugins is that the documentation is comparatively sparse. </rant>
It would take me less time to learn the basic .js need for an Ext2grid (hell there's 8 examples) than to figure it out using this plugin. And that makes me feel stupid and sad....
|
|
| |
| Re: sfExt2JSPlugin basic examples [message #64146 is a reply to message #58548 ] |
Wed, 29 October 2008 15:30  |
chris_pnv Messages: 6 Registered: October 2008 |
Junior Member |
|
|
Hi,
I'm a french user of Symfony.
I'm a new user of extJs.
I copy/paste basic example in first post of this discussion to use ext in symfony, but i have the following error in firebug :
missing } after property list
init: Object id #55 \n
I have searched solution in internet but unsuccessfully
Can you help me, please
Christophe
|
|
|
Goto Forum:
|