Defafe

Hi!! in this section  i want to share about how to make checkbox selection in grid extjs, here i used checkbox selection to editing data. In this tutorial user can not edit the data before user select one of the data in grid. To get selection you must use gri’s SelectionModel. For example in this tutorial this code like this.

SimpleListingEditorGrid.getSelectionModel().getSelections();

Below are step by steps to make this tutorial.

First step is create database for example “defafe” after that create table and insert data to this table, here i provide this data to try this tutorial.

CREATE TABLE IF NOT EXISTS `simpleform` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  `address` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;

--
-- Dumping data for table `simpleform`
--
INSERT INTO `simpleform` (`id`, `name`, `address`, `email`) VALUES
(1, 'faisal amir', 'jl Pamekasan 87', 'faisal@yahoo.com'),
(2, 'kahayan', 'blitar no 3', 'kahayan@yahoo.its'),
(3, 'abid', 'lumajang', 'abid@gmail.com'),
(4, 'Billy', 'lumajang', 'billy@gmail.com'),
(5, 'didik', 'pamekasan', 'didik@plasa.com'),
(6, 'kakase', 'saikato', 'kakase@yahoo.com'),
(7, 'yudik', 'sikio', 'yudik@gmail.com');

Second step is create a html file, this file will load more file likes css file, library extjs, and javascript file.

Simple form		

	
	
	

	

Third step is create javascript file, this file used to make display of this tutorial, This is main code of this example.

Ext.onReady(function(){

Ext.QuickTips.init();     

	var Checkbox = new Ext.grid.CheckboxSelectionModel();	 

	var SimpleDataStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
            url: 'simplegrid.php',
                method: 'POST'
            }),
    reader: new Ext.data.JsonReader({
    root: 'results',
    totalProperty: 'total'

      },
	   [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'},
        {name: 'address', type: 'string'},
        {name: 'email', type: 'string'}

      ]),
      sortInfo:{field: 'id', direction: "ASC"}
    });

	SimpleDataStore.load({params:{start:0,limit:6}});

  var SimpleColumnModel = new Ext.grid.ColumnModel(
    [
	Checkbox,
	{
        header: 'Id',
        readOnly: true,
        dataIndex: 'id',
        width: 40,
        hidden: false

      },{
        header: 'Name',
        dataIndex: 'name',
        width: 130

      },{
        header: 'Address',
        dataIndex: 'address',
        width: 200

      },{
		header: 'Email',
        dataIndex: 'email',
		vtype:'email',
        width: 180
		}]
    );
    SimpleColumnModel.defaultSortable= true;

	var formEdit = new Ext.form.FormPanel({
	    url:'simplegrid.php?act=edit',
		baseCls: 'x-plain',
        labelWidth: 90,
        defaultType: 'textfield',
		reader: new Ext.data.JsonReader ({
			root: 'results',
			totalProperty: 'total',
			id: 'id',
			fields: [
				'id','name','address','email'
			]
		}),
        items: [
			new Ext.form.Hidden ({
				name: 'id'
			}),
			{
				fieldLabel: 'Name',
	            name: 'name',
	            anchor:'100%'
			},
			{
				fieldLabel: 'Address',
	            name: 'address',
				xtype:'textarea',
	            width:220
			},
			{
	            fieldLabel: 'Email',
	            name: 'email',
				vtype:'email',
	            width:220
	        }
		],

		buttons: [{
            text: 'SAVE',
			handler:function(){
				formEdit.getForm().submit({
					waitMsg:'Storing Data...',
					failure: function(form, action) {
						Ext.MessageBox.alert('Error Message', 'Data Failur.....');
						formEdit.getForm().reset();
					},
					success: function(form, action) {
						Ext.MessageBox.alert('Confirm', 'Success to storing data...');
						SimpleDataStore.load({params:{start:0,limit:6}});
						window.hide();
						formEdit.getForm().reset();
					}
				})
			}
        },{
            text: 'Cancel',
			handler: function(){
				window.hide();
			}
        }]
	});
	var window = new Ext.Window({
	title: 'Edit Input',
        width: 340,
        height:250,
	layout:'card',
        plain:true,
        bodyStyle:'padding:3px;',
        buttonAlign:'center',
	closeAction:'hide',
	modal: true,
	animCollapse:true,
	activeItem:0,
        items: [
			formEdit
		]
    });

	var SimpleListingEditorGrid =  new Ext.grid.GridPanel({
		title: 'Simple Grid',
		store: SimpleDataStore,
		cm: SimpleColumnModel,
		sm: Checkbox,
		tbar:[
		 {

			text:'Edit',
			iconCls:'edit-grid',

			handler: function()
			{
				var m = SimpleListingEditorGrid.getSelectionModel().getSelections();
				if(m.length > 0)
				{
					formEdit.getForm().load({url:'simplegrid.php?act=get&id='+ m[0].get('id'), waitMsg:'Loading'});
					window.show();
				}
				else
				{
					Ext.MessageBox.alert('Message', 'please... Choose one of file...!');
				}

			}

		 }	    

	   ],
		viewConfig: {
                forceFit:true
        },

            frame:true,
	    collapsible: true,
            animCollapse: true,
            width:480,
	    height:250,

	    bbar: new Ext.PagingToolbar({
            pageSize: 6,
            store: SimpleDataStore,
            displayInfo: true,
            displayMsg: 'Displaying data {0} - {1} of {2}',
            emptyMsg: "No data to display"
        })

	   });

     SimpleListingEditorGrid.render('form');

  });

and the final step is create a php file, this file will load data from database. and everything associated with databse will handled by this file.

$connect  = mysql_connect('localhost','root','');
$db = mysql_select_db('defafe',$connect);

if($_GET["act"] == "get"){
	$sql = "select * from simpleform where id = '".$_GET["id"]."'";
	$result = mysql_query($sql);
	$rows = mysql_num_rows($result);
	$arr = array();
	while($obj = mysql_fetch_object($result))
	{
		$arr[] = $obj;
	}
		$jsonresult = json_encode($arr);
		echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
}

else if($_GET["act"] == "edit"){
	$sql = "update simpleform set name = '".$_POST["name"]."',address='".$_POST["address"]."', email='".$_POST["email"]."' where id='".$_POST["id"]."'";
	mysql_query($sql) or die(mysql_error());
	echo "{success:true}";
}

else
{     $query = "SELECT * FROM simpleform";
	  $result = mysql_query($query);
	  $nbrows = mysql_num_rows($result);
	  $start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
	  $end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
	  $limit = $query." limit ".$start.",".$end;	

	  $result = mysql_query($limit);  	

	if($nbrows>0)
	{
		while($rec = mysql_fetch_array($result))	{            

		  $arr[] = $rec;
		}
		$jsonresult = json_encode($arr);
		echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
    }
	else
	{
    echo '({"total":"0", "results":""})';
    }

}

here is a screen shot of this tutorial.

checkbox-selection

http://www.ziddu.com/download/9505118/chexbox-selection.zip.html