PDA

View Full Version : icons RangeMenu



dams06
23 Dec 2010, 7:05 AM
Hi everybody,

i have a numeric filter on a column of my grid where i can search a number lt, gt, eq. That s work fine, but i'd like to add icon to 'lt, gt, eq'. To realise this i have change the icons path in the class RangeMenu.js.

The problem was they are on same position : (sorry i haven't image)

<>=___________________
___________________
___________________

I try to change this with the css but it's don't work.

What's wrong?

Thank you

dkarso
23 Dec 2010, 7:19 AM
well you should not change the core .js files in a framework if you want to change the visuals. RangeMenu uses RangeMenu.css with these css declarations



.ux-rangemenu-gt {
background-image: url(../images/greater_than.png) !important;
}

.ux-rangemenu-lt {
background-image: url(../images/less_than.png) !important;
}

.ux-rangemenu-eq {
background-image: url(../images/equals.png) !important;
}


You can change that.

dams06
23 Dec 2010, 7:42 AM
thank for your help

I try this without modify RangeMenu.js and that don't change anything

another idea?

dkarso
23 Dec 2010, 7:57 AM
did you actually include RangeMenu.css in your html file where the js is loaded? Also check FireBug for the images you are supposed to load. Perhaps the code just can't find them.

dams06
23 Dec 2010, 8:07 AM
he found it because they are display. but they are all in the icon position of 'gt', so the place for lt and eq are empty
but my 3 icons are displaying

dkarso
23 Dec 2010, 8:23 AM
how about configuring the numericfilter like this:



var filters = new Ext.ux.grid.GridFilters({
filters: [
{
type: 'numeric',
dataIndex: 'id'
iconCls: {
gt : 'ux-rangemenu-gt',
lt : 'ux-rangemenu-lt',
eq : 'ux-rangemenu-eq'
}
}
]
});


ofcourse change the names to your own css names.

dams06
23 Dec 2010, 8:59 AM
It's same result

23955

dkarso
23 Dec 2010, 9:01 AM
post the code of all your changes

dams06
23 Dec 2010, 9:13 AM
the class RangeMenu.js are like the initial i remove all changes. So that my classe JS



/*Ext.ux.menu.RangeMenu.prototype.itemCls = {
gt: '../img/greater_then.png',
lt: '../img/less_then.png',
eq: 'ux-rangemenu-eq'
};*/


Ext.ux.grid.filter.StringFilter.prototype.icon = '../img/find.png';
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var InventoryColumnModel = new Ext.grid.ColumnModel(
[
{ header: 'Statut', dataIndex: 'STATUT', sortable : true},
{ header: 'Nombre de films à tirer', dataIndex: 'NBFILMS', sortable : true, width:150},

],
defaultSortable = true
);


var filters = new Ext.ux.grid.GridFilters({filters:[
{type: 'string', dataIndex: 'STATUT'},

{type: 'numeric', dataIndex: 'NBFILMS', iconCls: {
gt : 'ux-rangemenu-gt',
lt : 'ux-rangemenu-lt',
eq : 'ux-rangemenu-eq'
}
}
]
});

var InventoryDataStore = new Ext.data.Store({
id: 'InventoryDataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
baseParams:{task: "HISTORIQUE"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'STATUT', type: 'string', mapping: 'STATUT'},
{name: 'NBFILMS', type: 'numeric', mapping: 'NBFILMS'},

]),


});
InventoryDataStore.load({params:{index:2,sens:0, start:0, limit:100}});

var InventoryGrid = new Ext.grid.EditorGridPanel({
id: 'InventoryGrid',
title:'Data',
store: InventoryDataStore,
enableColLock:false,
region:'center',
loadMask: true,
autoScroll: true,
width:1500,
stripeRows : true, // pour avoir une ligne sur deux en bleu
sm: new Ext.grid.RowSelectionModel({singleSelect: false}),
cm: InventoryColumnModel,
plugins: filters,

bbar: new Ext.PagingToolbar({
pageSize: 50,
store: InventoryDataStore,
displayInfo: true,
displayMsg: 'affichage{0} - {1} sur {2}',
emptyMsg: "Pas d'affichage",
viewConfig: {
forceFit: true
},
items: [ '-',{
text: 'Exportation Excel',
iconCls:'excelCss',
handler: exportExcel
} ]
}),
viewConfig: {
//forceFit: true,
getRowClass: function(record, rowIndex) {
var cls = '';

switch(record.data.STATUT){
case "Validé":
cls = 'ligne-verte';
break;
case "Réalisé":
cls = 'ligne-verte';
break;
case "Programmé":
cls = 'ligne-bleu';
break;
case "A programmer":
cls = 'ligne-orange';
break;
case "Annulé":
cls = 'ligne-rouge';
break;
default:
break;
}

return(cls);
}
}
});

function exportExcel(){
var url = "../excel/Historique.xls";
window.open(url);
}

dkarso
23 Dec 2010, 10:13 AM
It is a CSS rendering error. Did you load GridFilters.css ? Those icons also have the classes .x-menu-list-item-indent .x-menu-item-icon. I can replicate your error if I remove position: relative.

dams06
24 Dec 2010, 2:27 AM
hi and thanks for your help,

you're right when i remove position in css it's better but my result lke this23967

for the css of this component i use ext-all.css i think a paramters of css are always not good.

i try to use my css with ux_rangemenu_gt but it doesn't work.

dams06
24 Dec 2010, 3:48 AM
I found it!!!!

i have remeove the value of html in EditableItem.js and it perfectly work

thank again