This forum is in READ-ONLY mode.
You can look around, but if you want to ask a new question, please use Stack Overflow.

sfExt2JSPlugin basic examples

Forum to discuss ExtJS and other JS plugins

sfExt2JSPlugin basic examples

by IsRobot » Thu Apr 10, 2008 10:58 am

I have managed to get a reasonably complex page layout to work using sfExtJS2Plugin which is great :D~ :-D~ :grin:.

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.
Code: Select all
<?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.
User avatar
IsRobot
Member
 
Posts: 85
Joined: Wed Mar 19, 2008 6:37 pm
Location: East Midlands, UK

Re: sfExt2JSPlugin basic examples

by lvanderree » Wed Apr 16, 2008 11:08 am

I took the liberty to add a link to this example on the wiki:
http://trac.symfony-project.com/wiki/sfExtjs2Plugin

Great work
Leon
User avatar
lvanderree
Faithful Member
 
Posts: 653
Joined: Sat Jun 02, 2007 9:32 pm
Location: Netherlands

Re: sfExt2JSPlugin basic examples

by tayhimself » Wed Jul 23, 2008 9:27 pm

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?
tayhimself
Member
 
Posts: 68
Joined: Thu Apr 19, 2007 7:10 pm

Re: sfExt2JSPlugin basic examples

by lvanderree » Wed Jul 23, 2008 11:09 pm

50000 records is quite a lot, you might want to think using a live-grid: http://extjs.com/forum/showthread.php?t=17791 for that

I've taken a look at the latest changes to the wiki, and updated them somewhat, so please take a look at it, since I think it now should be clear.
Leon
User avatar
lvanderree
Faithful Member
 
Posts: 653
Joined: Sat Jun 02, 2007 9:32 pm
Location: Netherlands

Re: sfExt2JSPlugin basic examples

by tayhimself » Thu Jul 24, 2008 7:29 pm

Sigh, I am missing how to invoke the executeJson() code in the action.

In my template I have

Code: Select all
$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
Code: Select all
 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.
tayhimself
Member
 
Posts: 68
Joined: Thu Apr 19, 2007 7:10 pm

Re: sfExt2JSPlugin basic examples

by lvanderree » Thu Jul 24, 2008 10:09 pm

Here some tips for how to debug these problems.

First of all:

If you would have called the ExecuteJson Method manually from your browser (just like every other action in Symfony) you would have seen you have a typo ouptut instead of output...


But the reason why you get to see NULL instead of a JsonStore is that you probably haven't got the latest version of the sfExtjs2Plugin checked out from svn. Try 'svn update' To get the lastest version.
Not all ExtJs objects are currently in the sfExtjs2Plugin, and if they aren't you get NULL in return. This JsonStore have been added last week.

I myself hardly use the constructors to create Ext-Objects. I mostly create objects with the help of anonymous classes and defining their xtype. See the source of the sfExtjsThemePlugin for examples.
Leon
User avatar
lvanderree
Faithful Member
 
Posts: 653
Joined: Sat Jun 02, 2007 9:32 pm
Location: Netherlands

Re: sfExt2JSPlugin basic examples

by tayhimself » Mon Jul 28, 2008 6:02 pm

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....
tayhimself
Member
 
Posts: 68
Joined: Thu Apr 19, 2007 7:10 pm

Re: sfExt2JSPlugin basic examples

by blizzard-media » Tue Aug 12, 2008 8:16 pm

I was scratching my head over this one as well and this is what was missing for me:

Code: Select all
ds.load({params:{start: 0, limit: 15}})

You should start seeing some queries in firebug like:

POST http://localhost/frontend_dev.php/example/Json 207ms

When you have it right...then you can click on the Response column and see what your getting back.

I hope that helps, but maybe I've misunderstood the problem.
We provide Symfony hosting:
http://www.blizzard-media.com/
User avatar
blizzard-media
Member
 
Posts: 62
Joined: Thu May 11, 2006 7:40 pm

Re: sfExt2JSPlugin basic examples

by chris_pnv » Wed Oct 29, 2008 4:30 pm

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

I have searched solution in internet but unsuccessfully

Can you help me, please

Christophe
chris_pnv
Junior Member
 
Posts: 6
Joined: Wed Oct 29, 2008 3:57 pm