I have a TabPanel docked at the bottom of the application. It has several tabs. Instead of opening a new Panel for the Settings Tab, I wanted to add a popover list. On clicking any of the items in the list, where a new panel may/may not open.
I have no idea how to add Popovers in Sencha. Can anyone help ?
This is my code currently :
The Settings Tab (which needs to be a popover instead of the panel that it is currently) -->
App.views.Settings = Ext.extend(Ext.Panel, {
title : 'Settings',
id : 'Settings',
iconCls : 'settings',
floating : true,
modal : true,
hideOnMaskTap : true,
width : '20',
height : '20'
});
The main TabPanel (inside which the above Settings Panel is)
App.views.RootTab = Ext.extend (Ext.TabPanel, {
fullscreen : true,
tabBar : {
dock : 'bottom',
layout : {pack: 'center'}
},
cardSwitchAnimation : {
type : 'slide',
cover : true
},
defaults : {
scroll : 'vertical'
},
items : [
{xtype : 'MainView'},
{xtype : 'Settings'}
]
})
try App.views.Settings.show('pop');
NOTE:If its only showing panel as popup is your issue then the question was already asked and answered here
Hope this helps.
As this post points out, sencha have very exactly what you need.
Try this :
new Ext.Panel({
fullscreen : true,
items : [
{
xtype : 'toolbar',
docked : 'top',
items : [
{
text : 'Open',
handler : function (button) {
var panel = new Ext.Panel({
height : 200,
width : 200,
html : 'Hello'
});
panel.showBy(button, 'tr-bc?');
}
}
]
}
]});
Related
I want a firefox extension, so when you click on icon it opens popup and loads my page inside of the popup.
I have next issue. I need when I click on extension icon to pick up URL of the current tab and load my page in popup with sending that URL as query string.
So when you click on icon it opens popup and loads page like "http://example.com?url={current-URL}"
The issue is that it loads my page in popup once, and next time I click on extension it opens already rendered popup. Here is the code I am using:
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");
var tabs = require('sdk/tabs');
var button = ToggleButton({
id: "my-button",
label: "My button",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onChange: handleChange
});
var panel = panels.Panel({
width: 700,
height: 543,
contentURL: 'http://example.com?url='+ tabs.activeTab.url,
contextMenu : true,
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
So what I want is each time I click on extension icon it loads my page in panel AGAIN, not just show already rendered page. Is this possible and how I can do this, any help?
Panel's contentURL property has a setter defined, so changing the url is as simple as:
function handleChange(state) {
if (state.checked) {
panel.contentURL = 'http://example.com?url='+ tabs.activeTab.url,
panel.show({
position: button
});
}
}
(sencha fiddle for filefield inside fieldset)
I have a filefield inside a fieldset in extjs6. Fieldset is collapsed initially and I made filefield as button only. If I open the fieldset in chrome button shown and I don't see the button in firefox.
If I comment out line no 19 in the attached fiddle or make the fieldset open when starting, filefield looks good in both firefox and chrome.
Please refer the attached sencha fiddle and tell whats wrong.
Mohan, it sure does look like a bug.
I noticed that if you start out not collapsed then it works OK. So as a workaround you can chage your config to start out not collapsed and then collapse it in the afterrender:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'Fieldsets with Files',
//labelWidth: 75,
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
//layout: 'column', // arrange fieldsets side by side
items: [{
xtype : 'fieldset',
name : 'docAttachment',
border: 2,
title : '<b>Attach your document</b>',
collapsible : true,
//collapsed : true,
//layout : {
// type : 'hbox',
// align : 'center',
// pack : 'center'
//},
items :[{
xtype: 'fileuploadfield',
name: 'fileuploads',
buttonOnly: true,
buttonText : 'Select a File...'
}],
listeners:{
'afterrender':function(){this.collapse();}
}
}]
});
}
});
I have a panel in Sencha Touch. Inside of the panel I have a button. Now when I click on the button, I want to increase the width of the panel with custom css animations. This is my what I have tried so far.
Sencha Touch Code:
xtype:'panel'
id:'mypanel',
style:'width:300px;-webkit-transition:width 2s;transition:width 2s;'
items:
[
{
xtype:'button',
text:'Expand',
id:'expand'
}
]
Controller.js //on button click
Ext.getCmp('mypanel').addCls("expand");
Custom.css
.expand
{
width:600px;
}
Inside style of the panel, I have given some animation. But it doesnot work. Any help is appreciated.
You need to remove the inline style. And use 2 css classes.
Mypanel.js
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
config: {
centered: true,
cls: 'colapse', // Initialy added cls class
id: 'mypanel',
items: [
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
}
],
listeners: [
{
fn: 'onMybuttonTap',
event: 'tap',
delegate: '#mybutton'
}
]
},
onMybuttonTap: function(button, e, eOpts) {
Ext.getCmp('mypanel').setCls('expand'); // resetting style on button tap
}
});
custom.js
.expand
{
width:600px;-webkit-transition:width 2s;transition:width 2s;
}
.colapse
{
width:300px;-webkit-transition:width 2s;transition:width 2s;
}
In the above code initially i added the cls "colapse" to the panel and on the button tap event i set the cls to "expand" to the panel using the following code "Ext.getCmp('mypanel').setCls('expand')".
I have a partial view (asp.net MVC 3.0) to render Tinymce as a richeditor and want to show a text watermark on it.
#model String
#using Nop.Web.Framework.UI;
#{
Html.AddScriptParts(#Url.Content("~/Content/editors/tinymce/tiny_mce.js"));
//set useDefaultImagePlugin to 'true' if you want to move back to a standard image plugin
bool useDefaultImagePlugin = false;
var imagePluginName = useDefaultImagePlugin ? "image" : "netadvimage";
}
#Html.TextArea(string.Empty, /* Name suffix */
ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)
<script type="text/javascript">
//Notes: autosave plugin is disabled
(function () {
tinyMCE.init({
// General options
mode: "exact",
elements: "#ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
theme: "advanced",
height: "120px",
width: "100%",
verify_html: false,
plugins: "equation,netadvimage,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
// Theme options
theme_advanced_buttons1: "equation,#imagePluginName,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,pastetext",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: false,
// Example content CSS (should be your site CSS)
//content_css : "css/content.css",
convert_urls: false,
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js"
});
tinyMCE.focus(function () {
if ($(this).getContent() == "Type some text here") {
tinyMCE.setContent("");
} else if ($(this).getContent() == "") {
tinyMCE.setContent("Type some text here");
}
})
})();
</script>
and i tried to follow a similiar post at TinyMCE hint text as in the above script but it never shows anything on the textarea content.
Even with http://code.google.com/p/jquery-watermark/ , it only flickers the content and get blank instantly.
Thanks
I am using navButtonAdd to have a column chooser in my jqgrid but it adds the button to the bottom navigation bar. Is it possible to add the same icon to the top of my cloned navigation bar. Here is my code...
jQuery("#grid").jqGrid({
......
toppager: true,
....
);
jQuery("#grid").jqGrid('navGrid','#pager',
{cloneToTop: true, edit:false, add:false, del:false, search:false},
{ }, { }, { }, { } );
jQuery("#grid").jqGrid('navButtonAdd', '#pager', {
caption : "",
buttonicon : "ui-icon-calculator",
title : "Choose Columns",
onClickButton : function() {
jQuery("#grid").jqGrid('columnChooser');
}
});
If the toppager will be created it will have the id constructed from the grid id and "_toppager", so it will be "grid_toppager" in your case. So you should use
jQuery("#grid").jqGrid('navButtonAdd', '#grid_toppager', {...});
See here and here for more details and for demos.
For basic functionality, setting the toppager: true and cloneToTop: true would suffice as below.
$("#list").jqGrid({
pager: '#pager',toppager: true
});
$("#list").jqGrid('navGrid',"#pager",{
cloneToTop:true
});