PDA

View Full Version : [SOLVED] Styling a muli-lines row ?



lpastor
19 Aug 2009, 1:49 PM
Hello,

In a gridPanel, I have a multi-lines row where that's work well, also I would like that certain field are particularly styled.

Example :

-----------------------------------------------
This is my title
This is my information
-----------------------------------------------
This is an other title
This is an other information
-----------------------------------------------
...
...
----------------

I think I must use a renderer, for that, I studies the buffered grid view example, but I don't understand nothing !

If someone can help me ?

This is my reader where I mix two fields :


var reader_demande = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id_demande',
root: 'data'
}, [
{name: 'id_demande'},
{name: 'multiline_data', mapping: 'title_demande+" "+obj.info_demande', sortDir: 'ASC', sortType: 'asUCString', allowBlank: false},
{name: 'info_demande'}
]);This is my columns definition :

var userColumns = [
{header: "Title", width: 200, sortable: true, dataIndex: 'multiline_data'}
}
];

BitPoet
19 Aug 2009, 11:38 PM
I'd avoid mangling the data in the reader. There's no harm in having more fields in the record than are used directly in the grid. So assuming you have both title_demande and info_demande in the store, you can make use of Ext3's new TemplateColumn xtype (untested):


var userColumns = [
{
header: 'Title'
,width: 200,
,sortable: true
,dataIndex: 'title_demande'
,xtype: 'templatecolumn'
,tpl: '<p><strong>{title_demande}</strong></p><p>{info_demande}</p>'
}
];

lpastor
20 Aug 2009, 1:09 AM
Thank's BitPoet,

But that don't work, when I do that, I have an ext-all.js error (b.apply is not a function).

Laurent

BitPoet
20 Aug 2009, 1:31 AM
When developing, USE ext-all-debug.js NOT ext-all.js! Then you will get a more descriptive message and will be able to see in the source in which line and at which command the error occurred.

lpastor
20 Aug 2009, 1:38 AM
Thank's Bitpoet, now with ext-all-debug.js, it write : tpl.apply is not a function

BitPoet
20 Aug 2009, 1:56 AM
ooops, there is a bug in Ext.grid.TemplateColumn.js:


var tpl = typeof Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl);


As a short-term workaround I'd use a fixed version with own xtype:


Ext.grid.FixedTemplateColumn = Ext.extend(Ext.grid.Column, {
constructor: function(cfg){
Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
var tpl = Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl);
this.renderer = function(value, p, r){
return tpl.apply(r.data);
};
this.tpl = tpl;
}
});
Ext.grid.Column.types.fixedtemplatecolumn = Ext.grid.FixedTemplateColumn;

Animal
20 Aug 2009, 1:59 AM
ooops, there is a bug in Ext.grid.TemplateColumn.js:


var tpl = typeof Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl);




That's fixed in SVN, so the next release will work as documented.

lpastor
20 Aug 2009, 3:16 AM
As you can see, I am a novice and also, how can I include this patch in my code ?


Ext.BLANK_IMAGE_URL = '/commun/Extjs/resources/images/default/s.gif';

// Create a standard HttpProxy instance.
var proxy_demande = new Ext.data.HttpProxy({
//url: 'app.php/users'
url: 'Mysql_Call.php?table=demande&idkey=id_demande',
method: 'POST'
});

//Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader_demande = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id_demande',
root: 'data'
}, [
{name: 'id_demande'},
//{name: 'ligne_demande', mapping: 'titre_demande+"<br>"+obj.info_demande', sortDir: 'ASC', sortType: 'asUCString', allowBlank: false},
{name: 'titre_demande'},
{name: 'id_statut_demande'},
{name: 'dateheure_demande', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'info_demande'}
]);

// The new DataWriter component.
var writer_demande = new Ext.data.JsonWriter();

// Typical Store collecting the Proxy, Reader and Writer together.
var store_demande = new Ext.data.Store({
id: 'id_demande',
//restful: true, // <-- This Store is RESTful
//baseParams:{task: "readData"}, // Commande de lecture des data
proxy: proxy_demande,
reader: reader_demande,
writer: writer_demande, // <-- plug a DataWriter into the store just as you would a Reader
listeners: {
write : function(store_demande, action, result, response, rs) {}
}
});

function renderTopic(value, p, record){
return String.format(
'<b>{0}</b><br>{1}',
value);
}


var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {titre_demande}</p><br>',
'<p><b>Summary:</b> {info_demande}</p><br>',
'<a href=\"https://www.inria.fr\">Gestion des applications</a>'
)
});

var userColumns = [
expander,
{header: "Titre", width: 100, sortable: true, dataIndex: 'titre_demande' ,xtype: 'templatecolumn' ,tpl: '<p><strong>{titre_demande}</strong></p><p>{info_demande}</p>'},
{header: "Info", width: 50, sortable: true, dataIndex: 'info_demande', editor: new Ext.form.TextField({})}
];

// load the store immeditately
store_demande.load();
//store.load();

// Raffraichissement automatique des données
var task = {
run: store_demande.reload,
scope: store_demande,
interval:6000 //1000 = 1 seconde
};
Ext.TaskMgr.start(task); // Démarrage du rafrichissement automatique des données
//Ext.TaskMgr.stop(task);


Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var xg = Ext.grid;

var listedemande= new xg.GridPanel({
store: store_demande,
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: true
},
columns: userColumns,
}),
viewConfig: {
forceFit:true,
onLoad: Ext.emptyFn, // Pour conserver la position de la scroll bar malgré le store.load()
listeners: {
beforerefresh: function(v) {
v.scrollTop = v.scroller.dom.scrollTop;
v.scrollHeight = v.scroller.dom.scrollHeight;
},
refresh: function(v) {
//v.scroller.dom.scrollTop = v.scrollTop;
v.scroller.dom.scrollTop = v.scrollTop +
(v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);
}
}
},
columnLines: true,
//width: 250,
height: 300,
plugins: expander,
//collapsible: true,
//animCollapse: false,
//title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
//renderTo: document.body
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 60, // give north and south regions a height
autoEl: {tag:'div', html:'<p></p>'}
}), {
region: 'south',
//contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'Information',
margins: '0 0 0 0'
}, {
region: 'east',
title: "<div align='center'>Applications</div>",
collapsible: true,
split: true,
width: 250, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0,
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'Liste',
autoScroll: true,
},{
html: '<p>Documentation fonctionnelle</p>',
title: 'Doc Fonctionnelle',
autoScroll: true
},{
html: '<p>Documentation technique</p>',
title: 'Cartographie',
autoScroll: true
}]
})
},{
region: 'west',
//id: 'west-panel', // see Ext.getCmp() below
title: "<div align='center'>Demandes en attentes</div>",
split: true,
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0,
tabPosition: 'bottom',
items: [{
//html: '<p>A TabPanel component can be a region.</p>',
title: 'Liste',
autoScroll: true,
items: listedemande
},{
html: '<p>A TabPanel component can be a region.</p>',
title: 'Nouvelle demande',
autoScroll: true
}]
})
},{
region: 'center',
//id: 'center',
title: "<div align='center'>Projets en cours</div>",
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0,
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'Liste',
autoScroll: true
},{
//html: '<p>A TabPanel component can be a region.</p>',
title: 'Espace technique',
contentEl:'Espace-technique',
autoScroll: true
}]
})
}]
});
});

BitPoet
20 Aug 2009, 4:40 AM
Just include this code anywhere between where ext-all is loaded and any code that uses the xtype. In your case, I'd put it as close to the top as possible, i.e. immediately after the assignment of Ext.BLANK_IMAGE_URL. Then change the xtype in your column definition and it should work.

Though you can also avoid the workaround and simply change the column definition from:


,xtype: 'templatecolumn'
,tpl: '<p><strong>{titre_demande}</strong></p><p>{info_demande}</p>',


to



,xtype: 'templatecolumn'
,tpl: new XTemplate('<p><strong>{titre_demande}</strong></p><p>{info_demande}</p>'),

lpastor
20 Aug 2009, 5:40 AM
It's really nice to spend time to solve my problem Bitpoet, I do that, but I have already XTemplate is not defined error :


Ext.BLANK_IMAGE_URL = '/commun/Extjs/resources/images/default/s.gif';

Ext.grid.FixedTemplateColumn = Ext.extend(Ext.grid.Column, {
constructor: function(cfg){
Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
var tpl = Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl);
this.renderer = function(value, p, r){
return tpl.apply(r.data);
};
this.tpl = tpl;
}
});
Ext.grid.Column.types.fixedtemplatecolumn = Ext.grid.FixedTemplateColumn;

// Create a standard HttpProxy instance.
var proxy_demande = new Ext.data.HttpProxy({
//url: 'app.php/users'
url: 'Mysql_Call.php?table=demande&idkey=id_demande',
method: 'POST'
});

//Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader_demande = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id_demande',
root: 'data'
}, [
{name: 'id_demande'},
{name: 'ligne_demande', mapping: 'titre_demande+"<br>"+obj.info_demande', sortDir: 'ASC', sortType: 'asUCString', allowBlank: false},
{name: 'titre_demande'},
{name: 'id_statut_demande'},
{name: 'dateheure_demande', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'info_demande'}
]);

// The new DataWriter component.
var writer_demande = new Ext.data.JsonWriter();

// Typical Store collecting the Proxy, Reader and Writer together.
var store_demande = new Ext.data.Store({
id: 'id_demande',
//restful: true, // <-- This Store is RESTful
//baseParams:{task: "readData"}, // Commande de lecture des data
proxy: proxy_demande,
reader: reader_demande,
writer: writer_demande, // <-- plug a DataWriter into the store just as you would a Reader
listeners: {
write : function(store_demande, action, result, response, rs) {}
}
});

function renderTopic(value, p, record){
return String.format(
'<b>{0}</b><br>{1}',
value);
}


var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {titre_demande}</p><br>',
'<p><b>Summary:</b> {info_demande}</p><br>',
'<a href=\"https://www.inria.fr\">Gestion des applications</a>'
)
});

var userColumns = [
expander,
{header: "Titre", width: 100, sortable: true, dataIndex: 'titre_demande', xtype: 'templatecolumn', tpl: new XTemplate('<p><strong>{titre_demande}</strong></p><p>{info_demande}</p>')},
//{header: "Titre", width: 100, sortable: true, dataIndex: 'ligne_demande'},
{header: "Info", width: 50, sortable: true, dataIndex: 'info_demande', editor: new Ext.form.TextField({})}
];

Animal
20 Aug 2009, 6:10 AM
new XTemplate?

Is that the classname?

lpastor
20 Aug 2009, 6:18 AM
Yes something is wrong I tried that :


XTemplate = Ext.grid.FixedTemplateColumn;

It's not better...

Animal
20 Aug 2009, 6:25 AM
Why the big mystery?

Create a new xtemplate. Using the correct classname. Not an undefined one.

lpastor
20 Aug 2009, 6:40 AM
I tried that too :


{header: "Titre", width: 100, sortable: true, dataIndex: 'titre_demande', xtype: 'templatecolumn', tpl: new Ext.grid.Column.types.fixedtemplatecolumn('<p><strong>{titre_demande}</strong></p><p>{info_demande}</p>')},

Not better..

Animal
20 Aug 2009, 6:52 AM
<gives up>

BitPoet
20 Aug 2009, 6:52 AM
What Animal meant is a typo on my part. Instead of "new XTemplate" it needs, of course, to read 'new Ext.XTemplate'. No need for fancy fixedtemplatecolumn stuff at all.

lpastor
20 Aug 2009, 7:05 AM
I had difficulty, but it's good now, thank's a lot...

Laurent