Posts Tagged "grid"

Simple Table Pricing Using CSS

June 18th, 2012 by aditia rahman / 1 Comment  

     

In today post I want to create a simple table pricing using CSS only style, table pricing is one of the most common use in web design especially for web sites who offering different kind of product or service, for example we can found it on web hosting sites, commercial software support, online marketing consultant, etc.

css-table-pricing

In this example I use a sample dummy web hosting datam, for grid I use notjustgrid, to make easier dividing a div, and colorzilla gradient editor to creating a button gradient color. The other features and tool used in this example are google web fonts, css text shadow, rounded corner and box gradient.

27 CSS Grid System & Generator To Build Web Layout

August 24th, 2011 by aditia rahman / 3 Comments  

     

CSS grid based layout are becoming very commonly used these day, since it replacing table based layout, it will help a website designer to create lighter code and it make it easier to styling, even in some cases it can be use as a grid table too.

css grid

In today post I collected the css grid system that can be used as your grid layout system, I found 12  tools for creating the grid online and 15 that can be downloaded, so you can create manually on your computer.

ExtJS: Load Grid From Another Grid

May 23rd, 2011 by aditia rahman / 10 Comments  

     

About last week I got a question from a friend in ExtJS subject, like this pst title said he asking how to load a grid from another grid, which mean the first grid loaded when the page load, and the second grid loads when a row in the first grid clicked.

Extjs load grid from other grid

This is really simple actually, in this example I’m using static json file as a data source, the data are the company list and the company product list, i get all this data from wikipedia.

Google Web Seach With ExtJS Grid and PHP

January 24th, 2011 by aditia rahman / 3 Comments  

     

This time I want to make a simple example in displaying google web search result in ExtJS grid, other ExtJS component that can be used to displaying this result is dataview, but grid is more common in displaying data in ExtJS, to use google search API you have to signup to get an API key, one key is only for one domain.

Google API Key

CRUD using CodeIgniter and EXTJS Grid Part 3

July 13th, 2010 by aditia rahman / 39 Comments  

     

This is the final post of the series CodeIgniter and Extjs CRUD, if you want to read the previous posts, here the first part and the second part of this post. Basically we already finish all the crud feature on the second part this only another common feature to add in the application, so we will add a quick search field on the grid, and what you need is the search grid plugin, I’m using the extjs example search field plugin from this extjs grid tutorial, you can download the complete code and find this file searchfield.js and put it your desire folder, in this post i put on the “assets/js/ext/plugins/” folder. Now all you have to do just include the js file in the view file and change the controller method.

CRUD using CodeIgniter and EXTJS Grid Part 2

July 12th, 2010 by aditia rahman / 27 Comments  

     

This post is continuation of the part 1, in part 1 we already created the Extjs grid with pagination and load the store grid from the database, in this part we will add the save, edit and delete feature to that grid, and for make it easier it will use the editor grid.

First Edit The View ( in “application/views/user/index.php” )

We will use the editorGrid, one of them should be editable on the combobox field and the value is fetched from the database, so we create country store component and set like the code below (in this step we haven’t created the method to get all countries. it described in the controller section).

CRUD using CodeIgniter and EXTJS Grid – Part 1

July 10th, 2010 by aditia rahman / 22 Comments  

     

In this post I want to share how to create simple CRUD (create, read, update, delete) using codeigniter ExtJS editor grid. In this first part, we will setup the database schema, codeigniter and extjs. I limited this first part, only setup fetching data from database and pagination grid in extjs grid.

1. Create Database Schema

The table that we will use is two tables with “has one” relationship, namely users table with foreign key country_id and countries table that store all the countries data, so when we want to know the country name from the users we have to get from the countries table, and here the sql for creating the table.

EXTJS: Getting each row value from the grid

May 14th, 2010 by aditia rahman / 13 Comments  

     

When I write this post, a friend of mine asking me how to get the value from all the row in EXTJS grid, she use EditorGridPanel to make the grid editable by it’s user, and submit all edited value in each row to the server i’m using php to take all the server side process). Actually the idea is very simple, the grid need to have sm config options it is a shorthand for selModel and this config that make the grid can be selected per row, and you can added the checkboxselection model to choose the row that you desired, so trid to make it simple tutorial, and at the of the post you can download the source from this post.

1. Setting the main page
Include the EXTJS file (javascript and css) in html header file, then create single div with an id to where the grid to put on, and i’m using inline css style to centering the div the on the page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"; ?>"></script>
<script type="text/javascript" src="extjs/ext-all.js"; ?>"></script>
</head>

/* This should be fill with the EXTJS script code
 * It explain on the next step
 */

// on the body section
<body>
<div id="grid-example1" style="height: 200px;width:600px;margin:0 auto;padding:20px;"></div>
</body>
</html>