PDA

View Full Version : Grid column problem



newusername
14 Feb 2014, 4:53 AM
Hi , I am having column name with large string and there are too many columns on grid. Whatever code I have , I tried a lot to view it correctly but , some columns are not readable and also not all columns are get displayed. I have to show that grid with minimum width.



Ext.onReady( function() {

if (!window.console)
window.console = {};
if (!window.console.log)
window.console.log = function() {
};

var storeFields = [ 'ID'
,'IRR'
,'START_VAL'
,'PURCHASES'
,'REDEMPTIONS'
,'FEES_DED'
,'ORD_DIVS'
,'CAP_GAINS'
,'CASH'
,'XCHG_IN'
,'XCHG_OUT'
,'CHG_VAL'
,'END_VAL'
];


var accountReturnStore = Ext.create('Ext.data.Store',{
data : [],
fields : storeFields,
proxy : {
type : 'memory',
reader : {
type : 'json'
}
}
});


var getAccountReturnColumns = function(isFundRadioSelected){

var accountReturnColumns = [{
text :'Fund/Category',
dataIndex : 'id'
}, {
text : 'Internal Rate of <br/>Return',
dataIndex : 'IRR'
} , {
text : 'Starting Value',
dataIndex : 'START_VAL'
} , {
text : 'Purchases',
dataIndex : 'PURCHASES'
}, {
text : 'Redemptions',
dataIndex : 'REDEMPTIONS'
}, {
text : 'Advisory Fess <br/>Deducted',
dataIndex : 'FEES_DED'
} , {
text : 'Dividend and Short <br/>term Capital Gain <br/>Distributions',
dataIndex : 'ORD_DIVS'
} , {
text : 'Long Term Capital <br/>Gain Distributors',
dataIndex : 'CAP_GAINS'
} , {
text : 'Less Distributions <br/>Paid in Cash',
dataIndex : 'CASH'
} , {
text : 'Rebalance Purchases <br/>and Exchanges In',
dataIndex : 'XCHG_IN'
} , {
text : 'Rebalance Redemptions <br/>and Exchanges Out',
dataIndex : 'XCHG_OUT'
} , {
text : 'Change in Market Value',
dataIndex : 'CHG_VAL'
} , {
text : 'Ending Value',
dataIndex : 'END_VAL'
} ];
return accountReturnColumns;
};

var accountReturnsGridPanel = {
id : 'accountReturnsGridPanel',
xtype : 'grid',
margin : "30 0 0 0",
store : {},
columns : [],
overflowX : 'scroll'
,deferEmptyText : false
,viewConfig: { emptyText : "No Results" }
//width : 1400
//,style : "width:100"
//forceFit : true


};

var searchFields = {
xtype : 'container',
layout : 'hbox',
defaults : {
labelStyle : "font-size:12",
padding : "10 2 2 10"
},
border : false,
items : [ {
fieldLabel : 'Start Date',
xtype : 'datefield',
labelPad : -30,
width : 160
}, {
fieldLabel : 'End Date',
xtype : 'datefield',
labelPad : -40,
width : 160
}, {
fieldLabel : 'Fund',
name : 'size',
inputValue : '',
id : 'radio1',
xtype : 'radiofield',
labelPad : -65
}, {
fieldLabel : 'Category',
name : 'size',
inputValue : '',
id : 'radio2',
xtype : 'radiofield',
labelPad : -45
}, {
html : "&nbsp;&nbsp;",
border : false,
width:20
}, {
fieldLabel : 'Trade Date',
name : 'size',
inputValue : 'm',
id : 'radio3',
xtype : 'radiofield',
labelPad : -30
}, {
fieldLabel : 'Post Date',
name : 'size',
inputValue : 'l',
id : 'radio4',
xtype : 'radiofield',
labelPad : -40
}, {
html : "&nbsp;&nbsp;",
border : false,
width:20

}, {
text : 'Refresh',
xtype : 'button',
listeners :{
render : function() {
var form = Ext.getCmp('accountReturnWindowId');

if (Ext.getCmp('accountReturnsGridPanel')){
form.remove(Ext.getCmp('accountReturnsGridPanel'));
}

accountReturnsGridPanel.columns = getAccountReturnColumns(true);
accountReturnsGridPanel.store = accountReturnStore;
form.add(accountReturnsGridPanel);
form.doLayout();
}
}
}
]
}


Ext.create('Ext.form.Panel', {
id : 'accountReturnWindowId',
width : 900,
height : 500,
margin: "40 0 0 0",
items : [searchFields],
overflowX : 'scroll'
,layoutConfig: {
align: 'stretch'
}

,renderTo : Ext.getBody()
});

});





Can not use forceFit to true. As I have also added p;ugin to adjust a columnwidth based on data that grid may have.

Please help me out.

scottmartin
14 Feb 2014, 7:14 AM
Have a look at the CSS:



.x-column-header-text {
display : block;
overflow : hidden;
text-overflow : ellipsis;
}


Other options:
http://www.sencha.com/forum/showthread.php?131019
http://www.sencha.com/forum/showthread.php?132637

Scott.

newusername
13 Mar 2014, 11:49 PM
I tried to use it but not working .

scottmartin
14 Mar 2014, 6:35 AM
You will need to provide more details for anyone to help. Here is a screen on a basic grid.

48301

newusername
14 Mar 2014, 9:04 AM
You will need to provide more details for anyone to help. Here is a screen on a basic grid.

48301


Thanks for ur reply. In my question I put a complete code. Please use that as a reference. I don't want a "...." dots after an column name. Instead it should show complete and full column name.