I am having one view which is in card layout.
Card is having 2 sub views.
Now I want to get the activeitem.
In extjs I am using this code:
activeItem = layout.getActiveItem().itemId;
but in sencha touch , for card layout , there is no such method named getActiveItem() for card layout.
I have referred sencha touch docs and I found that.
Anybody knows the alternative for this?
var panel = Ext.create('Ext.Panel', {
layout: 'card',
items: [
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
});
panel.setActiveItem(1);
It also have getActiveItem() method to work with.
Refer http://docs.sencha.com/touch/2-1/#!/api/Ext.layout.Card
Related
Using vue v2.5 with vueCLI 3 trying to have a v-data-table that on each row have a button, when this button clicked should make it appear as loading.
v-btn has loading property by default, really I don't know why is not working...
<v-data-table
:headers="headers"
:items="records"
#dblclick:row="editRowCron_jobs">
<template v-slot:[`item.actions`]="props">
<v-btn color="blue-grey" :loading="props.item.createloading" fab dark small #click="ManuralRun(props.item)">
<v-icon dark>mdi-google-play</v-icon>
</v-btn>
</template>
</v-data-table>
On the click method, I can read but not set the item
export default {
data() {
return {
headers: [
{ text: "id", value: "id", align: " d-none" },
{ text: "actions", value: "actions" }
],
records: [] //grid rows filled by API
}
},
methods: {
ManuralRun(item){
this.records[2].createloading=true; //even I set it like that, nothing happens
item.createloading = true; //property changed here - ok
console.log(item); //here outputs the clicked item - ok
},
so, according to this
the property MUST pre-exist in the array, that means, when we get the result from the API, we have to add the property as:
this.records = data.data.map(record => {
return {
createloading: false,
...record
}
})
I'm trying to add a colorbutton in a TinyMCE dialog box to replace my old color selector which was initially created with a select input.
See : ColorButton : API 4.X
This class creates a color button control. This is a split button in which the main button has a visual representation of the currently selected color. When clicked the caret button displays a color picker, allowing the user to select a new color.
I can add and see the new colorbutton in the dialog box but it doesn't show the colorpicker when clicked.
Here is my code:
editor.windowManager.open( {
title: 'Choose color',
body: [
{
type: 'listbox',
name: 'bg-color',
label: 'Color (select)',
'values': [
{text: 'White', value: '#FFF'},
{text: 'Black', value: '#000'},
{text: 'Silver', value: 'silver'},
]
},
{
type: 'ColorButton',
name: 'bg-color2',
label: 'Color (colorpicker)',
},
],
onsubmit: function(e) {
// Do something here
}
});
And you will find a tinymce fiddle here to illustrate this issue:http://fiddle.tinymce.com/sfeaab
Since my debugger doesn't show any JS error, is there something wrong in this code or is there another way to add a colorpicker in a dialogbox?
Thanks!
#MavBzh I think you've a wrong perception on how the color button works. The ColorButton UI is only help with rendering a button which not much difference with PanelButton UI. you can see this example http://fiddle.tinymce.com/sfeaab/3 in this fiddle I use textcolor plugin example.
So, in order to use color button you're required to specify the Panel to hold the color picker.
{
type: 'colorbutton',
name: 'color',
text: 'Color',
selectcmd: 'ForeColor',
panel: {
role: 'application',
ariaRemember: true,
html: renderColorPicker,
onclick: onPanelClick
},
onclick: onButtonClick
}
then later set onclick callback action and render the color picker HTML output yourself, the renderColorPicker function is used as the panel content, then assigned onPanelClick callback to put the color to the text placeholder in the ColorButton.
PS: in the fiddle I used v4.0.21
I'm new using Sencha Touch 2, and I've started developing a Tablet App. I'm using Sencha Architect for design and write the code, and my app has a card layout with "left-side" and "right-side". On the left I have a main menu with some buttons. This menu is all time on the left. On the right side, I want to change the views depending what menubutton was clicked and where the user want to go (It will have more than 3 levels navigation after every button click).
My problem now is "How to change the views?". Until now, I had a Navigation.View on the right, and I has using this.getPanelFrame().push(view); method. I have problems with toolbars when a load something into navegation.view, and I know how to create views and push, but after thant I dont know how to load this views again.
I Link too an image where you can the structure of my components. My main doubt is: do I have to use a navigation.view as a "frame" to load inside other views? How to change an load others? Any alternatives?
Thanks a million"
CONTROLLER
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
panelFrame: '#PanelFrame'
},
control: {
"button#btnclientes": {
tap: 'onBtnclientesTap'
},
"#btnpedidos": {
tap: 'onBtnpedidosTap'
}
}
},
onBtnclientesTap: function(button, e, options) {
var view = Ext.create("MyApp.view.ClientesListView");
this.getPanelFrame().push(view);
},
onBtnpedidosTap: function(button, e, options) {
var view = Ext.create("MyApp.view.ClientesNewView");
this.getPanelFrame().push(view);
}
});
why dont you create a container in the right side.
and then in the items: call each view with the xtype
{
xtype: 'container',
items: [
{
xtype: 'view1',
id: 'Cview1',
hidden:true,
},
{
xtype: 'view2',
id: 'Cview2',
hidden:true,
},
{
xtype: 'view3',
id: 'Cview3',
height:'auto',
hidden:true,
}]
and then in the handler of the button you just hide the other views and show your selected view like:
{
xtype: 'button',
handler:function(){
Ext.getCmp('Cview1').hide();
Ext.getCmp('Cview2').hide();
Ext.getCmp('Cview3').show();
}
}
I created a context menu in my chome extension as a checkbox, I am successfull to create the menu which will be visible only for editable field.
The problem is I need to display menu as checked, according to a data attribute in the textfield(focused element). With the following code, it is displaying checked in a global level(means if i checked the menu in one page/elemebt is will remains checked for other page/elements as well.)
How can I make it checked/unchecked according to the element's data attribute ?
var addinMenu = chrome.contextMenus.create({
"title": "My Addin Menu",
"contexts": ["editable"]
});
var disableOrEnable = chrome.contextMenus.create({
"type": "checkbox",
"title": "Disable",
"parentId": addinMenu,
"id": "myaddin_disable",
"checked": true,
"contexts": ["editable"],
"onclick": disableOrEnableMyAddin
});
Call chrome.contextMenus.update() when the menu properties should change, e.g.:
chrome.contextMenus.update(
disableOrEnable,
{ type: 'checkbox', checked: false });
It looks like you can catch the oncontextmenu event and make changes that are immediately reflected in the posted menu (but I see from Rob W's comment there may be a race condition with that). This works for me:
var contextMenu = chrome.contextMenus.create(
{
type: 'checkbox',
title: 'how now brown cow',
checked: false,
contexts: ['all']
});
var element = document.getElementById('hello');
element.addEventListener(
'mouseover',
function(e) {
element.setAttribute('underMouse', 'true');
});
element.addEventListener(
'mouseout',
function(e) {
element.setAttribute('underMouse', '');
});
window.oncontextmenu = function(e) {
chrome.contextMenus.update(
contextMenu,
{
type: 'checkbox',
checked: element.getAttribute('underMouse') == 'true'
});
}
If you're just interested in the currently focused textfield you could also just change your menu in focus and blur events. You may also want to check out the 'editable' option to the contexts menu property (not sure what that does but sounds like it might restrict the menu to text input elements).
Is it possible to create a item in a tabbar-ed card layout, that has no tab?
I want to create a message overlay that stretches from screen top to the tab bar and doesn't cover the tab bar. When i do this by adding an item to the panel everything works fine except a blank icon is created on the tabbar. Is there a way to prevent this icon from being created?
you can create the new item with hidden: true config option
Ext.define('App.view.settings.SettingsContainer', {
extend: 'Ext.tab.Panel',
xtype: 'settingsContainer',
requires : [
...
],
config: {
tabBar: {
docked: 'top'
},
tab: {
title: 'Settings',
iconCls: 'user'
},
items: [{
xtype: 'settingsAccountContainer'
}
, {
xtype: 'changeCompanyView',
hidden: true
}]
}
});
changeCompanyView is created, but no tab icon is visible.
It could be activated by
settingsContainer.setActiveItem(1);
Cheers, Oleg
This should work. Add the overlay to the child item and not the tab panel.
childPanelItem.add(
Ext.create('Ext.Panel',
{
xtype:'panel',
html:'Demo',
top:0,
left:0,
right:0,
bottom:0
}
)
);
If you add to the child panel the icon will not appear on the tab bar.