PDA

View Full Version : Ext JS, checkbox.



Hackedia
31 Jul 2014, 6:29 AM
Hi ! Im a beginner and, for training, i need to retake a VisualForce page coded on ExtJS.
My mission is to put a checkbox on the "ST" column that allow myself to check all of the checkbox on the column on same time when he is checked.


This is the left part of my board :


49808


This is on the "ST" case where i need a checkbox which serve to check all of the checkbox of the column.

This is a part of the full code who represent the 10 column of the board code, if you need more, i can put it wholly :


ds = Ext.create("App.DemoScheduler", {
title : 'DETAIL ESTIMATIF',
//autoScroll : false,
allowOverlap : false,
constrainDragToResource:true,
maxWidth : '100%',//1030,
height : 450,
frame : true,
renderTo : 'my-div',
resourceStore : resourceStore,
eventStore : eventStore,
dateFormat : 'Y-m-d',
viewPreset : 'weekAndDayLetter',
eventBarTextField: 'Commentaire',
//features : [summaryF],//groupingFeature],
features: [{
ftype: 'summary'
}],
// BARRE D'OPTION, (AJOUTER, IMPORTER, PAR DEFAUT, VUE 1, ETC ... ) \|/
tbar: [
{
iconCls: 'icon-previous',
scale: 'medium',
scope : this,
handler: function () {
ds.shiftPrevious();
ds1.shiftPrevious();
}
},
{
text : 'Ajouter',
scope : this,
handler : function() {
document.body.innerHTML += "<link rel=\"stylesheet\" type=\"text/css\" class=\"user\" href=\"/resource/1328252098000/PopIn/Style1.css\">";
createPopIn2('apex/VFP01AjouterLigneDeDetail?isdtp=vw&Id={!Budget__c.Id}&typeRec=1a',400,1);
}
},
{
text : 'Importer depuis une commande',
scope : this,
handler : function() {
document.body.innerHTML += "<link rel=\"stylesheet\" type=\"text/css\" class=\"user\" href=\"/resource/1328252098000/PopIn/Style1.css\">";
createPopIn('apex/VFP01ImporterDepuisUnDevis?isdtp=vw&Id={!Budget__c.Id}',400,700,1);
}
},


{
xtype : 'datefield',
labelWidth: 35,
width: 145,
id : "aller_a",
name : 'aller_a',
fieldLabel : 'Aller à',
value : new Date('{!Budget__c.Date_de_debut__c}'),
},
{
text: 'Ok',
toggleGroup : 'presets',
enableToggle : true,
scope : this,
handler: function () {
var aller_a_date = jQuery('#aller_a-inputEl').val();
var res_date = aller_a_date.split('/');
var jour = res_date[0];
var mois = res_date[1] -1;
var annee = res_date[2];


var date_choisi = new Date(annee, mois, jour);
ds.switchViewPreset('weekAndDayLetter',date_choisi,Sch.util.Date.add(date_choisi,Sch.util.Date.WEEK,3));
ds1.switchViewPreset('weekAndDayLetter',date_choisi,Sch.util.Date.add(date_choisi,Sch.util.Date.WEEK,3));
}
},
{
text : 'Par Défaut',
toggleGroup : 'presets',
enableToggle : true,
iconCls : 'icon-calendar',
handler : function() {
ds.switchViewPreset('weekAndDayLetter',start,Sch.util.Date.add(start,Sch.util.Date.WEEK, 3));
ds1.switchViewPreset('weekAndDayLetter',start,Sch.util.Date.add(start,Sch.util.Date.WEEK, 3));
}
},
{
text : 'Vue 1',
toggleGroup : 'presets',
enableToggle : true,
iconCls : 'icon-calendar',
handler : function() {
ds.switchViewPreset('weekAndDayLetter');
ds1.switchViewPreset('weekAndDayLetter');
}
},
{
text : 'Vue 2',
toggleGroup : 'presets',
iconCls : 'icon-calendar',
handler : function() {
ds.switchViewPreset('monthAndYear');
ds1.switchViewPreset('monthAndYear');
}
},


{
iconCls: 'icon-next',
scale: 'medium',
scope : this,
handler: function () {
ds.shiftNext();
ds1.shiftNext();
}
}
],
// BARRE D'OPTION, (AJOUTER, IMPORTER, PAR DEFAUT, VUE 1, ETC ... ) /|\
// NOM DES COLONNES \|/
columns: [

{
xtype : 'actioncolumn',

sortable : false,
align : 'center',
tdCls : 'sch-valign',
width : 25,
header : 'Action',
position : 'left',
items: [
{
iconCls : 'delete',
tooltip : 'Supprimer',
scope : this,
handler : function (view, rowIndex, colIndex) {
//var resourceId = this.resourceStore.getAt(rowIndex).get('Id'),
//events = this.getSchedulingView().getEventsInView(),
toRemove = [];

toRemove.push(resourceStore.getAt(rowIndex));
//toRemove.push(this.resourceStore1.getAt(rowIndex));




//events.each(function(r) {
//if (resourceId === r.get('ResourceId')) {
//toRemove.push(r);
//}
// });

resourceStore.remove(toRemove);
}
}
]
},
{ header: 'O', sortable: true, width: 30, dataIndex: 'OrdreLigne', field: new Ext.form.field.Number(), align:'center', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0') },
//{ header: 'Poste Budget', sortable: true, width: 40, dataIndex: 'PosteBudget', align:'center' },
{ header: 'Poste Budget', sortable: true, width: 40, dataIndex: 'PosteBudget', field: new Ext.form.field.ComboBox({
store :postes,//[{!posteBudgetString}],
displayField: 'PName',
valueField: 'PId',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
selectOnFocus: true
})
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return '';

}
return value;
}
},
{ header: 'Code', sortable: true, width: 40, dataIndex: 'Code', field: new Ext.form.field.Text(), align:'center'},
{ header: 'Désignation', sortable: true, dataIndex: 'Designation',width:110, editor: 'textfield', align:'left', style:{"text-align": 'center' },summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format('<b>Total</b>', value, value !== 1 ? 's' : '');
}},
{
xtype: 'checkcolumn',
header: 'ST',
dataIndex: 'ST',
width: 30,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return '<input type="hidden" name="mycheckbox" disabled = "disabled" />';
}
if (value) {
return '<input type="checkbox" name="mycheckbox" checked="checked" />';
}
else {
return '<input type="checkbox" name="mycheckbox" />';
}
}

},
{ header: 'U', sortable: true, width: 35, dataIndex: 'Unite', field: new Ext.form.field.Text(),align:'center'
//,disabled:true
//renderer: function(value, metaData, record, rowIndex, colIndex, store) {
//return record.data.Unite;
//}

,renderer: function(value,metaData,record){
if (record.get('Chp')){
return null;
}
return value;
}

},
{ header: 'P.U.', sortable: true, width: 60, dataIndex: 'PrixUnitaire', field: new Ext.form.field.Number(), align:'right', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0.00')
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return metaData.style='display:none';
}
return Ext.util.Format.number(value,'0.00');
//Recognized properties are: tdCls, tdAttr, and style.
}
},
{ header: 'Q Marche', sortable: true, width: 60, dataIndex: 'QuantiteMarche', field: new Ext.form.field.Number(), align:'right', style:{"text-align": 'center'},renderer: Ext.util.Format.numberRenderer('0.00'),summaryType: 'sum'
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return '';
}
return Ext.util.Format.number(value,'0.00');
}
,
summaryRenderer: function(value, summaryData, QuantiteMarche) {
var test=0;
resourceStore.each(function(rec){
test = test + (rec.get('PrixUnitaire') * rec.get('QuantiteMarche'));
});
//test=test-value;
//return test;
return Ext.util.Format.number(test,'0.00');
//return Ext.String.format('{1}<b>Total</b>{0}', test, QuantiteMarche);
}
},
{ header: 'Q Previs', sortable: true, width: 60, dataIndex: 'QuantitePrev', field: new Ext.form.field.Number(), align:'right', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0.00'),summaryType: 'sum'
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return '';
}
return Ext.util.Format.number(value,'0.00');
}
,
summaryRenderer: function(value, summaryData, QuantiteMarche) {
var test=0;
resourceStore.each(function(rec){
test = test + (rec.get('PrixUnitaire') * rec.get('QuantitePrev'));
});
return Ext.util.Format.number(test,'0.00');
}
}
, { header: 'Cadence', hidden: true, sortable: true, width: 60, dataIndex: 'Cadence', field: new Ext.form.field.Number(), align:'right', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0.00')
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return metaData.style='display:none';
}
return Ext.util.Format.number(value,'0.00');
//Recognized properties are: tdCls, tdAttr, and style.
}
}
, { header: 'Jours', hidden: true, sortable: true, width: 60, dataIndex: 'Jours', align:'right', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0.00')
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return metaData.style='display:none';
}
return Ext.util.Format.number(value,'0.00');
}
}


],
// NOM DES COLONNES /|\
rowHeight : 26,
startDate : start,
endDate : Sch.util.Date.add(start,Sch.util.Date.WEEK, 3),


onEventCreated : function(newEventRecord) {
// Overridden to provide some default values
//newEventRecord.set('Subject', 'Call');
//newEventRecord.set('Location', 'Local office');
newEventRecord.set('Quantite', '1');
newEventRecord.set('EventType', 'Plan');
},
tooltipTpl: new Ext.XTemplate(
'<dl class="eventTip">',
'<dt class="icon-clock">Date de début</dt><dd>{[Ext.Date.format(values.StartDate, "d-m-Y")]}</dd>',
'<dt class="icon-clock">Date de Fin</dt><dd>{[Ext.Date.format(values.EndDateG, "d-m-Y")]}</dd>',
'<dt class="icon-task">Commentaire</dt><dd>{Commentaire}</dd>',
//'<dt class="icon-clock">Date de FinG</dt><dd>{[Ext.Date.format(values.EndDateG, "d-m-Y")]}</dd>',
//'<dt class="icon-clock">Date de FinG</dt><dd>{[Ext.Date.format(EndDateG, "d-m-Y")]}</dd>', new Date().add(rs[0].get('EndDate').DAY, -1);
//'<dt class="icon-task">Quantite</dt><dd>{Quantite}</dd>',
'</dl>'
).compile(),
tipCfg : {cls: 'sch-tip', showDelay: 1000, hideDelay: 0, autoHide: true, anchor: 'b',width: Ext.isChrome ? 200 : undefined},
//tipCfg : {cls : 'sch-tip', showDelay:50, autoHide : true, anchor : 'b'},
viewConfig : {
getRowClass : function(resourceRecord) {
if (resourceRecord.get('Chp')) {
return 'unavailable';
}
return '';
}
},
stateId: '{!Budget__c.id}AAA', // this is unique state ID
stateful: true, // state should be preserved
stateEvents: ['columnresize', 'columnmove', 'show', 'hide' /*,d more events here as suits you*/], // which event should cause store state
listeners : {
beforedragcreate : function(s, resource) {
if (resource.get('Chp')) {
Ext.Msg.alert('Erreur', "Vous ne pouvez pas créer des périodes pour les lignes de type chapitre");
return false;
}
},
beforeedit: function(editor, e, eOpts) {
var grid = Ext.getCmp('gridId'); // or e.grid
if (e.record.data.Chp &&(e.field =='QuantitePrev'||e.field =='QuantiteMarche'||e.field =='PosteBudget'||e.field =='PrixUnitaire'||e.field =='Unite'||e.field =='ST')) {
e.cancel = true; //not allowed to edit
} else {
e.cancel = false; //may edit the record
}
},
eventcontextmenu : this.onEventContextMenu,
beforetooltipshow : this.beforeTooltipShow,
//beforeeventresize : this.allowModify,
//beforeeventdrag : this.allowModify,
scope : this

}
});


Thank you in advance and sorry for potential mistakes that i have made (Im French) ^^"

skirtle
31 Jul 2014, 4:04 PM
Ext.selection.CheckboxModel does something similar. If I were you I'd start by studying that class very carefully.

Here are two ways to get a checkbox into the header:

8b2

Hackedia
1 Aug 2014, 7:01 AM
Hi skirtle, thanks for you reply !

What im looking for, its a way to check all of the cases of the column "ST" with a button or a checkbox,
the problems is this code, i don't know how it really works ^^.

I have changed my code to have a button "Check all ST cases" line 24 and i want to use it but i don't know how this button can check all of the "ST" column's checkbox.

Thanks, now i know how to create a checkbox, but the column does not work like youre exemple (if i understand well ^^) cause the lines are create dynamicallly, not manually (i don't know if you see what i mean ^^).

The "ST" 's column is line 33.

This is the board with the "Check all ST cases" button and the "ST" column :
49827

This code contains only the "Check all ST cases" button and the "ST" column :



Ext.create("App.DemoScheduler", {
title : 'DETAIL ESTIMATIF',
allowOverlap : false,
constrainDragToResource:true,
maxWidth : '100%',//1030,
height : 450,
frame : true,
resizable : true,
resizeHandles : 's',
renderTo : 'my-div',
resourceStore : resourceStore,
eventStore : eventStore,
dateFormat : 'Y-m-d',
viewPreset : 'weekAndDayLetter',
eventBarTextField: 'Commentaire',
//features : [summaryF],//groupingFeature],
features: [{
ftype: 'summary'
}],

tbar: [
{
text : 'Check all ST cases', //The"Check all ST cases" button line 24
scope : this,
handler : function() {
}
}
}
],


columns: [
{
xtype: 'checkcolumn', //The "ST" column line 33
header: 'ST',
dataIndex: 'ST',
width: 30,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return '<input type="hidden" name="mycheckbox" disabled = "disabled" />';
}
if (value) {
return '<input type="checkbox" name="mycheckbox" checked="checked" />';
}
else {
return '<input type="checkbox" name="mycheckbox" />';
}
}

},

{ header: 'Cadence', hidden: true, sortable: true, width: 60, dataIndex: 'Cadence', field: new Ext.form.field.Number(), align:'right', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0.00')
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return metaData.style='display:none';
}
return Ext.util.Format.number(value,'0.00');
//Recognized properties are: tdCls, tdAttr, and style.
}
}
, { header: 'Jours', hidden: true, sortable: true, width: 60, dataIndex: 'Jours', align:'right', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0.00')
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return metaData.style='display:none';
}
return Ext.util.Format.number(value,'0.00');
}
}


],
rowHeight : 26,
startDate : start,
endDate : Sch.util.Date.add(start,Sch.util.Date.WEEK, 3),


onEventCreated : function(newEventRecord) {
// Overridden to provide some default values
//newEventRecord.set('Subject', 'Call');
//newEventRecord.set('Location', 'Local office');
newEventRecord.set('Quantite', '1');
newEventRecord.set('EventType', 'Plan');
},
tooltipTpl: new Ext.XTemplate(
'<dl class="eventTip">',
'<dt class="icon-clock">Date de début</dt><dd>{[Ext.Date.format(values.StartDate, "d-m-Y")]}</dd>',
'<dt class="icon-clock">Date de Fin</dt><dd>{[Ext.Date.format(values.EndDateG, "d-m-Y")]}</dd>',
'<dt class="icon-task">Commentaire</dt><dd>{Commentaire}</dd>',
//'<dt class="icon-clock">Date de FinG</dt><dd>{[Ext.Date.format(values.EndDateG, "d-m-Y")]}</dd>',
//'<dt class="icon-clock">Date de FinG</dt><dd>{[Ext.Date.format(EndDateG, "d-m-Y")]}</dd>', new Date().add(rs[0].get('EndDate').DAY, -1);
//'<dt class="icon-task">Quantite</dt><dd>{Quantite}</dd>',
'</dl>'
).compile(),
tipCfg : {cls: 'sch-tip', showDelay: 1000, hideDelay: 0, autoHide: true, anchor: 'b',width: Ext.isChrome ? 200 : undefined},
//tipCfg : {cls : 'sch-tip', showDelay:50, autoHide : true, anchor : 'b'},
viewConfig : {
getRowClass : function(resourceRecord) {
if (resourceRecord.get('Chp')) {
return 'unavailable';
}
return '';
}
},
stateId: '{!Budget__c.id}AAA', // this is unique state ID
stateful: true, // state should be preserved
stateEvents: ['columnresize', 'columnmove', 'show', 'hide' /*,d more events here as suits you*/], // which event should cause store state
listeners : {
beforedragcreate : function(s, resource) {
if (resource.get('Chp')) {
Ext.Msg.alert('Erreur', "Vous ne pouvez pas créer des périodes pour les lignes de type chapitre");
return false;
}
},
beforeedit: function(editor, e, eOpts) {
var grid = Ext.getCmp('gridId'); // or e.grid
if (e.record.data.Chp &&(e.field =='QuantitePrev'||e.field =='QuantiteMarche'||e.field =='PosteBudget'||e.field =='PrixUnitaire'||e.field =='Unite'||e.field =='ST')) {
e.cancel = true; //not allowed to edit
} else {
e.cancel = false; //may edit the record
}
},
eventcontextmenu : this.onEventContextMenu,
beforetooltipshow : this.beforeTooltipShow,
//beforeeventresize : this.allowModify,
//beforeeventdrag : this.allowModify,
scope : this

}
});


Thanks for your help !

skirtle
1 Aug 2014, 7:10 PM
The checkboxes are just a reflection of the data in the models (records) of the store. The code for Ext.grid.column.CheckColumn is well worth studying to better appreciate this. To change the check value you just update the records.

I've implemented 'Check all' and 'Uncheck all' slightly differently to demonstrate how you can improve the performance of bulk updates.

8cq

Hackedia
3 Aug 2014, 11:24 PM
Now, it works !
Thanks for you reply Skirtle !

This is the result :




Ext.create("App.DemoScheduler", {
title : 'DETAIL ESTIMATIF',
//autoScroll : false,
allowOverlap : false,
constrainDragToResource:true,
maxWidth : '100%',//1030,
height : 450,
frame : true,
resizable : true,
resizeHandles : 's',
renderTo : 'my-div',
resourceStore : resourceStore,
eventStore : eventStore,
dateFormat : 'Y-m-d',
viewPreset : 'weekAndDayLetter',
eventBarTextField: 'Commentaire',
//features : [summaryF],//groupingFeature],
features: [{
ftype: 'summary'
}],

tbar: [
{
text : 'Check all ST cases',
scope : this,
handler : function() {
<!-- New -->
var grid = this.up('grid'),
store = grid.setStore();
store.each(function(record) {
record.set('ST', true);
});
<!-- New -->
}
}


],


columns: [
{
xtype: 'checkcolumn',
header: 'ST',
dataIndex: 'ST',
//cls: 'x-column-header-checkbox',
//text: '<div class="x-grid-checkcolumn x-grid-checkcolumn-checked"></div>'
width: 30,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return '<input type="hidden" name="mycheckbox" disabled = "disabled" />';
}

/*if (test_ST > 0) {
test_ST--;
value = true;
if (test_ST == 0) {
test_ST_bool = false;
}
}*/

if (value) {
return '<input type="checkbox" name="mycheckbox" checked="checked" />';
}
else {
return '<input type="checkbox" name="mycheckbox" />';
}
}

},

{ header: 'Cadence', hidden: true, sortable: true, width: 60, dataIndex: 'Cadence', field: new Ext.form.field.Number(), align:'right', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0.00')
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return metaData.style='display:none';
}
return Ext.util.Format.number(value,'0.00');
//Recognized properties are: tdCls, tdAttr, and style.
}
}
, { header: 'Jours', hidden: true, sortable: true, width: 60, dataIndex: 'Jours', align:'right', style:{"text-align": 'center'}, renderer: Ext.util.Format.numberRenderer('0.00')
,renderer: function(value,metaData,record){
if (record.get('Chp')){
return metaData.style='display:none';
}
return Ext.util.Format.number(value,'0.00');
}
}


],
rowHeight : 26,
startDate : start,
endDate : Sch.util.Date.add(start,Sch.util.Date.WEEK, 3),


onEventCreated : function(newEventRecord) {
// Overridden to provide some default values
//newEventRecord.set('Subject', 'Call');
//newEventRecord.set('Location', 'Local office');
newEventRecord.set('Quantite', '1');
newEventRecord.set('EventType', 'Plan');
},
tooltipTpl: new Ext.XTemplate(
'<dl class="eventTip">',
'<dt class="icon-clock">Date de début</dt><dd>{[Ext.Date.format(values.StartDate, "d-m-Y")]}</dd>',
'<dt class="icon-clock">Date de Fin</dt><dd>{[Ext.Date.format(values.EndDateG, "d-m-Y")]}</dd>',
'<dt class="icon-task">Commentaire</dt><dd>{Commentaire}</dd>',
//'<dt class="icon-clock">Date de FinG</dt><dd>{[Ext.Date.format(values.EndDateG, "d-m-Y")]}</dd>',
//'<dt class="icon-clock">Date de FinG</dt><dd>{[Ext.Date.format(EndDateG, "d-m-Y")]}</dd>', new Date().add(rs[0].get('EndDate').DAY, -1);
//'<dt class="icon-task">Quantite</dt><dd>{Quantite}</dd>',
'</dl>'
).compile(),
tipCfg : {cls: 'sch-tip', showDelay: 1000, hideDelay: 0, autoHide: true, anchor: 'b',width: Ext.isChrome ? 200 : undefined},
//tipCfg : {cls : 'sch-tip', showDelay:50, autoHide : true, anchor : 'b'},
viewConfig : {
getRowClass : function(resourceRecord) {
if (resourceRecord.get('Chp')) {
return 'unavailable';
}
return '';
}
},
stateId: '{!Budget__c.id}AAA', // this is unique state ID
stateful: true, // state should be preserved
stateEvents: ['columnresize', 'columnmove', 'show', 'hide' /*,d more events here as suits you*/], // which event should cause store state
listeners : {
beforedragcreate : function(s, resource) {
if (resource.get('Chp')) {
Ext.Msg.alert('Erreur', "Vous ne pouvez pas créer des périodes pour les lignes de type chapitre");
return false;
}
},
beforeedit: function(editor, e, eOpts) {
var grid = Ext.getCmp('gridId'); // or e.grid
if (e.record.data.Chp &&(e.field =='QuantitePrev'||e.field =='QuantiteMarche'||e.field =='PosteBudget'||e.field =='PrixUnitaire'||e.field =='Unite'||e.field =='ST')) {
e.cancel = true; //not allowed to edit
} else {
e.cancel = false; //may edit the record
}
},
eventcontextmenu : this.onEventContextMenu,
beforetooltipshow : this.beforeTooltipShow,
//beforeeventresize : this.allowModify,
//beforeeventdrag : this.allowModify,
scope : this

}
});


Thanks for all !