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
Related
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
Please let me know, how to add checkbox column in a grid.
I tried the following. But its read only checkbox.
Should I use checkboxModel? if so, then please let me have the complete code
Here you go, an Ext4 example matching any data element:
{
xtype: 'checkcolumn',
header: 'My Checkbox column',
dataIndex: 'myBooleanFieldThatMatchesTheModelFieldOfMyGridStore',
listeners: {// In case you want to perform a specific action on click...
checkChange: me.onCheckChange
},
flex: 1
}
Here is an example of a grid with a checkbox.
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
store: //
selModel: sm,
columns: //[]
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection',
renderTo: Ext.getBody()
});
//Here i am creating overlay on button tap event and loading another view using ContentEl:''. Overlay working fine with animation but i need to hide this overlay with animation when user select a particular item in that overlay.
if (!this.overlay)
{
this.overlay = Ext.Viewport.add({
xtype: 'panel',
id:'menuOverlayView',
modal: true,
hideOnMaskTap: true,
centered: true,
scroll: 'vertical',
autoDestroy:false,
floating: true,
showAnimation: {
type: 'slide',
duration: 4000,
direction:'down'
},
hideAnimation: {
type: 'slide',
duration: 4000,
direction:'up'
},
contentEl:'menuViewid',
top: Ext.os.deviceType == 'Phone' ? '20%' : '20%',
width: Ext.os.deviceType == 'Phone' ? 260 : 700,
height: Ext.os.deviceType == 'Phone' ? 220 : 600
});
}
this.overlay.show();
// And my code to hide this overlay in controller is below .I am accessing panel id and hiding the panel but panel should hide with animation like as i mentioned above hideAnimation
var overlayView=Ext.getCmp('menuOverlayView');
overlayView.setHidden(true);
//so what i should do to hide panel with with smooth scrolling up.. i am writingng below sentence but not working giving error
overlayView.hideAnimation({type: 'slide', direction: 'up', duration:1000});
To hide an overlay panel, you need to call panel's hide() method.
Ext.getCmp('menuOverlayView').hide();
and then try your hideAnimation code.
So, I have a panel in Sencha Touch and I have an image which I want to display as a component in that panel. I have tried several things along the lines of:
logo = {
xtype: 'component',
autoEl: {
src: 'http://addressofmyimage.com/image.png',
tag: 'img',
style: { height: 100, width: 100 }
}
};
Then adding above component as an item in my panel. No image is displayed. All of my other components are displayed but not the image. Not even a broken-image-link icon. I can't figure this out...
I'd rather not just insert raw html, as I cannot format that as I wish.
Probably better off using a panel to display the image itself. Replace the above code with...
logo = {
xtype: 'panel',
html: '<img style="height: 100px; width: 100px;" src="http://addressofmyimage.com/image.png" />'
};
You could override the Component's getElConfig method and return what you have in your autoEl object.
{
xtype: 'component',
getElConfig : function() {
return {tag: 'img',
src: 'http://addressofmyimage.com/image.png',
style: { height: 100, width: 100 },
id: this.id};
}
}
That method is used when the component is rendered to get the makeup of the underlying element.
You can use src.sencha.io API to resize image as you wish. Belowed example works for me.
{
xtype: 'image',
src: 'http://src.sencha.io/100/100/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg',
height: 100
}
You can find documentation here.
I've tried adding style: float: right to the button but it isn't working.
myapp.cards.home.add({
xtype: 'button',
id: 'previmagebutton',
// text: 'p',
iconCls: 'arrow_left',
iconMask: true,
style: 'float: right'
});
myapp.cards.home = new Ext.Panel({
scroll: 'vertical',
id: "home-card",
layout:{
type:"vbox",
align:"center"
},
items: [header]
});
myapp.mainPanel = new Ext.Panel({
fullscreen: true,
layout: "card",
cardAnimation: 'slide',
items: [myapp.cards.home]
});
I have to use the add method if that is what's causing the problem. Many thanks.
In your myapp.cards.home object you have the layout set up to align:"center".
I've succeeded in creating a floating button by using
floating:true
config on the button. It is a private member, so I'm still looking for an official way.
This should work ::
layout : {
type : 'vbox',
align : 'left'
}
or you can add a spacer if its in the toolbar, or if you stretch the element, then add another hbox element on its side with a flex that occupies as much space that you don't need