I have create a floating panel above a panel and have added carousel to the floating panel.
Now the problem is that while carousing i can see all the items that were added. I want only one item to get displayed on the floating panel while others to be hidden and not be displayed outside the floating panel. How can i achieve this?
Thanks in advance.
Code:
var App = new Ext.Application({
name: 'CarouselDemo',
useLoadMask: true,
launch: function () {
overlayView.show();
}
});
var overlayView = new Ext.Panel({
floating: true,
centered: true,
styleHtmlContent: true,
width:600,
height:600,
items: [
{
xtype : 'carousel',
ui : 'light',
direction: 'horizontal',
items: [
{ html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>'
},
{ html: 'Card #2'
},
{ html: 'Card #3'
}
]
}]
});
Related
I have a portal (attached image) in which when I click a button I get some images in a panel (right side). Now I want when I click on each of this image to get an alert box with the image id. How can I access this? Till now I have done everything using jquery and now I am in the process of migration. This is part of my code:
items: [{
xtype: 'tabpanel',
width: 600,
activeTab: 0,
flex: 2,
layout: {type: 'fit'},
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScroll:true,height:500 }],
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScroll:true,height:500 }]
}]
}]..
You can add listener to an image element, when you append it
{
xtype: 'image',
src: 'some-path',
listeners: {
el: {
click: function() { alert(this.id); }
}
}
}
I am developing a sencha touch mobile app and i have a a tab panel which contains four navigation views as items. I have also assigned iconCls config property to each item so as to show icons for each navigation in bottom for navigation to different views. Below is the code for this tabpanel
Ext.define('MobileApp.view.Offers.OffersPanel', {
extend: 'Ext.tab.Panel',
xtype: 'offerspanel',
config: {
tabBarPosition: 'bottom',
//styleHtmlContent:true,
width: '100%',
cls: 'offersTab',
id: 'offersPanel',
ui: 'light',
items: [{
iconCls: 'new',
xtype: 'offersnewnavigationview'
}, {
xtype: 'offershotdealsnavigationview',
iconCls: 'hot'
}, {
iconCls: 'favourite',
xtype: 'offersfavnavigationview'
}, {
iconCls: 'searchd',
xtype: 'offerssearchnavigationview'
}]
}
});
above tab panel is inside a MainViewContainer , which itself is inside Main.js container. Code for both files is shown below
Ext.define('MobileApp.view.MainContainerView', {
extend: 'Ext.Container',
xtype: 'mainContainerView',
requires: [
'Ext.TitleBar'
],
config: {
layout: 'fit',
// shadow for the left edge
style: 'box-shadow: rgba(0, 0, 0, 0.8) 0 0.2em 0.6em;',
/*
* This is the main view used to switch view or add view
* when selecting from sidebar menu
*/
items: [{
xtype:'offerspanel'
}]
}
});
Ext.define('MobileApp.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
config: {
layout: 'fit',
//fullscreen: true,
items: [{
xtype: 'sidebar'
}, {
xtype: 'mainContainerView'
}]
}
});
I can see in the DOM that markup for the icon and tab panel item is present but it is hidden by sencha touch and .x-item-hidden css class get applied to it somehow (i can't figure out why). Below is image showing the dom for tab panel item
the tabpanel view with hidden items (4 tab items with icons should be present here)
i got icons to appear correctly by using fullscreen:true config property in each of the navigation views inside OffersPanel view file.
Technically i am yet to find out how did that solve the issue but as of now it is working correctly.
I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.
Does it have to do with some kind of Edit Template ? I can't find the documentation for it.
thanks.
Bob
Here's my sample grid :
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [{
field: "PositionId",
},
{
field: "Portfolio",
editor: portfolioDropDownEditor, template: "#=Portfolio#"
},
{
field: "Instrument",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument#",
},
{
field: "NumOfContracts",
},
{
field: "BuySell",
editor: buySellDropDownEditor, template: "#=BuySell#"
},
{
command: [
{
name: "edit",
click: function (e) {
}
},
"destroy"
]
},
],
sortable: true,
editable: "popup",
});
You can wire up edit event to set dropdown options:
name: "edit",
click: function (e) {
if (!e.model.isNew()) {
var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
dropdown.list.width(500);
}
}
I'm trying to create an MVC "Notes" application using Sencha touch 2 on aptana studio 3, I've only created the main view and a controller, but when I test it using chrome, all it shows is a blank white screen.
Any help?
Here's my code:
Main View:
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Container",
config: {
fullscreen:true,
items: [{
xtype: "toolbar",
docked: "top",
title: "My Notes",
items: [{
xtype: "spacer"
}, {
xtype: "button",
text: "New",
ui: "action",
id: "new-note-btn"
}]
}]
}
});
controller:Notes.js:
Ext.define('NotesApp.app.controller.Notes',{
extend:'Ext.app.Controller',
config:{
refs:
{
newNoteBtn:'#new-note-btn'
},
control:
{
newNoteBtn: {
tap: 'onNewNote'
}
}
},
onNewNote:function()
{
console.log("onNewNote fn");
}
});
app.js:
Ext.application({
name: "NotesApp",
controllers: ["Notes"],
views: ["NotesListContainer"],
launch: function () {
console.log("fff");
//debugger;
var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
Ext.Viewport.add(notesListContainer);
}
});
Recently there have been some issues with Chrome (version 43) causing white screens on chrome and android. You can try to override Ext.util.PaintMonitor to return a new instance of Ext.util.PaintMonitor.CssAnimation as specified here.
Not sure, but if you define
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Panel",
you have to OK. If not post here your index.html
Cheer, Oleg
H, please only you change into Ext.Application
views: ["NotesListContainer"],
to,
requires: ['NotesApp.view.NotesListContainer'],
Hope these helps. :)
This question is pretty downright dumb and I might have stumbled upon a bug but I need to center my searchfield in my navigation bar in Sencha Touch and I just can't make it work. This is my code:
Ext.define('Myapp.view.MyNav', {
extend: 'Ext.navigation.View',
xtype: 'mynav',
requires: [
'Ext.field.Search', 'Ext.Button'
],
config: {
fullscreen: true,
navigationBar: {
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
align: 'right'
}
]
},
items: [
{
title: 'MyNav',
xtype: 'list',
fullscreen: true,
grouped: true,
store: {
fields: ['name', 'html'],
sorters: 'name',
data: [
{name: 'Alfa', html: '<p>alfa</p>'},
{name: 'Beta', html: '<p>beta</p>'},
{name: 'Gamma', html: '<p>gamma</p>'},
{name: 'Mupp', html: '<p>mupp</p>'},
{name: 'Tupp', html: '<p>tupp</p>'}
],
grouper: {
groupFn: function(record) {
return record.get('name')[0];
},
indexBar: true
},
},
listeners: {
select: function(view, record) {
var test = Ext.create('Ext.Panel', { fullscreen: true,
title: record.get('name'),
layout: {
type:'vbox'
},
items: [
{
xtype: 'panel',
html: record.get('html')
}
]
});
var mainnav = Ext.ComponentQuery.query('bookmarksmainnav')[0];
mainnav.setActiveItem(test);
}
},
itemTpl: '{name}'
}
]
}
});
Focus on the actual navigation bar thing, the other stuff is just code pasted (and I modified it somewhat), I'm pretty sure this is a bug though.
Thanks in advance!
you can try using a toolbar docked in the bottom of the page with the search field centered, I don't know why but the navigation bar ignores the centered property.
Something like this:
config: {
fullscreen: true,
navigationBar: {
},
items: [
{
xtype: 'toolbar',
docked: 'bottom',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
},
centered: true
}
],
},
{
title: 'MyNav',
xtype: 'list',
If you need the search field on the top of the screen you could try hiding the navigation bar with hidden: true and changing the docked property in the toolbar.
Hope it helps!
A better answer (for me) that just centres whatever you have added to the navigation bar, is:
this.getNavigationBar().leftBox.setCentered(true);
You will probably want to manage the centred-ness of the navigation bar for each page, though.
I used
layout: {
align: 'center',
pack: 'center',
type: 'hbox'
}
This would be just under the docked: 'bottom', line is the example above.
Regards
Jacko
Whenever I find it difficult to center a desired field, I just add a spacer before and after, combined with a flex for the item I want to center, it never fails. In this case:
items: [
{
xtype: 'spacer',
},
{
xtype: 'searchfield',
placeHolder: 'Search...',
listeners: {
keyup: function(field) {
}
flex: 0.7
},
{
xtype: 'spacer',
},