My datatable code:
<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#globaldatatable').DataTable({
scrollX: '100%',
deferRender: 'true',
dom: 'lBfrtip',
scroller: {
loadingIndicator: 'true'
},
buttons: [
{ extend: 'excelHtml5', className: 'excelButton' },
{ extend: 'pdfHtml5', className: 'excelButton' }
]
});
});
</script>
When I'm setting scroller to true, why the pagination and per page data selector is gone? how to enable it?
I believe using scroller plugin makes your datatable scrollable(
Features
Key features of Scroller include:
Speed! The aim of Scroller for DataTables is to make rendering large data sets fast
Full compatibility with DataTables' deferred rendering for maximum speed
Display millions of rows in a scrollable table
Integration with state saving in DataTables (scrolling position is saved)
Easy to use
) and disables pagination buttons.
this is the working example of a scroller plugin
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html
Related
I have just like website, side menu. which is different menu items, I want to display if click one tab then display related information in the next view. if again click next button display in same view. only change button view is same.
Here more clear of these images.
How to do this in sencha, I am very new in sencha. Thank you advance.
You will want to use a Card layout for the main body. See the docs here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.Card
For the side navigation, you can use simple components that change the active item of the card layout using listeners on the elements of the components (for example, use singletap event for the element: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dom.Element-event-singletap).
items: [{
items: [
{
html: 'Student',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(1);
}
}
}
},
{
html: 'Teacher',
listeners: {
initialize: function(cmp) {
cmp.element.on('singletap', function() {
Ext.getCmp('myCardLayout').setActiveItem(2);
}
}
}
}
]
},
{
id: 'myCardLayout',
layout: 'card',
items: [
{
//student panel
},
{
//teacher panel
}
]
}]
Note that this is pretty sloppy code (it is not MVC, it uses Ext.getCmp, etc), but it is just intended to give you the concept of what should work for you here.
In Rally App SDK 2.0, I would like to show a dropdown and button in line, and a chart below. The button would export (save as) the chart as a jpeg.
1) how do I specify the div to render objects to? The below code ignores the renderTo
2) is there sample code for exporting a jpeg image? using Canvas generates error
this.add({
xtype: 'rallycombobox',
fieldLabel: 'Select an Enterprise Release',
width: '500px',
renderTo: Ext.get("dropdownDiv"),
storeConfig: {
autoLoad: true,
model: 'Program',
fetch: 'Name,Releases,ReleaseStartDate,ReleaseDate',
sorters: [
{
property: 'Name',
direction: 'ASC'
}
]
},
listeners: {
select: this._onSelect,
scope: this
}
});
this.add({
xtype: 'rallybutton',
text: 'Export',
renderTo: Ext.get("buttonDiv"),
handler: function() {
var canvas = document.getElementById("chartDiv");
var img = canvas.toDataURL("image/jpeg");
// .toDataURL generates error, TypeError: canvas.toDataURL is not a function
document.write('<img src="'+img+'"/>');
}
});
this.add({
id: 'chartCmp',
xtype: 'rallychart',
renderTo: Ext.get("chartDiv"),
flex: 1,
chartConfig: chartConfig
});
// here is the body statement, removed <> so it will show
body
table
tr
td
div id="dropdownDiv" style="height:50px; width:500px;"/div
/td
td
div id="buttonDiv" style="height:50px; width:50px;"/div
/td
/tr
/table
div id="chartDiv"/div
/body
In Ext there are two ways to get a component rendered. The first is by adding a config object with an xtype to a container. That would be the this.add(); lines in your app. The second is by instantiating the component using Ext.create and specifying a renderTo in its config.
this.add({xtype: 'component', html: 'hello world'});
Ext.create('Ext.Component', { html: 'hello world', renderTo: 'aDiv' });
The preferred way is the first since then your component participates in the layout of the app. Also the preferred way for creating dom elements in an app (especially for initial layout) is through the items config rather than static html in the app body.
So:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{ xtype: 'container' itemId: 'dropdownDiv' },
{ xtype: 'container', itemId: 'chartDiv' }
]
});
And then you can add content in the launch method like so:
this.down('#chartDiv').add(chartConfig);
As far as your canvas question goes I'm not sure. You may want to post that as a separate question with more details on the specific error.
//here is my carousel view which display some images on carousel code is below
Ext.define("App.view.GView",
{
extend:'Ext.Carousel',
xtype:'GView',
requires:[
'Ext.carousel.Carousel',
'Ext.Img',
'Ext.Loader'
],
config:{
title:'XYZ',
iconCls:'home',
layout:{
type:'vbox',
pack:'center',
align:'center'
},
directionLock:true,
fullscreen:true,
items:[
{
docked:'top',
xtype:'titlebar',
cls:'titleBar',
title:'Gallery'
}
],
xtype:'carousel',
id:'gallerycarousel'
}
});
//Here is my controller code which binds data to
var items = []; Temp array
var xyz= [{ urlL}] My image array
Ext.each(images, function (picture) {
items.push({
xtype: 'image',
cls: 'centerImage',
src: picture.url
});
});
floorCarousel.setItems(items);
floorCarousel.setActiveItem(0);
//My question is to how to add another carousel on the top this carousel that when i move first carousel item than second carousel item also should move and vice verse.. So first carousel is at bottom on top of that i need small size carousel Please help me out little tricky .,,
I'm confused. do you need to know how to create the carousel, or do you just need to know how to make the 2nd carousel move with the main carousel?
I had rendered a list using SENCHA.Now i want to navigate to different screen/load different screen upon clicking the item in LIST.
var templist = new Ext.List( {
title:"xmli",
itemTpl : '{ename}',
floating: true,
indexBar: true,
width: 350,
height: 370,
centered: true,
store:xmlStore,
modal: true,
onItemDisclosure: {
scope: 'test',
handler: function(record, btn, index) {
// I need to a load different page here how ?.
// ChangePage();
}
},
hideOnMaskTap: false
}).show();
Please help me how can we achieve this using SENCHA.
Thanks,
Shyam
You need to put this list inside a layout where you can switch the visible component to your different page. It sounds like you could use the card layout:
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
I have a fairly simple Sencha Touch MVC app where I have some main tabs (containing lists) driven by a tab bar. When the user taps on a list item I open a new panel using SetActiveItem. This seems ok but it adds an icon (or the empty clickable space) to the tab bar. How can I stop this?
My viewport:
app.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
// put instances of cards into app.views namespace
Ext.apply(app.views, {
myList: new app.views.MyList(),
myDetail: new app.views.MyDetail()
...
});
//put instances of cards into viewport
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
app.views.myList,
...
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
I then have a controller that fires on an item tap in my list:
app.views.viewport.setActiveItem(
app.views.myDetail,
options.animation
);
The panel opens but adds to the tabbar as well.
I'd appreciate any pointers!
What you need to do is change the layout of myList and the other tabPanel items to card layout, and call setActiveItem in the context of myList.
When you call setActiveItem directly on the TabPanel, this is the result that you get ( another item being added to the tabBar).
Besides, you don't need to set the layout to card in the TabPanel as it is already card layout by default.
The inner items (myDetail for example) should have a fit layout.