PDA

View Full Version : CheckColumn.js Header checkbox exntension.



pjamrisk
11 Aug 2010, 12:29 AM
Hello again guys,
Condor was kind enough to guide me around on adding a header button on my editable grid with the CheckColum.js extension to try to do multiple selections.

By doing some reading and going to different classes I came to the conclusion that this functionality needs to be added to CheckColum.js

Anyways, Looking on the EXT classes Ext.grid.CheckboxSelectionModel has a private method called onHdMouseDown which adds the checkbox header to the grid, but I can't have all the records on the grid get selected.
Initially I was not understanding the logc of the method in this case, but I finally understood that CHeckColum when you add this method, the pointing of the DOM is different when checking on the header.

My question is, how do I point back to the grid once I have checked the header?

This is my code so far:


onHdMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
//this.clearSelections(); //Need to replace with an internal function to clear all selections.
}else{
hd.addClass('x-grid3-hd-checker-on');
//this.selectAll(); //Need to replace with internal function to have all selections.
if(t.className != 'x-grid3-cc-' + this.id){ // This is the line That should point to the grid DOM in order to be
able to check all columns, but I cant get it to work. I know this is not the correct way to use T as well as it is
defined avobe already. How do you do this part here!!!!
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
var len = this.grid.store.getCount();
alert(index); //used to check if I was grabbing some index, so far it returns undefined.
for(var i = index; i < len; i++){
record.set(this.dataIndex, !record.data[this.dataIndex]);

}
}
}
}
},
The init has only one line added:


init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); // This is for the header.
}, this);
},

pjamrisk
11 Aug 2010, 11:22 AM
Hey JGarcia,
Sorry about the triple posting, I did it initially through chrome but nothing showed up, so I went over to FF and posted again, and for some reason that's when all the funky posting went through. Apologies on that!
Anyways, I am still stuck on this, so if someone has some reading pointers it would be greatly appreciated.

Patrick

aconran
11 Aug 2010, 12:54 PM
My question is, how do I point back to the grid once I have checked the header?

Within the class you will have a reference to this.grid... Is that what you are looking for?

pjamrisk
11 Aug 2010, 7:07 PM
Hey Aaron,
That's exactly what I want to do, but when I try to do a simple variable assignment as it is on my code with "this.grid", firefox returns an undefined variable. In other words, I can't point to any of the cells of the grid at all. I can point at the header with no problem. Any ideas?

Patrick

aconran
11 Aug 2010, 7:09 PM
Post some code... perhaps you are in the wrong scope?

Have you used a debugger to see what references *are* available in this. ?

pjamrisk
11 Aug 2010, 7:12 PM
Besides Firebug no, let me grab the pertinent parts of my code then i'll post back.

aconran
11 Aug 2010, 7:17 PM
Well if you open up this. in Firebug when it breaks what is available there?

pjamrisk
11 Aug 2010, 7:27 PM
This is the CheckColumn.js


/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

Ext.ux.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); // This is for the header.
}, this);
},

onMouseDown : function(e, t){
if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
//alert(t.className);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

// private
onHdMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
//this.clearSelections(); //Need to replace with an internal function to clear all selections
}else{
hd.addClass('x-grid3-hd-checker-on');
//this.selectAll(); //Need to replace with internal function to have all selections.
if(Ext.fly(t).hasClass(this.createId())){
var index = this.grid.getView().findRowIndex(a);
var record = this.grid.store.getAt(index);
var len = this.grid.store.getCount();
alert(Ext.fly(this.grid.getView().findRowIndex(a)));
for(var i = index; i < len; i++){
record.set(this.dataIndex, !record.data[this.dataIndex]); // This is the code I am working on right now.
}
}
}
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}">&#160;</div>', v ? '-on' : '', this.createId());
},

createId : function(){
return 'x-grid3-cc-' + this.id;
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;


This is just part of the Whole app created. The file name is minorPM.js



/*!
* Minor PM Project
* Library in use: EXTJS 3.2.1, GNU Project
*/
//Define the Namespaces for the App.
Ext.ns('App', 'App.minorPM');

//begin EXT!
Ext.onReady(function(){

var visualinsp = new Ext.ux.grid.CheckColumn({
header:'<div class="x-grid3-hd-checker">&#160;</div>', //to have the checkbox element on the header
menuDisabled: true,
fixed: true,
hideable: false,
allowBlank: true,
width: 30,
sortable: false,
id: 'check',
dataIndex: 'visinspection',
align:'left',
editor: new Ext.form.Checkbox()
});

//This is the extension for teh column model for the grid.
var colModel = new Ext.grid.ColumnModel({
columns: [new Ext.grid.RowNumberer(),
visualinsp,
{header: 'KN Number', width: 80, dataIndex: 'ControlNumber'},
{header: 'Make', width: 250, dataIndex: 'Insp_SuppName', align:'center'},
{header: 'Model', width: 150, dataIndex: 'Insp_ModelName', align:'center'},
{header: 'Item', width: 200, dataIndex: 'Insp_ItemName', align:'center'},
{header: 'Department', width: 200, dataIndex: 'Insp_DeptName', align:'center'},
{header: 'Serial Number', width: 100, dataIndex: 'Insp_SerialNumber', align:'center'},
{header: 'Status', width: 150, dataIndex: 'EquipStatus', align:'center'},
{header: 'Minor PM', width: 150, dataIndex: 'MinorPMPerformed', align:'center'}
]
});

// create yellowsheet.Grid instance (@see UserGrid.js)
var minorPMGrid = new App.minorPM.grid({
store: datastores.searchBar,
cm: colModel,
plugins: [App.minorPM.filters, visualinsp],
clicksToEdit: 1,
listeners: {
rowclick: function(g, index, ev) {
var rec = g.store.getAt(index);
}
}
});



The rest is just the Grid generation and submit code which I think is not necessary here to accomplish the task I am working on.

My index.php file.


<?php
//start all includes
include('../Connections/db.php');
$PageSecurity = 1;
include('../includes/session.inc');
$title = _("Minor PM's");
include('../includes/header_ext.inc');
//start the sessions and initialize any needed variables.
session_start();
?>

<html>
<head>
<title>Minor PM Status</title>
<!-- include ext-all.css -->
<link rel="stylesheet" href="../Javascript/ext-3.2.1/resources/css/ext-all.css" />
<!-- include ext-base.js -->
<script type="text/javascript" src="../Javascript/ext-3.2.1/adapter/ext/ext-base.js"></script>
<!-- include ext-all.js -->
<script type="text/javascript" src="../Javascript/ext-3.2.1/ext-all-debug.js"></script>
<!-- includes for the filters -->
<script type="text/javascript" src="menu/EditableItem.js"></script>
<script type="text/javascript" src="menu/RangeMenu.js"></script>
<script type="text/javascript" src="grid/GridFilters.js"></script>
<script type="text/javascript" src="grid/RowExpander.js"></script>
<script type="text/javascript" src="grid/filter/Filter.js"></script>
<script type="text/javascript" src="grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="grid/filter/BooleanFilter.js"></script>
<!-- includes for the summary to appear -->
<script type="text/javascript" src="grid/GroupSummary.js"></script>
<script type="text/javascript" src="grid/GridFilters.js"></script>
<!-- Custom CSS for coloring -->
<link rel="stylesheet" href="custom.css" />
<!-- include the Project Files to load from -->
<script type="text/javascript" src="datastores.js"></script>
<script type="text/javascript" src="minorPMGrid.js"></script>
<script type="text/javascript" src="minorPM.js"></script>
<input type='hidden' id='yourid' value='<?php echo $_SESSION['UserID']; ?>'>
<input type='hidden' id='yourname' value='<?php echo $_SESSION['UsersRealName']; ?>'>
<input type='hidden' id='accessid' value='<?php echo $_SESSION['AccessLevel']; ?>'>
</head>
<body>
<table align="center" class="contenttable" cellpadding="0" cellspacing="0" border="0">
<br>
<tr>
<td id="db-grid"></td>
</tr>
</table>
</body>
</html>
<?php
include('../includes/footer.inc');
?>


Now, you may be right about the scope and I am messing up on something very obvious, but when I call onMouseDown, which is inside the the grid then "this.grid" works as expected.
Thank you again for looking at this.

Patrick

pjamrisk
11 Aug 2010, 7:36 PM
Did the code Posted? I don't seem to see it.... Anyways, Firebug replied "this" is undefined. and gave me also a $0 and $1 as undefined.....

pjamrisk
11 Aug 2010, 7:37 PM
This is the CheckColumn.js


/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

Ext.ux.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); // This is for the header.
}, this);
},

onMouseDown : function(e, t){
if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
//alert(t.className);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

// private
onHdMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
//this.clearSelections(); //Need to replace with an internal function to clear all selections
}else{
hd.addClass('x-grid3-hd-checker-on');
//this.selectAll(); //Need to replace with internal function to have all selections.
if(Ext.fly(t).hasClass(this.createId())){
var index = this.grid.getView().findRowIndex(a);
var record = this.grid.store.getAt(index);
var len = this.grid.store.getCount();
alert(Ext.fly(this.grid.getView().findRowIndex(a)));
for(var i = index; i < len; i++){
record.set(this.dataIndex, !record.data[this.dataIndex]); // This is the code I am working on right now.
}
}
}
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}">&#160;</div>', v ? '-on' : '', this.createId());
},

createId : function(){
return 'x-grid3-cc-' + this.id;
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;


This is just part of the Whole app created. The file name is minorPM.js



/*!
* Minor PM Project
* Library in use: EXTJS 3.2.1, GNU Project
*/
//Define the Namespaces for the App.
Ext.ns('App', 'App.minorPM');

//begin EXT!
Ext.onReady(function(){

var visualinsp = new Ext.ux.grid.CheckColumn({
header:'<div class="x-grid3-hd-checker">&#160;</div>', //to have the checkbox element on the header
menuDisabled: true,
fixed: true,
hideable: false,
allowBlank: true,
width: 30,
sortable: false,
id: 'check',
dataIndex: 'visinspection',
align:'left',
editor: new Ext.form.Checkbox()
});

//This is the extension for teh column model for the grid.
var colModel = new Ext.grid.ColumnModel({
columns: [new Ext.grid.RowNumberer(),
visualinsp,
{header: 'KN Number', width: 80, dataIndex: 'ControlNumber'},
{header: 'Make', width: 250, dataIndex: 'Insp_SuppName', align:'center'},
{header: 'Model', width: 150, dataIndex: 'Insp_ModelName', align:'center'},
{header: 'Item', width: 200, dataIndex: 'Insp_ItemName', align:'center'},
{header: 'Department', width: 200, dataIndex: 'Insp_DeptName', align:'center'},
{header: 'Serial Number', width: 100, dataIndex: 'Insp_SerialNumber', align:'center'},
{header: 'Status', width: 150, dataIndex: 'EquipStatus', align:'center'},
{header: 'Minor PM', width: 150, dataIndex: 'MinorPMPerformed', align:'center'}
]
});

// create yellowsheet.Grid instance (@see UserGrid.js)
var minorPMGrid = new App.minorPM.grid({
store: datastores.searchBar,
cm: colModel,
plugins: [App.minorPM.filters, visualinsp],
clicksToEdit: 1,
listeners: {
rowclick: function(g, index, ev) {
var rec = g.store.getAt(index);
}
}
});



The rest is just the Grid generation and submit code which I think is not necessary here to accomplish the task I am working on.

My index.php file.


<?php
//start all includes
include('../Connections/db.php');
$PageSecurity = 1;
include('../includes/session.inc');
$title = _("Minor PM's");
include('../includes/header_ext.inc');
//start the sessions and initialize any needed variables.
session_start();
?>

<html>
<head>
<title>Minor PM Status</title>
<!-- include ext-all.css -->
<link rel="stylesheet" href="../Javascript/ext-3.2.1/resources/css/ext-all.css" />
<!-- include ext-base.js -->
<script type="text/javascript" src="../Javascript/ext-3.2.1/adapter/ext/ext-base.js"></script>
<!-- include ext-all.js -->
<script type="text/javascript" src="../Javascript/ext-3.2.1/ext-all-debug.js"></script>
<!-- includes for the filters -->
<script type="text/javascript" src="menu/EditableItem.js"></script>
<script type="text/javascript" src="menu/RangeMenu.js"></script>
<script type="text/javascript" src="grid/GridFilters.js"></script>
<script type="text/javascript" src="grid/RowExpander.js"></script>
<script type="text/javascript" src="grid/filter/Filter.js"></script>
<script type="text/javascript" src="grid/filter/StringFilter.js"></script>
<script type="text/javascript" src="grid/filter/DateFilter.js"></script>
<script type="text/javascript" src="grid/filter/ListFilter.js"></script>
<script type="text/javascript" src="grid/filter/NumericFilter.js"></script>
<script type="text/javascript" src="grid/filter/BooleanFilter.js"></script>
<!-- includes for the summary to appear -->
<script type="text/javascript" src="grid/GroupSummary.js"></script>
<script type="text/javascript" src="grid/GridFilters.js"></script>
<!-- Custom CSS for coloring -->
<link rel="stylesheet" href="custom.css" />
<!-- include the Project Files to load from -->
<script type="text/javascript" src="datastores.js"></script>
<script type="text/javascript" src="minorPMGrid.js"></script>
<script type="text/javascript" src="minorPM.js"></script>
<input type='hidden' id='yourid' value='<?php echo $_SESSION['UserID']; ?>'>
<input type='hidden' id='yourname' value='<?php echo $_SESSION['UsersRealName']; ?>'>
<input type='hidden' id='accessid' value='<?php echo $_SESSION['AccessLevel']; ?>'>
</head>
<body>
<table align="center" class="contenttable" cellpadding="0" cellspacing="0" border="0">
<br>
<tr>
<td id="db-grid"></td>
</tr>
</table>
</body>
</html>
<?php
include('../includes/footer.inc');
?>


Now, you may be right about the scope and I am messing up on something very obvious, but when I call onMouseDown, which is inside the the grid then "this.grid" works as expected.
Again thank you again for looking at this.

darthwes
11 Aug 2010, 8:32 PM
If you need a code answer, you have to show us yours. I'm unable to recreate because I don't know
1.) Which files are being editted/created by your code. Are you modifying Ext.ux.grid.CheckColumn?
2.) Where is this onHdMouseDown function? ext/examples/ux/CheckColumn.js?
3.) Where is this init function? ext/examples/ux/CheckColumn.js?

I ask you, if your init function says:



init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); // This is for the header.
}, this);
},


Then obviously you're putting onHdMouseDown into this class (you're modifying the same file to put both edits in?). Otherwise you'll get a scope error because this.onHdMouseDown will be undefined ('this' is the Ext.ux.grid.CheckColumn instance).

Ultimately, we need to see more code.

pjamrisk
11 Aug 2010, 9:31 PM
Dear Darth,
I did post my code, but the forum said that before it can be displayed, my post has to be approved by a forum administrator. I would have thought that by now it would have been posted. Maybe that was the main reason why last time I had triplicated this same exact post and JGarcia was asking me what was up with that!
Anyways I did post the code again, and it still does not show.
Regardless, to answer your questions, I am editing CheckColumn.js and adding onHdMouseDown. The init function is of that class.
onHdMouseDown is a function from one of the Ext classes (I believe it was from CheckboxSelectionModel). I borrowed and I am trying to modify to implement it on this extension.
If I click the checkbox of an internal element of my grid, onMouseDown does what is supposed to do. if I click the header, the on/off click action works on the header, but firebug reports "record is undefined" when It tries to call this.grid in this case.

So far, the only thing I have come to deduct as a problem is that the Hd class is triggered by view.innerHd. while the regular onMouseDown is triggered by view.mainBody.on('mousedown', this.onMouseDown, this). So I been trying in this case as noted by Aaron change the scope back from innerHd to mainBody which is indeed the problem (at least that's what I have come to understand).

I apologize in advance if the code does not show up still in a few minutes more, I will check again tomorrow afternoon and see if it posted, if not, I will try to re-upload it again.

Thanks again guys for helping this strugling mind :). I really have not had this much trouble posting before...
Patrick

darthwes
11 Aug 2010, 10:01 PM
Ok. I put this in onHdMouseDown:



if(t.className != 'x-grid3-cc-' + this.id){
var grid = this.grid;
console.log("grid is ", grid);
var index = grid.getView().findRowIndex(t);
console.log("index", index);
}


What I see is that grid is defined, but this findRowIndex(t) is wrong (returns false for me). Are you trying to do



var rec = grid.getSelectionModel().getSelected();


Also, you're using


if(t.className == 'x-grid3-hd-checker'){

But you're not showing me any modifications taht would stick the x-grid3-hd-checker class onto any inner elements of the grid. I assume you've defined that for your app and forgot to post whatever modification you made?

What's your goal? When a user clicks on your custom header (which you aren't showing in your code, or at least in the code I see tonight...), your'e trying to toggle all the values and then set the selection back to the previously selected record?

Again, I see this.grid. I seem to be missing something. Is your instance


var myInstance = new Ext.ux.grid.CheckColumn({...


also defined in the grid's plugins?


new Ext.grid.GridPanel({
...
plugins: [myInstance],
...
});

pjamrisk
11 Aug 2010, 10:31 PM
Darth,
Thanks for putting up with me. I got no clue, why my code is not posting. I am going to try to put it as a file.

if(t.className == 'x-grid3-hd-checker'){
when using that my goals is indeed try to accomplish a check if the header box was clicked. If so, if it does not have a checkmar, change it to check mark, and mark all displayed records to checked as well for an update., if not do the reverse, hense my isChecked variable.

now,

if(t.className != 'x-grid3-cc-' + this.id){
this only points each element in the grid itself, and returns false as well to me. In other words, it does not go inside the grid elements, but effectively stays at the header.

Let me try to upload the files here and see if that works better.

pjamrisk
11 Aug 2010, 10:40 PM
OK,
I am having some serious issues with the forum tools. I am going to try to post the codes

pjamrisk
11 Aug 2010, 10:41 PM
CheckColumn.js

/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.CheckColumn
* @extends Object
* GridPanel plugin to add a column with check boxes to a grid.
* <p>Example usage:</p>
* <pre><code>
// create the column
var checkColumn = new Ext.grid.CheckColumn({
header: 'Indoor?',
dataIndex: 'indoor',
id: 'check',
width: 55
});

// add the column to the column model
var cm = new Ext.grid.ColumnModel([{
header: 'Foo',
...
},
checkColumn
]);

// create the grid
var grid = new Ext.grid.EditorGridPanel({
...
cm: cm,
plugins: [checkColumn], // include plugin
...
});
* </code></pre>
* In addition to storing a Boolean value within the record data, this
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
* a column.
*/
Ext.ux.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); // This is for the header.
}, this);
},

onMouseDown : function(e, t){
if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
//alert(t.className);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

// private
onHdMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
//this.clearSelections(); //Need to replace with an internal function to clear all selections.
// record.set(this.dataIndex, !record.data[this.dataIndex]);

}else{
hd.addClass('x-grid3-hd-checker-on');
//this.selectAll(); //Need to replace with internal function to have all selections.
// if(Ext.fly(a).className == (this.createId())){
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
var len = this.grid.store.getCount();
alert(Ext.fly(this.grid.getView().findRowIndex(t)));
for(var i = index; i < len; i++){
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
// }
}
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}">&#160;</div>', v ? '-on' : '', this.createId());
},

createId : function(){
return 'x-grid3-cc-' + this.id;
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;

pjamrisk
11 Aug 2010, 10:43 PM
minorPM.js


/*!
* Minor PM Project
* Library in use: EXTJS 3.1.1, GNU Project
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
//Define the Namespaces for the App.
Ext.ns('App', 'App.minorPM');

//begin EXT!
Ext.onReady(function(){
//Figure out the user logged in
var userid = document.getElementById('yourid').value;
var accessid = document.getElementById('accessid').value;

//Figure out the user logged in real name
var urealname = document.getElementById('yourname').value;

//Figure the user access level, 8 and 9 are admin level, all others aren't
//We obtain this from the index.php file in the root directory, same place where grid.js is located (same as above)
var levelid = document.getElementById('accessid').value;

//calculation for the minimum date
var currentTime = new Date();
var minDate = currentTime.add(Date.DAY, -0).clearTime();


// utilize custom extension for Group Summary
//var summary = new Ext.ux.grid.GroupSummary();

//This is the extension for the checkboxes, not utilized because we need it as an event.
//App.sm = new Ext.grid.CheckboxSelectionModel({
// // inputValue: '1',
// singleSelect: false,
// checkOnly: true,
// dataIndex: 'visinspection',
// editor: new Ext.form.Checkbox({
// })
//});

var visualinsp = new Ext.ux.grid.CheckColumn({
header:'<div class="x-grid3-hd-checker"> </div>',
menuDisabled: true,
fixed: true,
hideable: false,
allowBlank: true,
width: 30,
sortable: false,
id: 'check',
dataIndex: 'visinspection',
align:'left',
editor: new Ext.form.Checkbox()
});

//This is the extension for teh column model for the grid.
var colModel = new Ext.grid.ColumnModel({
columns: [new Ext.grid.RowNumberer(),
visualinsp,
// App.sm,
{header: 'KN Number', width: 80, dataIndex: 'ControlNumber'},
{header: 'Make', width: 250, dataIndex: 'Insp_SuppName', align:'center'},
{header: 'Model', width: 150, dataIndex: 'Insp_ModelName', align:'center'},
{header: 'Item', width: 200, dataIndex: 'Insp_ItemName', align:'center'},
{header: 'Department', width: 200, dataIndex: 'Insp_DeptName', align:'center'},
{header: 'Serial Number', width: 100, dataIndex: 'Insp_SerialNumber', align:'center'},
{header: 'Status', width: 150, dataIndex: 'EquipStatus', align:'center'},
{header: 'Minor PM', width: 150, dataIndex: 'MinorPMPerformed', align:'center'}
]
});

// create yellowsheet.Grid instance (@see UserGrid.js)
var minorPMGrid = new App.minorPM.grid({
store: datastores.searchBar,
cm: colModel,
//sm: App.sm,
plugins: [App.minorPM.filters, visualinsp],
clicksToEdit: 1,
listeners: {
rowclick: function(g, index, ev) {
var rec = g.store.getAt(index);
}
}
});

// Here we define the gridform.
//var gridForm = new Ext.FormPanel({
App.gridForm = new Ext.FormPanel({
id: 'minorPMGrid_id',
url:'submititem.php',
baseParams : {user : userid, uname : urealname}, //here is the user ID
frame: true,
labelAlign: 'left',
title: 'Minor PM',
bodyStyle:'padding:5px 5px 0 0',
width: 1210,
height: 640,
layout: 'form',
items: [{
layout: 'column',
xtype:'fieldset',
checkboxToggle:false,
autoHeight:true,
collapsed: false,
items: [{
columnWidth: .6,
labelWidth: 110,
layout: 'form',
items: [{
xtype:'combo',
id:'pm_id',
fieldLabel: 'PM ',
cls: 'required_field',
emptyText:'Please select a Minor PM',
anchor: '95%',
name: 'pm_txt',
hiddenName: 'hpm_txt', // need to set the hidden field and use it's name on the submit form
mode:'local',
lastQuery: '',
triggerAction: 'all',
allowBlank: true,
forceSelection: true,
typeAhead: true,
readOnly: false,
store: datastores.pmstore,
displayField: 'pminfo',
valueField: 'PMNumber'
},
{
xtype: 'datefield',
fieldLabel: 'Begin Date',
name: 'date_txt',
id: 'date_id',
emptyText: 'Please select the beginning date',
format: "Y/m/d",
minValue: new Date(minDate),
cls: 'required_field',
allowBlank: false,
anchor: '95%'
}
]
},
{
columnWidth: .4,
labelWidth: 50,
layout: 'form',
items: [{
xtype: 'textarea',
allowBlank: false,
id:'notes_id',
cls: 'required_field',
emptyText: 'Required field. Please enter notes pertaining this MinorPMs.',
fieldLabel: 'Notes',
name: 'notes_txt',
anchor:'100%',
height:105
}
]
}]
}
,{
xtype: 'fieldset',
autoHeight: true,
border: true,
items: [minorPMGrid]
}
]
});
App.gridForm.render('db-grid');
////////////////////////////////////////////////////////////////////////////////////////
// This adds the ability to run the Grid Expander, I've also combined the row coloring here, since if it is separate
// from the expander the coloring does not work, so forcefit, grouptexttpl and getrowclass used to be above,
// under new Ext.grid.GroupingView
////////////////////////////////////////////////////////////////////////////////////////
// row expander
// var expander = new Ext.grid.RowExpander({
// tpl : new Ext.Template(
// '<p><b>Notes:</b> <font color="#3344B0">{notes}</font></p><br>'
// ),
// groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
//
});

pjamrisk
11 Aug 2010, 10:46 PM
minorPMGrid.js


Ext.ns('App', 'App.minorPM');
Ext.onReady(function() {
Ext.QuickTips.init();

// load data from the url ( data.php )
//datastores.searchBar.load({params:{start:0, limit:150}});

// creating the filters
//var checkColumn = new Ext.grid.CheckColumn({});
App.minorPM.filters = new Ext.grid.GridFilters({
//autoReload: true,
local:true,
filters:[
{type: 'string', dataIndex: 'Insp_SuppName'},
{type: 'string', dataIndex: 'Insp_ModelName'},// value:'', defaultValue:true, active:true},
{type: 'string', dataIndex: 'Insp_ItemName'},
{type: 'string', dataIndex: 'Insp_DeptName'},
{type: 'string', dataIndex: 'Insp_SerialNumber'},
{type: 'string', dataIndex: 'EquipStatus'},
{type: 'string', dataIndex: 'MinorPMPerformed'}
]});
//We use the columns property to decide the field order
// This is the main window of the program
App.minorPM.grid = Ext.extend(Ext.grid.EditorGridPanel,{
store: datastores.searchBar,
width: '1250',
height:400,
autoSizeColumns: false,
autoSizeGrid: false,
collapsible: false,
animCollapse: false,
bodyStyle:'padding:5px 5px 0 0',
initComponent : function() {
// typical viewConfig
this.viewConfig = {
forceFit: true
};

// relay the Store's CRUD events into this grid so these events can be conveniently listened-to in our application-code.
this.relayEvents(this.store, ['destroy', 'save', 'update']);

// build toolbars and buttons.
this.tbar = this.buildTopToolbar();
this.bbar = this.buildBottomToolbar();
this.buttons = this.buildUI();

// super
App.minorPM.grid.superclass.initComponent.call(this);
},
//We need to move the top bar from above here.
buildTopToolbar : function() {
return [{
// text: 'Add',
// cls: 'x-btn-text-icon',
// // icon: 'icons/add.png',
// handler: this.onAdd,
// scope: this
// }, '-', {
// text: 'Delete',
// cls: 'x-btn-text-icon',
// // icon: 'icons/delete.png',
// handler: this.onDelete,
// scope: this
// }, '-',{
xtype:'textfield',
name: 'search_txt',
id:'search_id',
listeners: { // listen for the ENTER key, same as if the user clicks the search button
'render': function(c) {
c.getEl().on('keypress', function(e) {
if(e.getKey() == e.ENTER && this.getValue().length > 0) {
datastores.searchBar.removeAll(); // This will clear the previous search
var s = document.getElementById('search_id').value;
datastores.searchBar.baseParams = {
search_box: s,
lookup: 'yes'
};
datastores.searchBar.reload({
params:{start: 0,limit: 150},
callback: function(){
if (!datastores.searchBar.getCount()){
//no items found
Ext.MessageBox.show ({title: 'Search Criteria: "' + s + '"',
msg: 'The item you requested could not be found, please try again.'});
//Function below autocloses the messagebox
(function() {
Ext.MessageBox.hide();
}).defer(4000);
}
}
});
// End of user notification
}
},c);
}
}
}, '-',{ text: 'Search',
cls: 'x-btn-text-icon', icon: 'img/find.png',
handler: this.onSearch,
scope: this
},'-',{
cls: 'x-btn-text-icon',
icon: 'img/wrench.png',
text: 'Reset Search',
iconCls:'reload-icon',
handler: function() {
var s = Ext.getCmp('search_id');
s.setValue('');
// datastores.searchBar.baseParams = {
// uid : userid, gid: groupid
// };
// datastores.searchBar.load({
// params: {
// start: 0,
// limit: 150
// }
// });
//This is the actual Reset
datastores.searchBar.removeAll();
paging.refresh.show();
paging.prev.show();
paging.next.show();
paging.first.show();
paging.last.show();
}
},'-',{text: 'Instructions',width:'100%',
//style: 'background:cyan; padding-top: 5x;',
handler: function() {
Ext.MessageBox.show({
title:'FAQ -- Time Tracking / Time Input',
width: 1000,
msg: 'This form is used to assign assets to a new minor PM. <br />\n\
<br/>\n\ 1. Select the desired minor PM, starting date and pertaining notes for the Minor PM Creation.<br />\n\
<br/>\n\ 2. Use the search box, to find the assets that requiere to be added to the minor PM.<br />\n\
<br/>\n\ 3. Using the checkboxes next to each asset, select the ones pertaining to the Minor PM.<br />\n\
<br/>\n\ 4. Press "Save All" to finish with the transaction.<br />\n\
<br/>\n\ 5. Inform the Techs that the new Minor PM was created.<br />\n\
<br />',
buttons: Ext.MessageBox.OK,
animEl: 'mb4',
icon: Ext.MessageBox.INFO
});
}
}];
},

/**
* UI Constructors
* Note: Commented out if not in use, but declared still
*/

/**
*build The bootom Toolbar
*/
buildBottomToolbar : function(){
return paging //The variable is created at the end
},

/**
* buildUI
*/
buildUI : function() {
return [{
text: 'Save ',
iconCls: 'icon-save',
handler: this.onSave,
scope: this
}];
},

/**
* onSave
*/
onSave : function(btn, ev) {
if (Ext.getCmp('minorPMGrid_id').getForm().isValid()){
//Make sure to grab the elements of the form first.
this.store.baseParams = {
pm: Ext.getCmp('pm_id').getValue(),
date: document.getElementById('date_id').value,
notes: document.getElementById('notes_id').value,
lookup: 'no' //this is to determine if it is a search or not with the put method.
};
this.store.save();
//Clear the search box.
var s = Ext.getCmp('search_id');
s.setValue('');
this.store.removeAll(); // This clears the grid after the new items have been saved (submitted)
App.gridForm.getForm().reset(); //this resets the selected fields above.
}else {
//The form has some missing fields, so we do nothing for now and let the user know
Ext.MessageBox.show ({title: 'Error !',
msg: 'Please make sure all required fields are filled out.'});
//Function below autocloses the messagebox
(function() {
Ext.MessageBox.hide();
}).defer(3300);
}
//After second submit, amke sure to clear again. This is a bug with this temporary fix.
//Clear the search box.
var s = Ext.getCmp('search_id');
s.setValue('');
this.store.removeAll(); // This clears the grid after the new items have been saved (submitted)
App.gridForm.getForm().reset(); //this resets the selected fields above.
},

/**
* onAdd
*/
onAdd : function(btn, ev) {
// var u = new this.store.recordType({
// controlnumber: '',
// make: '',
// model: '',
// item: '',
// dept: '',
// serialnumber: '',
// status: '',
// minorpm: ''
// });
// this.stopEditing();
// this.store.insert(0, u);
// this.startEditing(0, 0);
},

/**
* onDelete
*/
onDelete : function(btn, ev) {
// var index = this.getSelectionModel().getSelectedCell();
// if (!index) {
// return false;
// }
// var rec = this.store.getAt(index[0]);
// this.store.remove(rec);
},

/**
*The following Methods are customizations to adhere to objects in the top
*part and easier manipulation of the logic up on the grid. Also it allows
*proper encapsulation of custom built methods.
*/


/**
* onSearch
*/
onSearch : function(btn, ev) {
var s = document.getElementById('search_id').value;
datastores.searchBar.baseParams = {
search_box: s,
lookup: 'yes'
};
datastores.searchBar.reload({
params:{start: 0, limit: 150},
callback: function(){
if (!datastores.searchBar.getCount()){
//no items found
Ext.MessageBox.show ({title: 'Search Criteria: "' + s + '"',
msg: 'The item you requested could not be found, please try again.'});
//Function below autocloses the messagebox
(function() {
Ext.MessageBox.hide();
}).defer(4000);
}
}
});
}

});


// adds paging functionality
var paging = new Ext.PagingToolbar({
pageSize: 300,
store: datastores.searchBar,
displayInfo: true,
//plugins:[filters],
height: 30,
// displayMsg: 'Total Items On Database {0} - {1} of {2}',
displayMsg: 'Total Items {0} - {1} of {2}',
emptyMsg: "No items to display"
});

});

pjamrisk
11 Aug 2010, 10:49 PM
Gosh, I never had so many issues posting code in one day -_-. Anyways, here it is. obviously I have it separated as well on datastores.js, and everything else, but all the rest is working correctly, I still need to clean up some of it plus remove all the code I am not using once it is ready for production.
But like I said, I am just stuck on this little thing with the header checkbox wanting to use it as a single point of selection.
Thanks everyone for helping out.

pjamrisk
11 Aug 2010, 11:08 PM
Darth,
After reading you last post again, I realised that I am trying not to use

var rec = grid.getSelectionModel().getSelected();
The reason why was because I am not trying to select the row, but actually edit the cell. In this case the checkboxes individually or collectively, so it gets marked for update. The reason why is that when I do the submit, then a PUT happens and then all is set to update the database table(s).
I tried that initially and it was simply not working, or if it was it was with some weird error, and I believe my posted code above actually has that little bit commented out actually....

aconran
12 Aug 2010, 11:58 AM
Did you get this working? Where does the error occur?

pjamrisk
15 Aug 2010, 7:50 PM
Hey Aaron,
No, I have not been able to make it work yet, and the weekend caught up with me before I got to your post, so my apologies for the late reply.
The error occurs when I try to grab the index of each element in the grid. Since I am at the header, I can see the header element, but when I instanciate the index variable, it returns false (I been trying for several hours to see how to call the right variable).
I been trying to understand how mainBody and innerHd differ in that sense, and why I am not able to see the grid as an entire element, but so far innerHd is a separate entity from mainBody, or at least that is how it seems to work.

So far this is what I got on code, and my index variable returns false:



Ext.ux.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;

this.grid.on('render', function(){
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;

this.el = new E(el);
this.mainWrap = new E(cs[0]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(this.innerHd).on('click', this.onHdMouseDown, this); // This is for the header.
}, this);
},

onMouseDown : function(e, t){
if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
//alert(t.className);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

// private
onHdMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
//this.clearSelections(); //Need to replace with an internal function to clear all selections.
// record.set(this.dataIndex, !record.data[this.dataIndex]);

}else{
hd.addClass('x-grid3-hd-checker-on');
//this.selectAll(); //Need to replace with internal function to have all selections.
// if(Ext.fly(a).className == (this.createId())){
var a = HTMLDivElement;
a.className = 'x-grid3-check-col x-grid3-cc-check';
alert(a.className);
var index = this.grid.getView().findRowIndex(a);
alert(index); //-------> this returns false!!!
var record = this.grid.store.getAt(index);
alert(record);
var len = this.grid.store.getCount();
alert(Ext.fly(this.grid.getView().findRowIndex(a.className)));
for(var i = index; i < len; i++){
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
// }
}
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}">&#160;</div>', v ? '-on' : '', this.createId());
},

createId : function(){
return 'x-grid3-cc-' + this.id;
}


Any suggestions are greatly appreciated. I will keep trying tonight to work on it and see how far I get into it.
Thanks for all the support.
Patrick

pjamrisk
15 Aug 2010, 8:15 PM
Hey Aaron,
My other post did not go through for some reason. Anyways, I preety much said that the weekend caught up with me and did not had a chance to reply back on the post.
I still have problems with the extension, and the error I am getting is that my index variable returns false.
Basically the innerHd and mainBody elements of the GridView are different from each other, and I believe this to be the main issue for me to try to access the rows generated inside the grid.

Anyways, here is my code so far for CheckCoulumn.js



Ext.ux.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;

this.grid.on('render', function(){
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;

this.el = new E(el);
this.mainWrap = new E(cs[0]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(this.innerHd).on('click', this.onHdMouseDown, this); // This is for the header.
}, this);
},

onMouseDown : function(e, t){
if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
//alert(t.className);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

// private
onHdMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
//this.clearSelections(); //Need to replace with an internal function to clear all selections.
// record.set(this.dataIndex, !record.data[this.dataIndex]);

}else{
hd.addClass('x-grid3-hd-checker-on');
//this.selectAll(); //Need to replace with internal function to have all selections.
// if(Ext.fly(a).className == (this.createId())){
var a = HTMLDivElement;
a.className = 'x-grid3-check-col x-grid3-cc-check';
alert(a.className);
var index = this.grid.getView().findRowIndex(a);
alert(index);
var record = this.grid.store.getAt(index);
alert(record);
var len = this.grid.store.getCount();
alert(Ext.fly(this.grid.getView().findRowIndex(a.className)));
for(var i = index; i < len; i++){
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
// }
}
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}">&#160;</div>', v ? '-on' : '', this.createId());
},

createId : function(){
return 'x-grid3-cc-' + this.id;
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;


Any suggestions are appreciated. I will keep trying throughout the week and see how far I get.

Patrick

pjamrisk
15 Aug 2010, 10:01 PM
Hey Aaron,
No its not working yet. Sorry for the delayed reply.
So far I been able to just identify that innerHd and mainBody for the grid are 2 separate elements, and that there is giving me an error when I instanciate index as a variable.
The current error is that this index returns false, for what it does not select all elements inside the grid.

i'll post my updated code in a second.
Patrick

pjamrisk
15 Aug 2010, 10:04 PM
Ext.ux.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;

this.grid.on('render', function(){
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;

this.el = new E(el);
this.mainWrap = new E(cs[0]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(this.innerHd).on('click', this.onHdMouseDown, this); // This is for the header.
}, this);
},


onMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){

}

if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
//alert(t.className);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

// private
onHdMouseDown : function(e, t){
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
//this.clearSelections(); //Need to replace with an internal function to clear all selections.
// record.set(this.dataIndex, !record.data[this.dataIndex]);

}else{
hd.addClass('x-grid3-hd-checker-on');
//this.selectAll(); //Need to replace with internal function to have all selections.
// if(Ext.fly(a).className == (this.createId())){
var a = HTMLDivElement;
a.className = 'x-grid3-check-col x-grid3-cc-check';
alert(a.className);
var index = this.grid.getView().findRowIndex(a.className);
alert(index);
var record = this.grid.store.getAt(index);
alert(record);
var len = this.grid.store.getCount();
alert(Ext.fly(this.grid.getView().findRowIndex(a.className)));
for(var i = index; i < len; i++){
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
// }
}
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());
},

createId : function(){
return 'x-grid3-cc-' + this.id;
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn]

pjamrisk
16 Aug 2010, 8:22 PM
Wow, takes forever to get these posts through...
Anyways, I am still stuck. I can't access the grid elements.. I am going to try to instanciate it in a different manner with Ext.fly next and see if I can get somewhere with it. If I can't I am going to have to leave this open to suggestions for a while, because I need to move on to another project soon.
Thanks to those who replied back.
Patrick

darthwes
16 Aug 2010, 8:59 PM
OK, how does


Ext.ux.grid.CheckColumn = function (config) {
Ext.apply(this, config);
if (!this.id) {
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype = {
init: function (grid) {
this.grid = grid;

this.grid.on('render', function () {
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;

this.el = new E(el);
this.mainWrap = new E(cs[0]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(this.innerHd).on('click', this.onHdMouseDown, this); // This is for the header.
}, this);
},


onMouseDown: function (e, t) {
if (t.className == 'x-grid3-hd-checker') {

}

if (Ext.fly(t).hasClass(this.createId())) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
//alert(t.className);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

// private
onHdMouseDown: function (e, t) {
//i assume you fall into this if, i do not.
if (t.className == 'x-grid3-hd-checker') {
e.stopEvent();
//again, whatever floats your boat, i assume this works for you
var isChecked = Ext.fly(t.parentNode).hasClass('x-grid3-hd-checker-on');

var markFn = function (myDI, checked) {
return function (rec) {
rec.set(myDI, checked);
rec.commit();
};
}(this.dataIndex, isChecked);
this.grid.store.each(markFn);
}
},

renderer: function (v, p, record) {
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());
},

createId: function () {
return 'x-grid3-cc-' + this.id;
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;


work for you?

darthwes
16 Aug 2010, 9:01 PM
Yes, the moderation bit is quite silly. I've posted a solution for you to try. Of course it was moderated...Just keep checking, ugh...

pjamrisk
16 Aug 2010, 9:03 PM
Thanks darth, i'll wait for it this time. It makes me look like a fool when there are 3 posts saying the same thing....

pjamrisk
20 Aug 2010, 12:55 AM
Hey Darth,
your code actually worked great. I had to make a small modification to it, but I still have some small issues out that I am working around.
For example, after selecting all the records, if I individually deselect some, the post still grabs all the records. Another problem, if I want to deselect the records, the only way I was able to accomplish it was by reloading the store (not the best way, but it works for me right now, of course until they start loading more than 150 records at a time and then the thing slows down).

I still have room to implement other stuff, but if anyone has a better approach than this one, I am sure they can post their comments here. In the meantime I will get by with it, but I will definitely work on it to polish the small bugs left to have it available to anyone else wanting to use it.

Again thanks!
Patrick
I have posted my code, so it should pop-up here eventually.

pjamrisk
20 Aug 2010, 1:05 AM
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.CheckColumn
* @extends Object
* GridPanel plugin to add a column with header and check boxes to a grid.
* <p>Example usage:</p>
* <pre><code>
// create the column
var checkColumn = new Ext.grid.CheckColumn({
//Make sure to have this header here if you want to have the checkbox appear on the header
//and be able to select/deselect all records in the grid.
header: '<div class="x-grid3-hd-checker">&#160;</div>',
dataIndex: 'indoor',
id: 'check',
width: 55
});

// add the column to the column model
var cm = new Ext.grid.ColumnModel([{
header: 'Foo',
...
},
checkColumn
]);

// create the grid
var grid = new Ext.grid.EditorGridPanel({
...
cm: cm,
plugins: [checkColumn], // include plugin
...
});
* </code></pre>
* In addition to storing a Boolean value within the record data, this
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
* a column.
*/
Ext.ux.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;
this.el = new E(el);
this.mainWrap = new E(cs[0]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
Ext.fly(this.innerHd).on('click', this.onHdMouseDown, this); // This is for the header.
}, this);
},


onMouseDown : function(e, t){
if(Ext.fly(t).hasClass(this.createId())){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
//alert(t.className);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

// private
/**
* This class is an extension to the CheckColumn.js file that allows us to select all records
* and mark them as edited for an insertion or update on a editable grid. There is still a bug if you
* deselect single records after the complete selection. This code will be expanded as I work
* with it on my project, and iron out those small instances giving trouble.
* Credit goes to darthwes for helping me on this implementation.
* 08/20/2010
*/
onHdMouseDown : function(e, t){
var hd = Ext.fly(t.parentNode);
var isChecked = hd.addClass('x-grid3-hd-checker-on');
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var markFn = function (myDI, checked) {
return function (rec) {
rec.set(myDI, checked);
//rec.commit();
};
}(this.dataIndex, isChecked);
this.grid.store.each(markFn);
}
if(hd.hasClass('x-grid3-hd-checker-on')){
hd.removeClass('x-grid3-hd-checker-on');
this.grid.store.reload();
}

},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}">&#160;</div>', v ? '-on' : '', this.createId());
},

createId : function(){
return 'x-grid3-cc-' + this.id;
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;

TonyBones
20 Sep 2010, 7:55 PM
This is killer! I was actually working on the same exact thing today, was going the same direction as you then decided I'd check the forums before I got too far into. Great work!

I have 3 concerns though:
1) Checking all seems to run a little slow, I'm in Firefox, can't bring myself to check in IE8 which is our target browser. And I only have 20 records on a page and since I'm doing all sorting/paging/grouping on the server side there is only ever 20 records at most in the store.

2) Unchecking all brings up the loading overlay..anyway around this? I haven't had a chance to muck with it yet.

3) the big one, when clicking the other header's menu button it brings up the loading overlay as well. This looks really bad.

I'm gonna try to work on these tomorrow I think. See what I can fix.

PS - also noticed the checkbox in the header is a little mis-aligned with the rest of the checkboxes. I'll have to look into the css involved.

pjamrisk
20 Sep 2010, 8:31 PM
Dear Tony,
Yes, I ran onto the same problems, but we had to deploy this ASAP and have not had a chance to come back and keep working on it yet, but I will have to eventually. I will try to assist as much as I can while you work on it, simply post back!
Anyways,
The header missalignment is definetly a css thing. If you unlock the row you will see both checkboxes, and when you click on it, only the checked one stays. I was unable to figure that out, so I shirnked the field as a quick fix.
The checking was not slow on my side, I wonder if it is because you are running a remote store. I populated the store first before the checkboxes. The other issue left, you can't unclick single rows (another issue left to fix).
I did not try this on IE8, but I don't see why it should not work, is the same extension from the comunity pages.
Now the unchecking I am not sure how to fix. Darth was kind enough to help me figure out how to get it working for now, and then I was messing with the code to make it work on my side. So any contributions to it will be great!
Again, if there is anything I can help with, just drop a reply.

Patrick.

TonyBones
20 Sep 2010, 8:36 PM
well i couldn't pull myself away, I fixed #2 and #3 from above. But now checking all and unchecking all run a little slow, takes about 1.5 secs to check 20 rows...I can't believe that. Another thing to track down.



onHdMouseDown: function (e, t) {
if ( this.checkAll && t.className == 'x-grid3-hd-checker') {
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if (isChecked) {
hd.removeClass('x-grid3-hd-checker-on');
} else {
hd.addClass('x-grid3-hd-checker-on');
}
var markFn = function (myDI, checked) {
return function (rec) {
rec.set(myDI, checked);
};
} (this.dataIndex, !isChecked);
this.grid.store.each(markFn);
}
},

I defined a config property called this.checkAll, I'm using this to enable the header checkbox from the end user side.

EDIT: Yea, runs much faster in IE8...go figure.
EDIT2: My update above fixes the issue with unchecking single rows as well.

pjamrisk
20 Sep 2010, 8:41 PM
that makes sense. I really did not thought about that. But how did you do the call on the client code?
Maybe I can't see it right now since I am thinking java and mysql :P

TonyBones
20 Sep 2010, 8:55 PM
Here's my complete code:



/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.CheckColumn
* @extends Object
* GridPanel plugin to add a column with check boxes to a grid.
* <p>Example usage:</p>
* <pre><code>
// create the column
var checkColumn = new Ext.grid.CheckColumn({
header: 'Indoor?',
dataIndex: 'indoor',
id: 'check',
width: 55
});

// add the column to the column model
var cm = new Ext.grid.ColumnModel([{
header: 'Foo',
...
},
checkColumn
]);

// create the grid
var grid = new Ext.grid.EditorGridPanel({
...
cm: cm,
plugins: [checkColumn], // include plugin
...
});
* </code></pre>
* In addition to storing a Boolean value within the record data, this
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
* a column.
*/
Ext.ux.grid.CheckColumn = function (config) {
Ext.apply(this, config);
if (!this.id) {
this.id = Ext.id();
}
if (this.checkAll) {
this.header = '<div class="x-grid3-hd-checker"> </div>';
}
// set hardcoded configs
this.hideable = false;
this.resizable = false;
this.fixed = true;
this.sortable = false;
this.menuDisabled = true;
this.width = 25;

this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype = {
init: function (grid) {
this.grid = grid;
this.grid.on('render', function () {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);

// setup checkAll header
if (this.checkAll) {
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;
this.el = new E(el);
this.mainWrap = new E(cs[0]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
Ext.fly(this.innerHd).on('click', this.onHdMouseDown, this); // This is for the header.
}
}, this);
},

onHdMouseDown: function (e, t) {
if ( this.checkAll && t.className == 'x-grid3-hd-checker') {
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if (isChecked) {
hd.removeClass('x-grid3-hd-checker-on');
} else {
hd.addClass('x-grid3-hd-checker-on');
}
var markFn = function (myDI, checked) {
return function (rec) {
rec.set(myDI, checked);
};
} (this.dataIndex, !isChecked);
this.grid.store.each(markFn);
}
},

onMouseDown: function (e, t) {
if (Ext.fly(t).hasClass(this.createId())) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

renderer: function (v, p, record) {
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());
},

createId: function () {
return 'x-grid3-cc-' + this.id;
},

checkAll: function (check) {
alert('checking all');
this.grid.store.each(function (rec) {
alert(this.id + ' / ' + this.dataIndex + ' / ' + check);
rec.set(this.id, check);
}
);
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
And I use via the client side like so:



// the check column is created using a custom plugin
var checkColumn = new Ext.grid.CheckColumn({
id: 'checkColumn',
checkAll: true,
dataIndex: 'checkbox'
});
Not even sure if you need to set dataIndex yet.

Found one more problem:
Might only manifest when using a remote store. When I resort/regroup/page the checkboxes clear (which is ok IMHO) but the header checkbox stays checked if you had it checked. I'm guessing this should be easy to fix, register an event on the store's refresh event and just clear the header checkbox.

TonyBones
20 Sep 2010, 9:24 PM
Here's my code for completeness:



/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.CheckColumn
* @extends Object
* GridPanel plugin to add a column with check boxes to a grid.
* <p>Example usage:</p>
* <pre><code>
// create the column
var checkColumn = new Ext.grid.CheckColumn({
header: 'Indoor?',
dataIndex: 'indoor',
id: 'check',
width: 55
});

// add the column to the column model
var cm = new Ext.grid.ColumnModel([{
header: 'Foo',
...
},
checkColumn
]);

// create the grid
var grid = new Ext.grid.EditorGridPanel({
...
cm: cm,
plugins: [checkColumn], // include plugin
...
});
* </code></pre>
* In addition to storing a Boolean value within the record data, this
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
* a column.
*/
Ext.ux.grid.CheckColumn = function (config) {
Ext.apply(this, config);
if (!this.id) {
this.id = Ext.id();
}
if (this.checkAll) {
this.header = '<div class="x-grid3-hd-checker"> </div>';
}

// set hardcoded configs
this.hideable = false;
this.resizable = false;
this.fixed = true;
this.sortable = false;
this.menuDisabled = true;
this.width = 25;

this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype = {
init: function (grid) {
this.grid = grid;
this.grid.on('render', function () {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);

// setup checkAll header
if (this.checkAll) {
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;
this.el = new E(el);
this.mainWrap = new E(cs[0]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
Ext.fly(this.innerHd).on('click', this.onHdMouseDown, this); // This is for the header.
}
}, this);
},

onHdMouseDown: function (e, t) {
if (this.checkAll && t.className == 'x-grid3-hd-checker') {
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if (isChecked) {
hd.removeClass('x-grid3-hd-checker-on');
} else {
hd.addClass('x-grid3-hd-checker-on');
}
var markFn = function (myDI, checked) {
return function (rec) {
rec.set(myDI, checked);
};
} (this.dataIndex, !isChecked);
this.grid.store.each(markFn);
}
},

onMouseDown: function (e, t) {
if (Ext.fly(t).hasClass(this.createId())) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

renderer: function (v, p, record) {
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());
},

createId: function () {
return 'x-grid3-cc-' + this.id;
},

checkAll: function (check) {
alert('checking all');
this.grid.store.each(function (rec) {
alert(this.id + ' / ' + this.dataIndex + ' / ' + check);
rec.set(this.id, check);
}
);
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
And I use via the client side like so:



// the check column is created using a custom plugin
var checkColumn = new Ext.grid.CheckColumn({
id: 'checkColumn',
checkAll: true,
dataIndex: 'checkbox'
});
Not even sure if you need to set dataIndex yet.

Found one more problem:
Might only manifest when using a remote store. When I resort/regroup/page the checkboxes clear (which is ok IMHO) but the header checkbox stays checked if you had it checked. I'm guessing this should be easy to fix, register an event on the store's refresh event and just clear the header checkbox.

TonyBones
21 Sep 2010, 7:56 AM
I posted all of my code last night, but i think it has to go through a moderator...so its still not here :/

TonyBones
21 Sep 2010, 8:47 AM
alright! I've got the css alignment fixed and a bunch of other stuff fixed. So I'll clean up the code and do a big post sometime today :D

pjamrisk
21 Sep 2010, 10:31 AM
Awesome! I'll see it when it comes over. I wonder why it works faster on IE8 for you.

TonyBones
21 Sep 2010, 10:51 AM
Here's my current solution. Only thing left to fix is the checkAll box staying checked after a server-side grid refresh.

CheckColumn.js


/*!
* Ext JS Library 3.2.2
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.CheckColumn
* @extends Object
* GridPanel plugin to add a column with check boxes to a grid.
* <p>Example usage:</p>
* <pre><code>
// create the column
var checkColumn = new Ext.grid.CheckColumn({
checkAll: true,
dataIndex: 'checkbox'
});

// add the column to the column model
var cm = new Ext.grid.ColumnModel([{
header: 'Foo',
...
},
checkColumn
]);

// create the grid
var grid = new Ext.grid.EditorGridPanel({
...
cm: cm,
plugins: [checkColumn], // include plugin
...
});
* </code></pre>
* Config Props
* id : String (Dfaults: 'checkColumn' and as such Ext base its css class on it)
* checkAll : Boolean (Defaults: false)
*
* In addition to storing a Boolean value within the record data, this
* class toggles a css class between <tt>'x-grid3-check-col'</tt> and
* <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
* a column.
*/
Ext.ux.grid.CheckColumn = function (config) {
Ext.apply(this, config);
if (!this.id) {
this.id = 'checkColumn';
//this.id = Ext.id();
}
if (this.checkAll) { // you can still set the 'header' config if you disable checkAll (off by default)
this.header = '<div class="x-grid3-hd-checker"> </div>';
}

// set hardcoded configs
this.hideable = false;
this.resizable = true;
this.fixed = true;
this.sortable = false;
this.menuDisabled = true;
this.width = 25;

this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.grid.CheckColumn.prototype = {
init: function (grid) {
this.grid = grid;
this.grid.on('render', function () {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);

// setup checkAll header
if (this.checkAll) {
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;
this.el = new E(el);
this.mainWrap = new E(cs[0]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
this.innerHd = this.mainHd.dom.firstChild;
Ext.fly(this.innerHd).on('click', this.onHdMouseDown, this); // This is for the header.
}
}, this);
},

onHdMouseDown: function (e, t) {
if (this.checkAll && t.className == 'x-grid3-hd-checker') {
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if (isChecked) {
hd.removeClass('x-grid3-hd-checker-on');
} else {
hd.addClass('x-grid3-hd-checker-on');
}
var markFn = function (myDI, checked) {
return function (rec) {
rec.set(myDI, checked);
};
} (this.dataIndex, !isChecked);
this.grid.store.each(markFn);
}
},

onMouseDown: function (e, t) {
if (Ext.fly(t).hasClass(this.createId())) {
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

renderer: function (v, p, record) {
p.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v ? '-on' : '', this.createId());
},

createId: function () {
return 'x-grid3-cc-' + this.id;
},

checkAll: function (check) {
alert('checking all');
this.grid.store.each(function (rec) {
alert(this.id + ' / ' + this.dataIndex + ' / ' + check);
rec.set(this.id, check);
}
);
}
};

// register ptype
Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);

// backwards compat
Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
My theme's new CSS:


.x-grid3-hd-checkColumn .x-grid3-hd-checker {
background-position:0px 1px;
}

.x-grid3-hd-checkColumn.x-grid3-hd-checker-on .x-grid3-hd-checker {
background-position:-25px 1px;
}
* NOTE: this is tied to the columns 'id' config
This is what fixes the css mis-alignment.

Usage:


// the check column is created using a custom plugin
var checkColumn = new Ext.grid.CheckColumn({
checkAll: true,
dataIndex: 'checkbox'
});
*NOTE: see the js file docs for more information