PDA

View Full Version : Grid rows into one column



extgeek
11 Jan 2010, 4:43 PM
I've a grid with 210(this is just a sample number) rows and only one column. I want to show these 210 rows in multiples of 40 rows in different columns. For example the json store contains 210 Universities(name of the column) and the page count is 250 which means all the results will be shown in one column and 210 rows.

What I wanted is after 40 universities the 41st University should start in the second column in the same grid panel. If you guys out there has any problem understanding my question please do let me know and I can post the sample image.

To put it in a better way achieve the MS Outlook contacts kinda look. One column (LastNames) into different columns.

CrazyEnigma
11 Jan 2010, 7:53 PM
Check out DataView.

extgeek
12 Jan 2010, 6:05 AM
Thanks for the reply. I'm actually using the DataView and the XTemplate in the following way



// XTemplate that has the HTML code
this.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap">',
'<div style="cursor:hand;cursor: pointer;float:left;width:90px;height:12px;padding:5px 5px 0px 5px;font-size:12px;color:#222222" onClick="this.divHighlight()">{value}</div>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>',
'</div>',
{
divHighlight: function () {
alert("Div will be highlighted with green");
}
}

);


// DataView that has the XTemaplate and the refers to a store
this.namesView = new Ext.DataView({
store: this.dataViewStore,
tpl: this.tpl,
simpleSelect: true,
//overClass:'x-view-over',
itemSelector:'div.thumb-wrap'

});

//Panel that contains the DataView
this.dataViewPanel = new Ext.Panel({
id: 'img-chooser-view',
frame:true,
height:390,
autoScroll:true,
region: 'south',
items: this.namesView
});
It says divHighlight is undefined or not a function.

extgeek
13 Jan 2010, 6:18 AM
this.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap">',
'<div style="cursor:hand;cursor: pointer;float:left;width:90px;height:12px;padding:5px 5px 0px 5px;font-size:12px;color:#222222" onClick="this.divHighlight()">{fullname}</div>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>',
'</div>',
{
divHighlight: function () {
// Here I need to change the background color of the fullname to red
//alert("Div will be highlighted with green");
}
}
);
I need to change the css of the div onClick. First it's never coming into the divHighlight function, second how can I change the background color.

CrazyEnigma
13 Jan 2010, 11:00 AM
Check out:


overClass: "your-over-class",
selectedClass: "your-selected-class"


In your CSS:


.your-over-class{
border:1px solid #dddddd;
background: #efefef;
padding: 1px;
}

.your-selected-class{
background: #c6ffb5;
border:1px solid #acff73;
padding: 1px;
}


This might be the better way.

extgeek
13 Jan 2010, 12:41 PM
Thanks for the reply !

selectedClass: "your-selected-class" is never being set for the selected item.



this.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap">',
'<div style="cursor:hand;cursor: pointer;float:left;width:90px;height:12px;padding:5px 5px 0px 5px;font-size:12px;color:#222222" onClick="this.divHighlight(\'{fullname}\')">{fullname}</div>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>',
'</div>',
{
divHighlight: function (fullname) {

}
}
);
I need to collect all the selected items. That's the reason I'm insisting on the inline function.

I get the error Error: missing ) after argument list. I guess it's because of the unescaped quotes.
I'm unable to figure it out. Everything looks okay to me but I still get that error.

extgeek
14 Jan 2010, 6:48 AM
Enigma Can you please help me on this.

CrazyEnigma
14 Jan 2010, 10:59 AM
What I am saying is don't use a function to do the click. Remove the function altogether. The DataView config has three values that you should be concerned about.



selectedClass: <the class to use to select your div>,
overClass: <the class to use to hover your div>,
itemSelector:'div.thumb-wrap', // Has to be specified


Get rid of your inner div that is useless.

I would drive it with CSS. What happens if you want to use SELECT or CTRL to select multiple. Is your click going to capture your changes to highlight? Not that I know what you fully intend to do with your application.

extgeek
20 Jan 2010, 2:35 PM
Your idea works perfect. I'm able to select and deselct as I'm using the selectedClass.

Now I've a Reset Button. onClick of this button I need to clear the selectedClass for all the selections.
I'm doing
this.namesView.refresh(); This refreshes the DataView's data and all the selected items selectedClass is cleared but this.namesView.getSelectedRecords() still shows the previously selected records.

I tried to use
this.namesView.clearSelections();

For some reason the clearSelections() is not doing anything.




this.namesView = new Ext.DataView({
store: this.dataViewsStore,
tpl: this.tpl,
simpleSelect: true,
selectedClass:"name-selected",
itemSelector:'div.thumb-wrap',
listeners : {
click : {
fn : function( dataView, index, node, e) {
if (dataView.isSelected(node)) {
dataView.deselect(node);
}
else {
dataView.select(node);
}
}
}
}
});



Can someone please throw some light on this thread

Thanks in advance.