jEasyUI, Toolbar in tab - javascript

I would like to add a toolbar to a tab, but I cannot find anything regarding that in the documentation. I understand a tab is basically a panel. Is it possible to access that and add the toolbar?
My goal is to have a toolbar in each tab with for example a submit button that submits a form in the tab.
I am using the following code to add the tabs:
function addTab(title, url){
if ($('#main-tabs').tabs('exists', title)){
$('#main-tabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#main-tabs').tabs('add',{
title:title,
content:content,
closable:true
});
}
}
Thanks in advance!
Michael

jeasyui has a toolbar function within the tabs. It's good enough for my purpose so I'll go with that for now.
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});

Related

Saving several tab panels with one button

I have three seperate tab panels with each being a table in my database. What i'm trying to do is that on a click of a button is save the content of all the three tabs in the database at the same time. I managed to get the PK "Aid" of the current active tab, however when i try to access the second inactive tab B with window.frames["frm_B"] and alerting the result, i'm getting undefined. Any help would be much appreciated.
tabPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
activeTab: 0,
autoScroll: true,
tbar: [{
xtype: 'button',
text: 'Save',
handler:function(){saveForm("frm_A", save);}
}],
items: [
{
id:"panel_A",
html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",
},{
id:"panel_B",
html: "<iframe src='"+B_url+"' width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
},{
id:"panel_C",
html: "<iframe src= '"+C_url+"' width='100%' height='100%' id='frm_C' name='frm_C' frameborder=0 />",
}]
});
viewport = new Ext.Viewport({
layout:'border',
items:[tabPanel]
});
function save(record){
var Aid = record.getKey();
var doc = window.frames["frm_B"];
alert(doc);
try {
doc.RECORD.getField("A_ID").setRealValue(Aid);
doc.RECORD.update(closeAndRefresh, viewExtError);
}
catch(e){
showError(e);
}
}
I guess your problem is that your <iframe name='frm_B'> is not rendered (added to DOM) when you try to get it with window.frames["frm_B"].
When you create tab panel with Ext.create('Ext.tab.Panel', {}); you just create JS object, not all of its items: [] added to DOM immediatelly.
A Container's child Components are rendered by that Container's layout
manager when the Container is first rendered.
For example tabpanel tabs added to DOM when you first time open that tab.
Fiddle to illustrate it
Solution for your question depends on your code actually, but as workaround you can use .render() method of tab panel child panels...

How do I know which element was clicked in context menus?

We develop extensions for Chrome, Firefox and Safari. We want to add context menus to our extensions that will show when right clicking on any form element which is editable. I tried to add an editable context menu to Chrome:
chrome.contextMenus.create({
"title": "Test editable menu item",
"contexts": ["editable"],
"onclick": function(info, tab) {
console.log("item " + info.menuItemId + " was clicked");
console.log("info: " + JSON.stringify(info));
console.log("tab: " + JSON.stringify(tab));
}
});
But I need to know which element the user clicked on, and info and tab don't contain the element. How do I know which element the user clicked? I would like to have a jQuery object containing the element.
The info object contains the following attributes:
"editable": true
"menuItemId"
"pageUrl"
One of the best workarounds I know of is to follow the advice given in this thread to use content scripts to inject a listener in the target page for the 'contextmenu' event.
I know that is to late for you but I answer here for anyone else who's google it.
My solution was to create a mapping between created menu items and the business model (in this case a "data" array):
var itemsDic = {};
function onClickHandler(info) {
alert(itemsDic[info.menuItemId]);
};
for(i in data) {
var currentItem = chrome.contextMenus.create({
parentId: item,
title: data[i].ItemName,
type: data[i].ItemType,
contexts: ["editable"],
onclick : onClickHandler
});
itemsDic[currentItem] = data[i];
}

Listview populates on first load, but not if you visit page by clicking a link

I'm just learning Adobe Air with JQuery, and I'm using some sample code from a Sitepoint tutorial. I've encountered a rather unusual problem. If I view the page with the list view by using the "Preview in Adobe Air" option in Dreamweaver, it populates fine. If I navigate away from the page and come back to it, the listview doesn't populate, and the rest of the javascript on the page stops working.
This is the code for populating the listview:
function ListNotes() {
var notes = GetNotes();
$("#notes").empty();
var numRecords = notes.data.length;
for (i=0;i<numRecords;i++) {
$('#student-list').append("<li><a href=\"#\">"+unescape(notes.data[i].name)+" "+unescape(notes.data[i].lastseen)+"<br \/>"+unescape(notes.data[i].belt)+"<br \/>Last Session: <\/a><\/li>");
}
$('#student-list').listview('refresh');
$(".note_time a").click(function(){
var currHash = $(this).attr("href").split('/');
var id = currHash[1];
var dbQuery = new air.SQLStatement();
dbQuery.sqlConnection = db;
dbQuery.text = "DELETE FROM students WHERE id=" + id;
try {
dbQuery.execute();
} catch (error) {
air.trace("Error deleting note from DB:", error);
air.trace(error.message);
return;
}
ListNotes();
});
}
The listview goes inside a div:
<div data-role="content" data-theme="a"><ul data-role="listview" data-inset="true" id="student-list" data-filter="true"></ul></div>
There's a snippet in notes.js that populates the listview:
$(document).ready(function(){
BindEvents();
CreateMenus();
SetupDB();
ListNotes();
});
The page works fine on first loading via "Preview in Adobe Air", but doesn't work at all if you navigate to it via clicking a button inside the app. I suspect I'm missing something really obvious but would appreciate any tips.
Thanks
I would try this:
$(".note_time a").on('click', function(){
//your code here
});

Google Chrome Omnibox API -- automatically select first option on enter

So I'm trying to build a simple Omnibox extension for Chrome for personal use. It works like any other Omnibox extension: you enter the extension keyword and press tab, which gives the extension control of the omnibox. Then you type in a phrase or whatnot and a list of suggestions pop up below the omnibox. Then you can use the arrow keys or mouse to select a suggestion and then the browser navigates to the page associated with that suggestion. All of that works perfectly fine.
However, what I'd like it to do is that when I press enter in without having selected a suggestion, I'd like the browser to go to the first suggestion from the suggestion list. Instead what happens right now, I get this error page:
I couldn't find any answers in the documentation on this. This is what my code looks like right now (in background.js):
chrome.omnibox.onInputChanged.addListener(
function(text, suggest)
{
text = text.replace(" ", "");
suggest([
{ content: "http://reddit.com/r/" + text, description: "reddit.com/r/" + text },
{ content: "http://imgur.com/r/" + text, description: "imgur.com/r/" + text }
]);
}
);
chrome.omnibox.onInputEntered.addListener(
function(text)
{
chrome.tabs.getSelected(null, function(tab)
{
chrome.tabs.update(tab.id, {url: text});
});
}
);
chrome.omnibox.setDefaultSuggestion({ description: "visit /r/%s" });
So is there a way of setting the default action when the enter is pressed without a suggestion being selected? Sort of like the custom search functionality works by default in the Chrome omnibox?
Within chrome.omnibox.onInputChanged.addListener(), you'll want to call chrome.omnibox.setDefaultSuggestion().
So when you type something in the Omnibox, you'll want to make the first suggestion become the default suggestion (so you don't have to press the Down Arrow), and then suggest() any remaining suggestions like normal.
Example:
chrome.omnibox.onInputChanged.addListener(
function(text, suggest)
{
text = text.replace(" ", "");
// Add suggestions to an array
var suggestions = [];
suggestions.push({ content: "http://reddit.com/r/" + text, description: "reddit.com/r/" + text });
suggestions.push({ content: "http://imgur.com/r/" + text, description: "imgur.com/r/" + text });
// Set first suggestion as the default suggestion
chrome.omnibox.setDefaultSuggestion({description:suggestions[0].description});
// Remove the first suggestion from the array since we just suggested it
suggestions.shift();
// Suggest the remaining suggestions
suggest(suggestions);
}
);
chrome.omnibox.onInputEntered.addListener(
function(text)
{
chrome.tabs.getSelected(null, function(tab)
{
var url;
if (text.substr(0, 7) == 'http://') {
url = text;
// If text does not look like a URL, user probably selected the default suggestion, eg reddit.com for your example
} else {
url = 'http://reddit.com/r/' + text;
}
chrome.tabs.update(tab.id, {url: url});
});
}
);

onclick open window and specific size

I have a link like this:
<a href="/index2.php?option=com_jumi&fileid=3&Itemid=11" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,')
I want the new opening window to open in a specific size. How do I specify the height and width?
<a href="/index2.php?option=com_jumi&fileid=3&Itemid=11"
onclick="window.open(this.href,'targetWindow',
`toolbar=no,
location=no,
status=no,
menubar=no,
scrollbars=yes,
resizable=yes,
width=SomeSize,
height=SomeSize`);
return false;">Popup link</a>
Where width and height are pixels without units (width=400 not width=400px).
In most browsers it will not work if it is not written without line breaks, once the variables are setup have everything in one line:
Popup link
window.open ("http://www.javascript-coder.com",
"mywindow","menubar=1,resizable=1,width=350,height=250");
from
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
:]
window.open('http://somelocation.com','mywin','width=500,height=500');
Just add them to the parameter string.
window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250')
<a style="cursor:pointer"
onclick=" window.open('http://YOUR.URL.TARGET','',' scrollbars=yes,menubar=no,width=500, resizable=yes,toolbar=no,location=no,status=no')">Your text</a>
These are the best practices from Mozilla Developer Network's window.open page :
<script type="text/javascript">
var windowObjectReference = null; // global variable
function openFFPromotionPopup() {
if(windowObjectReference == null || windowObjectReference.closed)
/* if the pointer to the window object in memory does not exist
or if such pointer exists but the window was closed */
{
windowObjectReference = window.open("http://www.spreadfirefox.com/",
"PromoteFirefoxWindowName", "resizable,scrollbars,status");
/* then create it. The new window will be created and
will be brought on top of any other window. */
}
else
{
windowObjectReference.focus();
/* else the window reference must exist and the window
is not closed; therefore, we can bring it back on top of any other
window with the focus() method. There would be no need to re-create
the window or to reload the referenced resource. */
};
}
</script>
<p><a
href="http://www.spreadfirefox.com/"
target="PromoteFirefoxWindowName"
onclick="openFFPromotionPopup(); return false;"
title="This link will create a new window or will re-use an already opened one"
>Promote Firefox adoption</a></p>
Using function in typescript
openWindow(){
//you may choose to deduct some value from current screen size
let height = window.screen.availHeight-100;
let width = window.screen.availWidth-150;
window.open("http://your_url",`width=${width},height=${height}`);
}
Anyone looking for a quick Vue file component, here you go:
// WindowUrl.vue
<template>
<a :href="url" :class="classes" #click="open">
<slot></slot>
</a>
</template>
<script>
export default {
props: {
url: String,
width: String,
height: String,
classes: String,
},
methods: {
open(e) {
// Prevent the link from opening on the parent page.
e.preventDefault();
window.open(
this.url,
'targetWindow',
`toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=${this.width},height=${this.height}`
);
}
}
}
</script>
Usage:
<window-url url="/print/shipping" class="btn btn-primary" height="250" width="250">
Print Shipping Label
</window-url>
Using a button to refer to another window with a single click
<Button onClick={() => {window.open("https://www.google.com")}}>
Button Description
</Button>

Categories