E-mail
This tutorial will show how you can create a grid and list data with SCZF. Basically, we will have a grid that is connected to a data source on a action and another action that is responsible to provide the data ( in Json format, but if you prefer, you can use XML ).
The complete source-code is available at the end of the page.
1) Make sure that you already installed SCZF
If you have not installed SCZF yet, check the Installation page.
2) Create a new action and view
On your controller, create two actions:
And them create a view file only for index action. The list action won't need a view.
3) Include scripts
On your index view file, add the following code:
This is a function that automatically include the SmartClient scripts, just make sure to set the correct path.
4) Create the datasource
Add the following code to your index view file:
In this part of the script, we basically create a new ScDataSource and draw it. As this is a basic example, we are considering that our structure have just two fields: id ( that is a primary key ) and name.
The attributes of id field are:
- Name of the Field: id
- Title of the field: Id
- Primary Key?: true
- Foreign Key?: null
- Root Value: 0
- Can Edit: false
The attributes of name are:
- Name of the Field: name
- Title of the field: Name
- Primary Key?: false ( default value )
- Foreign Key?: null ( default value )
- Root Value: 0 ( default value )
- Can Edit: true ( default value )
And the attributes of the datasource:
- Id: datasourceID
- FetchURL: list.php ( this is the other script, that we will talk soon )
5) Create the grid
Add the following code to your index view file:
Now, as we have the datasource, we can create the grid that is connected to this datasource.
The grid have the following attributes:
- ID: gridID
- DataSource: datasourceID ( this is the datasource that we created on step 3 )
- Width: 400
- Height: 300
- showFilterEditor: true ( this adds a filter for each field, really nice and fast )
- canEdit: false ( if set to true, it would allow inline editing on this grid )
6) Creating the list action
At this moment, we have a grid connected to a datasource. But the datasource needs to get data from somewhere. So we will create the list action:
In this action, we create an array called $data that holds all data. As we want to make it simple, there is no database interaction.
 | About database On real-world applications, you would probably be using a database. In this case, your $data array would be the array that is returned by Zend_DB_Select. |
And them, we create a $reply array, using the structure that SmartClient datasources expect to receive. You can find more about this at the SCDataSource page.
Finally, we encode it with json_encode() function and echo to the browser.
7) Test it
Run the index action at your browser. You should see a SmartClient grid with the data that is created at list action.
8) Full source code
Here it is the full source code of the controller and index view used on this tutorial: