Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: icons RangeMenu

  1. #1

    Default icons RangeMenu

    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

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Posts
    17

    Default

    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

    Code:
    .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.

  3. #3

    Default

    thank for your help

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

    another idea?

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Posts
    17

    Default

    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.

  5. #5

    Default

    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

  6. #6
    Sencha User
    Join Date
    Jul 2009
    Posts
    17

    Default

    how about configuring the numericfilter like this:

    Code:
    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.

  7. #7

    Default

    It's same result

    screen.png

  8. #8
    Sencha User
    Join Date
    Jul 2009
    Posts
    17

    Default

    post the code of all your changes

  9. #9

    Default

    the class RangeMenu.js are like the initial i remove all changes. So that my classe JS

    Code:
    /*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 "Ralis":
                        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);
    }

  10. #10
    Sencha User
    Join Date
    Jul 2009
    Posts
    17

    Default

    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.

Page 1 of 2 12 LastLast

Similar Threads

  1. icons
    By genius551v in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 15 Nov 2006, 3:52 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •