[2.0] grid with locking column [NEW: Update 5]

[chpsrinu]

Hir,

I tried locking first two columns in my application using LockingGridPanel but no luck. Can i include this .css and .js files with ext 2.0.2 version? i did not see any error but locked columns come in one row and unlocked columns are coming in other row. i am not able to show the pic. Please throw some pointers. Appreciated your help.


Regards,
Srini

[kamal.addicted]

I have a grid which has too many rows so it is taking too much time to render. So to make this faster, I am trying to implement locking gird panel with Buffer View.
But Locking Gird Panel and Buffer View use the different Grid View Templates. So is this possible to implement Buffer View with Locking Grid Panel in Extjs 2.2.1 or not? If possible, which approach to be used.
First I have tried to use the templates.master for this but this does not work with this.enableRowBody because in <tr> tag is not present in templates.master.
Then I tried to use ts.rowHolder and ts.rowBody template but in this approach I am getting error in the initElements function when it try to fetch the dom elements for the this.scroller because ts.rowBody not uses the dom elements.

[priyapratheep]

Hi guys,

My locking grid is working fine...but I have one problem...

I used wrap

    .x-grid3-cell-inner, .x-grid3-hd-inner
    {    white-space: normal; }

now my grid is display like this ..For easy understanding i mark with red. The entire column is not changing its colour. only text area is changing. Anybody pls help.


My code

var projectPurchaseCm =  new Ext.ux.grid.LockingColumnModel([

{id:'taskOrder'    ,header:''    ,dataIndex: 'taskOrder', width:26,editable:false,editor: new Ext.form.TextField({allowBlank: false}),locked: true},
{id:'taskName',
        header: "Task",
        dataIndex: 'taskName',
        width: 225,
        
        editor: taskComboBox,
        renderer:function(value,p, record){
           if (taskStore.getCount()==0)
                return value;
           var object=taskStore.getById(value);
           if (object==undefined)
                return value;
           var retvalue= taskStore.getById(value).get('taskName');
           return retvalue;
              },locked: true
              
         },
{id:'year'    ,header:'yr'    ,dataIndex: 'year', width:45,editable:true,editor: yearCombo,sortable:false,
       renderer:function(value){
           if (yearStore.getCount()==0){
               return value;
           }
           var object=yearStore.getById(value);
           if (object==undefined){
               return value;
           }
           var retvalue= yearStore.getById(value).get('name');
           return retvalue;
       },locked: true
    },
{id:'description'    ,header:'Description'    ,dataIndex: 'description', width:100,editable:true,editor: new Ext.form.TextField({allowBlank: true}),locked: true},

{id:'directCostId',
        header: "Cost Centre",
        dataIndex: 'directCostId',
        width: 100,
        editor: contGroupComboBox,
        renderer:function(value,p, record){
           if (contGroupStore.getCount()==0)
                return value;
           var object=contGroupStore.getById(value);
           if (object==undefined)
                return value;
           var retvalue= contGroupStore.getById(value).get('description');
           return retvalue;
              },locked: true
          },
{id:'m1'    ,header:'M1'    ,dataIndex: 'm1', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true})},
{id:'m2'    ,header:'M2'    ,dataIndex: 'm2', width:40, editable:true,editor: new Ext.form.TextField({allowBlank: true})},  
{id:'m3'    ,header:'M3'    ,dataIndex: 'm3', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true,maxLength: 200}),css : "background-color: #EEF0F2;border-color:#EEF0F2;"},  
{id:'m4'    ,header:'M4'    ,dataIndex: 'm4', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true})},  
{id:'m5'    ,header:'M5'    ,dataIndex: 'm5', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true}),css : "background-color: #EEF0F2;border-color:#EEF0F2;"},
{id:'m6'    ,header:'M6'    ,dataIndex: 'm6', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true})},  
{id:'m7'    ,header:'M7'    ,dataIndex: 'm7', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true}),css : "background-color: #EEF0F2;border-color:#EEF0F2;"},
{id:'m8'    ,header:'M8'    ,dataIndex: 'm8', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true})},  
{id:'m9'    ,header:'M9'    ,dataIndex: 'm9', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true}),css : "background-color: #EEF0F2;border-color:#EEF0F2;"}, 
{id:'m10'    ,header:'M10'    ,dataIndex: 'm10', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true})},  
{id:'m11'    ,header:'M11'    ,dataIndex: 'm11', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true}),css : "background-color: #EEF0F2;border-color:#EEF0F2;"}, 
{id:'m12'    ,header:'M12'    ,dataIndex: 'm12', width:40,editable:true,editor: new Ext.form.TextField({allowBlank: true})}, 
{id:'tot'    ,header:'Total'    ,dataIndex: 'tot', width:40,editable:false,editor: new Ext.form.TextField({allowBlank: true}),css : "background-color: #EEF0F2;border-color:#EEF0F2;"},
  
ProjectPurchaseRowActions
]);

var ProjectPurchaseStore = new Ext.data.GroupingStore({
   proxy: new Ext.data.HttpProxy({url: selPrjPurchasePath}),
   reader: new Ext.data.JsonReader({totalProperty: 'totalCount', root:'results'}, ProjectPurchaseRecord),
   baseParams: {csid:csid},
   sortInfo:{field: 'year' , direction: 'DESC'},
   remoteSort: false,
   groupField: 'taskOrder',
   multiSortInfo: {
   sorters: [{ field: 'year', direction: "ASC" },
             { field: 'taskOrder', direction: "ASC"}],
               direction: 'DESC'
             },
             groupDir: 'DESC',
             listeners:{
                   'load': function(){
                          addTotalRow();
                    }
             },
   viewConfig: {
             
        getRowClass: function(record, rowIndex, rp, ds){
            if(record.data.taskEmpty){
                return 'correct-row'; 
            } 
        }
    }
});

In the screenshot i want red should be in the whole column

thanks in advance

scrrenShot.JPG