By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,729 Members | 1,356 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,729 IT Pros & Developers. It's quick & easy.

Get value of column when row is clicked when using GridPanel (array grid) in ExtJS

100+
P: 129
Hello friends,
If anybody knows extjs please clarify my doubt. I uses gridpanel(array grid) and i want to get the value of a column of a row when a row is clicked. That means, there are 4 columns and 10 rows existed in that grid, if i clicked 5th row, i want to get the value of first column of that row. How it is possible? Help me with an example or body of event function.
Jun 26 '08 #1
Share this Question
Share on Google+
5 Replies


acoder
Expert Mod 15k+
P: 16,027
I have changed the thread title for you. Please remember to provide a meaningful Title for any threads started (see the FAQ entry Use a Good Thread Title).

This helps to ensure that other members, and also the general public, will have a better chance of finding answers to any similar questions.

Moderator.
Jun 26 '08 #2

acoder
Expert Mod 15k+
P: 16,027
I uses gridpanel(array grid) and i want to get the value of a column of a row when a row is clicked. That means, there are 4 columns and 10 rows existed in that grid, if i clicked 5th row, i want to get the value of first column of that row.
Show your code and what you've tried so far.
Jun 26 '08 #3

100+
P: 129
Expand|Select|Wrap|Line Numbers
  1. print <<HTML;
  2. <html>
  3. <head>
  4. <title>Array Grid Example</title>
  5.  
  6.     <link rel="stylesheet" type="text/css" href="http://10.202.1.22/Ext/ext-2.0.2/resources/css/ext-all.css" />
  7.  
  8.      <script type="text/javascript" src="http://10.202.1.22/Ext/ext-2.0.2/adapter/ext/ext-base.js"></script>
  9.  
  10.     <script type="text/javascript" src="http://10.202.1.22/Ext/ext-2.0.2/ext-all.js"></script>
  11.  
  12. <!--    <script type="text/javascript" src="http://10.202.1.22/Ext/ext-2.0.2/ext-all-debug.js"></script>
  13.  
  14.     <script type="text/javascript" src="http://10.202.1.22/Ext/ext-2.0.2/examples/code-display.js"></script>
  15.  
  16.     <script type="text/javascript" src="http://10.202.1.22/Ext/ext-2.0.2/examples/form/form-grid.js"></script>
  17.  
  18.     <link rel="stylesheet" type="text/css" href="http://10.202.1.22/Ext/ext-2.0.2/examples/form/forms.css"/>
  19.  
  20.     <link rel="stylesheet" type="text/css" href="http://10.202.1.22/Ext/ext-2.0.2/examples/examples.css"/>    -->
  21.  
  22. </head>
  23. <body>
  24. <form name="frm" method="post">
  25.  
  26. <h1 align=center>No.Of Tasks Registered FROM $from TO $to</h1><br><br>
  27. HTML
  28.  
  29.     $sth = $dbh->prepare("select emp_name,emp_code,designation,weakly_off from emp_master");
  30.     $sth->execute;
  31.     $rows = $sth->rows;
  32.     my @cols = ();
  33.     my $i = 1;
  34.  
  35. print <<HTML;
  36.     <script type="text/javascript">
  37.     Ext.onReady(function(){
  38.  
  39.     Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
  40.     var myData = [
  41. HTML
  42.     while(my ($code,$desc,$int,$out) = $sth->fetchrow_array())
  43.     {
  44.         my $sth1 = $dbh->prepare("select count(*) from task_detail where emp_name='$code' and date between '$from' and '$to'");
  45.         my $resp = $sth1->execute();
  46.         if($resp >= 1)
  47.         {       ($count) = $sth1->fetchrow_array();     }
  48.         $sth1->finish();
  49.         if($i != $rows)
  50.         {
  51. print <<HTML;
  52.         ['$code','$desc','$int','$out','$count'],
  53. HTML
  54.         }
  55.         else
  56.         {
  57. print <<HTML;
  58.         ['$code','$desc','$int','$out','$count']
  59. HTML
  60.         }
  61.         $i++;
  62.     }
  63. print <<HTML;
  64. ];
  65.     // example of custom renderer function
  66.     function change(val){
  67.         if(val > 0){
  68.             return '<span style="color:green;">' + val + '</span>';
  69.         }else if(val < 0){
  70.             return '<span style="color:red;">' + val + '</span>';
  71.         }
  72.         return val;
  73.     }
  74.  
  75.     // example of custom renderer function
  76.     function pctChange(val){
  77.         if(val > 0){
  78.             return '<span style="color:green;">' + val + '%</span>';
  79.         }else if(val < 0){
  80.             return '<span style="color:red;">' + val + '%</span>';
  81.         }
  82.         return val;
  83.     }
  84.  
  85.     // create the data store
  86.     var store = new Ext.data.SimpleStore({
  87.         fields: [
  88.            {name: 'name'},
  89.            {name: 'code',type:'int'},
  90.            {name: 'designation'},
  91.            {name: 'week-off'},
  92.            {name: 'count', type:'int'},
  93.         ]
  94.     });
  95.     store.loadData(myData);
  96.  
  97.     // create the Grid
  98.     var grid = new Ext.grid.GridPanel({
  99.         store: store,
  100.         columns: [
  101.             {id:'name',header: "Name", width: 50, sortable: true, dataIndex: 'name'},
  102.             {header: "Code", width: 100, sortable: true, dataIndex: 'code', align: 'center'},
  103.             {header: "Designation", width: 100, sortable: true, dataIndex: 'designation', align: 'center'},
  104.             {header: "Week-off", width: 100, sortable: true, dataIndex: 'week-off', align: 'center'},
  105.             {header: "Count", width: 100, sortable: true, dataIndex: 'count', align: 'center'},
  106.         ],
  107.         stripeRows: true,
  108.         autoExpandColumn: 'name',
  109.         width:700,
  110.         title:'Array Grid'
  111.     });
  112.  
  113.     grid.render('grid-example');
  114.  
  115.     grid.getSelectionModel().selectFirstRow();
  116.  
  117.     grid.on('rowclick', function(grid, rowIndex, e){
  118.         var row = grid.getDataSource().getAt(rowIndex);
  119.         var artistId = row.data.name;
  120.       alert(rowIndex+'select'+e+'select'+rec+'select'+arr);
  121.     });
  122. });
  123.     </script>
  124. <div id="grid-example" style="position: absolute;top: 50px;left: 200px"></div>
  125. </form>
  126. </body>
  127. </html>
  128. HTML

This is all coding i have written in modperl. So,please help me friends.
Jun 27 '08 #4

acoder
Expert Mod 15k+
P: 16,027
As a full member now, you should know that we expect your code to be posted in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use the tags in future.

MODERATOR.
Jun 27 '08 #5

acoder
Expert Mod 15k+
P: 16,027
What happens with the code you posted? Are there any error messages?
Jun 27 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.