I'm experiencing an issue with Ext.net TabPanel. When the page with tab panel is opened first time after the app was rebuilt it throws Uncaught TypeError: Object [object Object] has no method 'getComponent'. The problem happens each time the application is rebuilt and then disappears after page refresh. Here's JS code I use to create a tab:
#X.XScript().ScriptBlock(#"
<script>
var addMainTab = function (tabPanel, id, url, title) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : title,
closable : true,
loader : {
url : url,
renderer : 'frame',
loadMask : {
showMask : true,
msg : 'Loading ' + url + '...'
}
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
");
It's called on menu item click:
menuItem.Listeners.Click.Handler = "addMainTab(#{MainTabPanel}, 'someId', 'someurl', 'Tab title')";
As I figured out some functions (getComponent, addTab and others) are not included into the definition of TabPanel at first load of the page after rebuild. Does anyone have any idea why it may happen and how it can be fixed? I'd appreciate any help.
Don't use #{control} name in Razor code. Use App.ControlNameHere to reference the object in question. #{control} is only used in webforms.
Does the ExtJS framework files get loaded before this code is executed?
take a look at this question ,which I mentioned how I add tab panel to the main page.
Related
I got rid of the O365 bar and the edit bar (#s4-ribbonrow) on my site for styling purposes. I want the user to still be able to use the functionality that the "quick edit" button provides when they select a list item. How can i implement the same functionality in a custom button on my page?
Open SharePoint quick edit mode for view
SharePoint uses this method :
EnsureScriptParams('inplview', 'InitGridFromView', 'VIEW ID');return false;
So, your sample anchor element:
<a onclick="EnsureScriptParams('inplview', 'InitGridFromView', SP.ListOperation.ViewOperation.getSelectedView());return false;">TEST</a>
Use SP.ListOperation.ViewOperation.getSelectedView() to get view ID in older sharepoints, or use _spPageContextInfo.viewId in SharePoint Online
Open SharePoint edit item dialog
Use SP.ListOperation.Selection.getSelectedItems() to get selected items from view.
click button handler should look something like this:
if (SP.ListOperation.Selection.getSelectedItems().length === 1) {
var itm = SP.ListOperation.Selection.getSelectedItems()[0];
var _url = _spPageContextInfo.siteServerRelativeUrl + '/' + _spPageContextInfo.layoutsUrl + '/listform.aspx?PageType=6&ListId=' +_spPageContextInfo.pageListId + '&ID=' + itm.id;
console.log(_url);
var options = {
title: "Edit item",
width: 500,
height: 600,
showClose: true,
allowMaximize: true,
autoSize: true,
url: _url
};
SP.UI.ModalDialog.showModalDialog(options);
}
The hardest part is generating proper url:
PageType=6 means editform, value of 4 means dispform
To properly link to listform.aspx page you need to use some of _spPageContextInfo properties like list id, server relative url and layouts folder url
I'm using CKEditor v4 and I made an homemade plugin (tu upload image and edit informations). 2 tabs (upload and edit informations) work good, but I want to set title of dialog using condition (new image or edit existing image). Is there a way to give a parameter to dialog fuciton when I call CKEDITOR.dialog.add or change the title on the onShow event or other issue ?
Thx a lot for your help and sorry for my frenchy english !
I had the same problem and couldn't find an 'official' way, I was however able to change the title dynamically using following workaround (this is a CKEDITOR.dialog element):
this.getElement().getFirst().find('.cke_dialog_title').getItem(0).setText('[insert new title here]')
Basically, you go via the actual DOM of the dialog element (getElement().getFirst()), retrieve the title DOM element (find('.cke_dialog_title').getItem(0)), and set the text there. This relies solely on the CSS class name of CKEditor, so isn't really stable, but it's a start.
$(dialog.parts.title.$).text(someTitleText)
in short:
CKEDITOR.dialog.add('dynamictitle', function (editor) {
...
...
return {
title: "initial title here",
...
...
// set title onLoad(),or onShow()
onLoad: function () {
var currentTitle = editor.config.dynamictitle;
var dialog = CKEDITOR.dialog.getCurrent();
$(dialog.parts.title.$).text(currentTitle)
}
}
});
...
in your page:
CKEDITOR.replace('<ckeditorelementid>', {
.....
.....
dynamictitle: <title text value>,
.....
.....
});
How can I call a plugin function without a toolbar button?
I have an external floating toolbar integrated in my cms. I insert images, videos and other pieces of static code with the InsertHTML() API of CKEditor.
Now I need to insert also video from URL, and there is the fantastic oembed plugin. How can I fire that plugin using a button in my cms without the toolbar button?
I load the plugin in my config, and I try to create this function:
function oembed() {
// Get the editor instance that we want to interact with.
var editor = CKEDITOR.instances.editor1;
var url = 'http://www.youtube.com/watch?v=AQmbsmT12SE'
var wrapperHtml = jQuery('<div />').append(editor.config.oembed_WrapperClass != null ? '<div class="' + editor.config.oembed_WrapperClass + '" />' : '<div />');
// Check the active editing mode.
if ( editor.mode == 'wysiwyg' )
{
// Insert HTML code.
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml
editor.embedCode(url, editor, false, wrapperHtml, 650, 400, false);
}
else
alert( 'You must be in WYSIWYG mode!' );
}
The result is this:
Uncaught TypeError: Object [object Object] has no method 'embedCode'
Is there any way to create a new API like "InsertHTML" to call plugin functions without toolsbar buttons?
EDIT
Maybe I can use the createFakeElement API.
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-createFakeElement
I add the class fakegallery to my doc.
I use this code but nothing happens:
function Fake()
{
var editor = CKEDITOR.instances.editor1;
var element = CKEDITOR.dom.element.createFromHtml( '<div class="bold"><b>Example</b></div>' );
alert( element.getOuterHtml() );
editor.createFakeElement( element, 'fakegallery', 'div', false );
}
I found this post looking for the answer...
Checked out the link provided in the answers here [ http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-fire ], scrolled down to execCommand
This worked for me and only requires that you know the name of your plugin, so it'll always work. Obviously, you may need to change "editable" to your editor instance.
CKEDITOR.instances['editable'].execCommand('YOUR_PLUGIN_NAME_HERE');
If above fails, HACK:
This would work (first line of code below), but requires you to look at the source to find the correct #. If you have 1 custom plugin, no big deal. But if you have a dozen or more, like me, this is annoying, and could change as more plugins are added.
CKEDITOR.tools.callFunction(145,this);
Hope this helps!
Read this:
http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-fire
editor.fire( 'MediaEmbed', data);
I think that this is the structure that your data needs to have:
var data = {title : 'Embed Media',
minWidth : 550,
minHeight : 200,
contents :
[
{
id : 'iframe',
expand : true,
elements :[{
id : 'embedArea',
type : 'textarea',
label : 'Paste Embed Code Here',
'autofocus':'autofocus',
setup: function(element){
},
commit: function(element){
}
}]
}
]}
I'm not secure but this will help you on the way.
Look at the Source code of the plugin to find the available commands.
The command name that i specified above is the only one that your plugin haves.
EDIT - Manual inserting
var div = editor.document.createElement('div');
div.setHtml("<embed src=" + url +" width=" + width +" height=" + height + ">");
editor.insertElement(div);
You can add every attribute you like, Type?? maby? Autofocus??
I wish to add a single menu item to the firefox context menu that shows up
only if the user right-clicks a specific url. I have a function to test the url.
I used to do this by subscribing to "popupshowing" event and:
var item = document.getElementById("custom-menu-id");
if (item) // show only for specific links
item.hidden = gContextMenu.onLink && acceptableURL(gContextMenu.linkURL);
I'm trying now to use the Add-on SDK, but there I no longer have access to gContextMenu.
This snippet from the documentation doesn't work for me:
var cm = require("sdk/context-menu");
cm.Item({
label: "Copy name to clipboard",
context: cm.URLContext("http://scholar.google*"),
contentScript: 'self.on("context", function(node) {return true; });'
});
Here I'd think that it should be possible to get something like node.URL and test that,
but it doesn't work. Maybe someone could suggest either how to get access to gContextMenu from the sdk or how to get URL from node or something else.
This code should only show the menu item when right-clicking on links directed at stackoverflow.com:
In your main module main.js:
exports.main = function() {
require("sdk/context-menu").Item({
label: "stack overflow link",
context: require("sdk/context-menu").SelectorContext("a[href]"),
contentScriptFile: require("sdk/self").data.url("check-node.js"),
onMessage: function(msg){},
});
};
In your content script (or content script file; in this case, check-node.js):
self.on("click",function(node,data){
self.postMessage("click");
});
self.on("context", function(node){
if(node.href && node.href.match(/^https?:\/\/(\w+\.)*stackoverflow\.com(\/.*)?$/))return true; //show in context menu if return value is true.
});
Re: Your sample code. You have URLContext which determines what pages your menu items show up on and this snippet self.on("context", function(node) {return true; }); causes the menu item to always show when URLContext conditions are met. Use SelectorContext instead. And test the node.href as shown above, returning true only if you want the menu item to show.
I'm using titanium studio to package an app we are currently working on, and one of the pages is a webview to a mobile version of our site. This all works and looks great, but when the user navigates to a new url, going backwards is impossible. I've tried several methods to set up a back button/ navigation group to solve this problem, but nothing seems to work. What would be the best way to either to load the next page into the nav group, or trigger a back button to appear upon a new page being loaded?
So far I have tried:
Creating a navigation group and firing an event upon opening a new
window to add it as a child.
Creating a button and removing/adding it depending on canGoBack()
Having a constant button exist that only fires if goBack() is
defined
var btnBack = Titanium.UI.createButton({
title : '< ',
top : 0,
left : 0,
height : '10%',
});
var btnFwd = Titanium.UI.createButton({
title : ' >',
top : 0,
right : 0,
height : '10%',
});
var webView = Titanium.UI.createWebView({
url : 'http://gooogle.com',
canGoBack : true,
canGoForward : true,
top : '10%',
height : '90%',
});
btnBack.addEventListener('click', function() {
webView.goBack();
});
btnFwd.addEventListener('click', function() {
webView.goForward();
});
var win1 = Titanium.UI.createWindow({
backgroundColor:'#fff',
});
win1.add(btnBack);
win1.add(btnFwd);
win1.add(webView);
win1.open();
Does this solve your issue? if this doesn't, please clarify what do you need to do??