PDA

View Full Version : Two dynamically created grid column header problem



mjchaudhari
2 Feb 2012, 10:22 AM
Hello friends,

I am new to extjs. I am stuck with a problem related to grid column headers. I need your help to resolve that.

I am creating two grids dynamically. (I have a common function that creates the grid).

The problem is, the grid headers are not rendered correctly when I show both the grids together. If I render them separately (i.e only one grid on the page) then that grid works correctly. The issue of headers appear only when I render them together. Please see the javascript code below





/*
This function will dynamically create the ext js grid showing the values of fields.
Usage: client will need to call BuildValueSelector() with the arguments inorder to open this grid.
Parameters:
FieldName: Name of the field of whcih values are to be shown
ObjectSpace: ObjectSpace whithin which the values lies
SelectedValues: JSON of already selected values
format:
[{"Prop1":"Prop1 Value","Prop2":"Prop2Value","prop3Name":"Prop3Value"},

callbackData : the object of structure {"functionName":"functionName","token":"identity of the artifact that has to be returned back so that calling code know which control has to recieve the response"}
*/
var url = "ValueSelectorDataHandler.ashx";
var _pageSize = 10;
var _totalRecords = 100;
var _width = 300;
var _height = 300;
var _selectedValues = new Array();
var _selectedCustomFilters = new Array();
var _callbackData = null;
var _alreadySelected = new Array();
var xmlHttpReq;


function BuildValueSelector(fieldName, objectSpace, selectedValuesJson, callbackData) {
Ext.tip.QuickTipManager.init();
_alreadySelected = jQuery.parseJSON(selectedValuesJson);
_callbackData = callbackData;
var allValues = getAllValues(fieldName, objectSpace);
var accordianItems = new Array(); // {"Name":"name","Item":"controlToAdd",}


//Get tagFilters
var tagfilterGrid = null;
var tagFilters = getValuesByType( allValues, 'TagFilter');
if(tagFilters.length > 0) {
var tagFiltercontrolName = fieldName + '_CustomFilter';
var tagFilterDataUrl = url + '?Filter=TagFilter&FieldName=' + fieldName + '&ObjectSpace=' + objectSpace;
var tagFilterColumns = getGridColumns(tagFilters);
var tagFilterFields = getGridFields(tagFilters);
var tagMultiselect = IsMultipleSelectionAllowed(tagFilters);
tagfilterGrid = getGrid(tagFiltercontrolName, fieldName + ' Custom Filters', tagFilterDataUrl, tagFilterColumns, tagFilterFields, tagMultiselect); //getGrid(gridName, title, dataUrl, columns, fields, allowMultiSelect
tagfilterGrid.getStore().loadPage(1);
accordianItems.push(tagfilterGrid);
}


//GEt entityValues
var entityValues = getValuesByType( allValues, 'VPMEntityData');
var controlName = fieldName + '_Values';
var dataUrl = url + '?Filter=EntityValues&FieldName=' + fieldName + '&ObjectSpace=' + objectSpace;
var entityColumns = getGridColumns(entityValues);
var entityFields = getGridFields(entityValues);
var entitiesMultiselect = IsMultipleSelectionAllowed(entityValues);
var entityValuesGrid = getGrid(controlName, fieldName + 's', dataUrl, entityColumns, entityFields, entitiesMultiselect); //getGrid(gridName, title, dataUrl, columns, fields, allowMultiSelect
entityValuesGrid.store.loadPage(1);
accordianItems.push(entityValuesGrid);
getAccordian(accordianItems)
}


function getAccordian(items) {


Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 600,
height: 400,
layout: 'accordion',
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: items,
//renderTo: 'selectorDiv'
});


}


//function getDataStore(controlName, dataUrl)
//{
// var dataStore = Ext.create('Ext.data.Store', {
// pageSize: _pageSize,
// model: 'entity_' + controlName,
// remoteSort: false,
// proxy: {
// type: 'jsonp',
// url: dataUrl,
// reader: {
// root: 'items',
// totalProperty: 'totalCount'
// },
// simpleSortMode: false
// }
// });
// return dataStore;
//}


function getGrid(gridName, title, dataUrl, columns, fields, allowMultiSelect)
{
//Variables read from gridConfig object
var controlName = gridName;
var idColumn = 'Id';
var title = title;


var pageSize = _pageSize;

Ext.define('entity_' + controlName,
{
extend: 'Ext.data.Model',
fields: fields,
idProperty: idColumn
}
);


var dataStore = Ext.create('Ext.data.Store', {
//pageSize: _pageSize,
model: 'entity_' + controlName,
remoteSort: false,
proxy: {
type: 'jsonp',
url: dataUrl,
reader: {
root: 'items',
totalProperty: 'totalCount'
},
simpleSortMode: false
}
});

var sm = new Ext.selection.CheckboxModel();
if(!allowMultiSelect)
{
sm = new Ext.selection.RowModel();
sm.mode = 'SINGLE';


}
var selectorGrid = Ext.create('Ext.grid.Panel', {
width: _width,
height: _height,
layout: 'fit',
title: title,
store: dataStore,
loadMask: true,
columns: columns,
selModel: sm,
// bbar: Ext.create('Ext.PagingToolbar', {
// store: dataStore,
// displayInfo: true,
// displayMsg: 'Displaying {0} - {1} of {2}',
// emptyMsg: "No values to display"
// }),
renderTo: 'selectorDiv',
fbar: ['->', {
text: 'Ok',
handler: function () {
var selected = selectorGrid.getSelectionModel().getSelection()
var selectedItemsData = new Array();
for (var i = 0; i < selected.length; i++) {
selectedItemsData.push(selected[i].data);
}
selectionComplete('OK', selectedItemsData);
}
},
{
text: 'Cancel',
handler: function () {
var selected = selectorGrid.getSelectionModel().getSelection()
selectionComplete('CANCEL', selected);
}
},
]


});
return selectorGrid;
}


//Handle selection complete.
//when user click on Ok or Cancel. from this method we have to call the callback method in order to return the data to that method.
//Parameters
// action: OK or CANCEL
// selectedItems: array selected items json
function selectionComplete(action, selectedItems) {

try
{
var functionTocall = _callbackData.functionName;
onValueSelectorAction(action, selectedItems, _callbackData);
}
catch(e)
{
}


}




//get all values of field
function getAllValues(fieldName, objectSpace) {


var request = url + '?FieldName=' + fieldName + '&ObjectSpace=' + objectSpace;
xmlHttpReq = getXMLHttpRequest();
var allValuesJson = getData(request, xmlHttpReq);
return allValuesJson;
}


//Get the values of specific type from the allValues array
function getValuesByType(allValuesJSON, type)
{
/*
{
"totalCount":15,
"items":[
{"TypeName":"VpmEntityData","ListColumns":"Name,Description","ID":1,"Name":"Site_1","Description":"Description of Site_1","IsTagFilter":false,"AllowMultiSelect":false},
{"TypeName":"VpmEntityData","ListColumns":"Name,Description","ID":2,"Name":"Site_2","Description":"Description of Site_2","IsTagFilter":false,"AllowMultiSelect":false}
]
}
*/

var allValues= jQuery.parseJSON(allValuesJSON);
var totalRecords = allValues.totalCount;
var items = allValues.items;


// //Get distinctTypes
// var distinctTypes = new Array();
// for (var i = 0; i < items.length; i++) {
// var typeName = items[i].TypeName;
// if (!hasInArray(distinctTypes)) {
// distinctTypes.push(typeName);
// }
// }


//Get all TagFilters
var retValues = new Array();
for (var i = 0; i < items.length; i++) {
if(items[i].TypeName == type)
{
retValues.push(items[i]);
}
}

return retValues;
}


function getGridColumns(valuesArray)
{
var columns = new Array();
var fields = getGridFields(valuesArray);

if(fields.length <= 0)
{
var column = new Object();
column.id = 'Name';
column.text = 'Name';
column.dataIndex = 'Name';
column.flex = 1;
column.sortable = true;
columns.push(column);
}
else
{
//Get the columns

for (var i = 0; i < fields.length; i++)
{
var column = new Object();
if (fields[i] == 'Id' || fields[i] == 'ID') {
column.hidden = true;
}
column.id = fields[i];
column.text = fields[i];
column.dataIndex = fields[i];
column.width = 100;
column.sortable = true;
columns.push(column);
}
}




return columns
}




function getGridFields(allValues)
{
var colNames = new Array();
if (allValues.length > 0)
{
//Get the columns
colNames.push('Id');
var firstItem = allValues[0];
var cols = firstItem.ListColumns.split(',');
for (var i = 0; i < cols.length; i++) {
colNames.push(cols[i]);
}
}

return colNames;
}


function IsMultipleSelectionAllowed(allValues)
{
var retVal = false;
if(allValues.length > 0)
{
//Get the columns

var firstItem = allValues[0];
retVal = firstItem.AllowMultiSelect;
}
else
{
retVal = false;
}
return retVal;
}






function hasInArray(array, value) {


for (var i = 0; i < distinctTypes.length; i++) {
if (distinctTypes[i] == typeName) {
return true;
}
}


return false;
}


function getData(request, xmlHttpReq) {
xmlHttpReq.open("GET", request, false);
//xmlHttpReq.onreadystatechange = onResponse;
xmlHttpReq.send(null);
var serverResponse = xmlHttpReq.responseText;
xmlHttpReq.abort();
return serverResponse;
}


function onResponse() {
if (xmlHttpReq.readyState != 4)
{ return; }
var serverResponse = xmlHttpReq.responseText;
alert(serverResponse);
return serverResponse;

}


function createXMLHttpRequest() {
try { return new XMLHttpRequest(); } catch (e) { }
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { }
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }
alert("XMLHttpRequest not supported");
return null;
}


function getXMLHttpRequest() {
if (window.XMLHttpRequest) { return new window.XMLHttpRequest; }
else {
try { return new ActiveXObject("MSXML2.XMLHTTP"); }
catch (ex) { return null; }
}
}




The function BuildValueSelector() is the main function I call from the page to get the grid(s) setup.
Below is the screen shot showing the issue in the grid headers. First grid should show 3 columns viz Name, Description and TagFilterType. and Second grid should show two columns viz Name and Description.

31294

mitchellsimoens
2 Feb 2012, 10:37 AM
Moved to the Ext JS 4 Q&A forum

mjchaudhari
3 Feb 2012, 6:12 AM
I am still not able to solve this :( Does any body has any clue please?

Regards, Mahesh

Romick
3 Feb 2012, 4:03 PM
Hi

I assume that you have problem with same column ID. Please check it.

SaturnYar
6 Feb 2012, 2:08 AM
I had same problem. And yes, the problem was in triple used IDs (in 3 grids) fo fields.
Don't use identical static IDs for different grids (give ExtJS some freedom to make dynamic IDs automatically or maintain it on your part) and problem will be solved.

mjchaudhari
7 Feb 2012, 8:20 AM
Thanks for your answers guys, It was indeed because of duplicate column Ids. But now I am facing another issue is that, I have to put both the grids in Accordion and when I do that second grid does not show the header and footer both. It does not set the height and width as I am providing. Any Idea please?
Note : If I put them in tab panel, then it works fine.it has problem only with the accordion.

Here is my common function that creates both the grids. (I ensured that now column id's are autogenerated by extjs)


function getGrid(gridName, title, dataUrl, columns, fields, allowMultiSelect)
{
//Variables read from gridConfig object
var controlName = gridName;
var idColumn = 'Id';
var title = title;


var pageSize = _pageSize;

Ext.define('entity_' + controlName,
{
extend: 'Ext.data.Model',
fields: fields,
idProperty: idColumn
}
);


var dataStore = Ext.create('Ext.data.Store', {
//pageSize: _pageSize,
model: 'entity_' + controlName,
remoteSort: false,
proxy: {
type: 'jsonp',
url: dataUrl,
reader: {
type:'json',
root: 'items',
totalProperty: 'totalCount'
},
simpleSortMode: false
}
});

var sm = new Ext.selection.CheckboxModel();
if(!allowMultiSelect)
{
sm = new Ext.selection.RowModel();
sm.mode = 'SINGLE';


}
var selectorGrid = Ext.create('Ext.grid.Panel', {
width: _width,
height: _height,
autoWidth: false,
autoHight: false,
//layout: 'fit', //even if I set layou as filt ...no effect!
title: title,
store: dataStore,
padding:'1px',
loadMask: true,
columns: columns,
columnLines: true,
selModel: sm,
fbar: ['->', {
text: 'Ok',
handler: function () {
var selected = selectorGrid.getSelectionModel().getSelection()
var selectedItemsData = new Array();
for (var i = 0; i < selected.length; i++) {
selectedItemsData.push(selected[i].data);
}
selectionComplete('OK', selectedItemsData);
}
},
{
text: 'Cancel',
handler: function () {
var selected = selectorGrid.getSelectionModel().getSelection()
selectionComplete('CANCEL', selected);
}
},
]


});
return selectorGrid;
}

Romick
7 Feb 2012, 9:32 AM
Hi

Can you explain were did you get/set _width and _height?


...............
width: _width,
height: _height
................

Why not pass them on getGrid(.., gridHeight, gridWidth)

mjchaudhari
8 Feb 2012, 3:17 AM
It is now showing the header and footer after I added the grid in panel and then panel to accordion. but I am facing new problem that grid is not showing scrollbars on overflow. I have created another post for this..http://www.sencha.com/forum/showthread.php?179493-Grid-not-showing-Scroll-bar-when-added-to-Accordion&p=729783#post729783

jpurni
23 May 2013, 4:56 AM
This helped me a lot.. Had same problem of duplicate column id.. thanks a lot !!!