PDA

View Full Version : Ext.ux.touch.GridSummary v1



mitchellsimoens
5 Feb 2011, 4:37 PM
This is a plugin for Ext.ux.TouchGridPanel to add a summary dock or row.

This will only summarize numbers. Works in conjunction with Ext.ux.touch.PagingToolbar and will refresh the summaries when data changes in the Store.

I'm not 100% happy with this but it will work for now. I will improve when I have some more time.

Github - https://github.com/mitchellsimoens/Ext.ux.touch.GridSummary
Demo - http://www.simoens.org/Sencha-Projects/demos/

usage:


{
xtype: "touchgridpanel",
...
plugins: [
new Ext.ux.touch.GridSummary({
type: "row", //default is "dock"
summaryType: "average", //default is "total"
decimalPosition: 1 //default is 2
})
]
...
}

Designworxz
14 Sep 2011, 10:26 PM
Mitchell,

Am trying at add your plugin my tabpanel, All i can see is header for grid cant see rows. Can you help me



Ext.setup({
onReady: function() {

var Grid=new Ext.ux.TouchGridPanel({
store : Demo.data.TouchGridPanelStore,
colModel : [{
header : "Name",
mapping : "name"
},{
header : "Address",
mapping : "address",
style : "text-align: center;"
},{
header : "City",
mapping : "city",
cls : "centered-cell"

}],
});

//var xForm=new Ext.Form
var pnl=new Ext.Panel({
width:'80%',
height:'70%',
scroll: 'vertical',
bodyStyle:'margin-top:2%;margin-left:1%',
items:Grid


});



var Maintool=new Ext.Toolbar({
dock: 'bottom',
defaults:{flex:1},
floating: false,
style: 'opacity: 1.0;',
items: [

{xtype: 'spacer'},
{
text: 'SAVE',
ui: 'confirm',
handler: function() {

}

}
]
});

var Subtool=new Ext.Toolbar({
dock: 'bottom',
defaults:{flex:1},
floating: false,
style: 'opacity: 1.0;',
items: [

{xtype: 'spacer'},
{
text: 'SAVE',
ui: 'confirm',
handler: function() {

}

}
]
});

// Sub-page sections
var mGrid = {
title: "Grid",
layout: {
type:'hbox',
padding:'5',
pack:'left',
align:'left'
},
items:pnl,
dockedItems:Subtool
};
var blah2 = {
title: "one"
};


// Main portion of the page, which includes top toolbar and content
var page1 = new Ext.TabPanel({
items: [mGrid, blah2],
title: "one",
iconMask: true,
iconCls: "download",
});


// This is the outer panel with the bottom toolbar
var wrapper = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'top',
layout: {
pack: 'right'
}
},
items: [
page1,
{
iconMask: true,
title:'test',
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]
});
}
});

mitchellsimoens
15 Sep 2011, 5:20 AM
width/height do not take strings, they only take numbers (int). You are overnesting, looks like you don't need the Panel wrapping the TouchGridPanel. TouchGridPanel extends from Panel. Further more you wrap the Panel that wraps TouchGridPanel into another Panel to put into your TabPanel. That's overnesting.

Try putting the TouchGridPanel as an item in the TabPanel.

Designworxz
16 Sep 2011, 1:12 PM
Thanks it worked.