I am writing to Tinymce extension, the purpose of extension is to allow the user make comments on the text.
When I click the comment button opens me input. I'm trying to change the style has a width and higher, I could but it does not look good.
Attaching code and picture.
plugin js
tinymce.PluginManager.add('comments', function(editor/*, url*/) {
// Add a button that opens a window
editor.addButton('comments', {
title: 'comment',
//text: 'My button',
//icon: false,
image: "https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/comment-outline-silence-128.png",
onclick: function() {
// Open window
editor.windowManager.open({
title: 'write comment ',
body: [
{type: 'textbox', name: 'title', label: 'Post a Comment', value: "hello", height: 40,
width: 30}
],
width: 800,
height: 400,
onsubmit: function(e) {
// Insert content when the window form is submitted
let div= document.createElement("span");
div.style.backgroundColor="lightblue";
div.innerHTML=editor.selection.getContent();
let span= document.createElement("span");
div.appendChild(span);
span.innerHTML = e.data.title;
span.classList.add ("comment");
editor.insertContent(div.outerHTML);
}
});
}
});
index.html
<!DOCTYPE html>
<html>
<head>
<script src="/js/tinymce/tinymce.js"></script>
<script>tinymce.init({ selector:'textarea', plugins: 'comments', toolbar: 'comments', content_css : '/js/tinymce/plugins/comments/styleComments.css' });</script>
</head>
<body>
<textarea>Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>
It does not look good, how can I design it in general in addition to height and width.
Thank you all
In your body try defining the field this way:
{
type: 'container',
label : 'fit',
layout: 'fit',
minWidth: 160,
minHeight: 160,
items: [{
type: 'textbox',
label: 'textbox',
value: 'Fit will take all the space available.'
}]
}
... or this way...
{
type : 'textbox',
name : 'textbox multiline',
label : 'textbox multiline',
multiline : true,
value : 'default value\non another line'
}
Related
I need to change the text of the title of the tab in a TabPanel, but I don't want that this will affect every other TabPanel in the application, just this TabPanel.
I tried adding a CSS class by the cls property, by the itemCls property, and by this:
defaults: {
cls: 'aClass'
}
The CSS:
.aClass {
font-size: smaller;
}
But they all look the same:
Nothing seemed to work. How am I able to achieve that?
You should indeed use the cls property on your tabpanel and then have a custom CSS selector that would only point to that tabpanel:
See here: http://jsfiddle.net/49Dc8/
JS
Ext.require('Ext.tab.*');
Ext.onReady(function(){
// basic tabs 1, built from existing content
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs1',
cls: 'mytab',
width: 450,
plain: true,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [{
contentEl:'script',
title: 'Short Text'
},{
contentEl:'markup',
title: 'Long Text'
}]
});
});
CSS
.mytab .x-tab-inner{
font-size: 13px;
}
index.html
<script type="text/javascript" src="resources/js/ext-all.js?"></script>
<script type="text/javascript" src="resources/js/tabs-adv.js?"></script>
tabs-adv.js
create a tab panel then load the vehicle.html with loader
....
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
id : 'tabspanel',
cls : 'MainPanel',
resizeTabs: true,
enableTabScroll: true,
width: window.innerwidth,
height: window.innerHeight - 30, //30 because menu height is 30px
tabBar: {
layout: { pack: 'center' }
},
defaults: {
autoScroll: false, //close the tab scrolling
bodyPadding: 0 //must 0,not margin at all
},
items: [
{
closable: false,
//html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="vehicle/vehicle.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
loader: {
autoLoad:true,
url :'vehicle/vehicle.html'
},
iconCls: 'bus32',
title: 'Vehicle Manage'
}]
})
vehicle.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Ext includes -->
<script type="text/javascript" src="vehicle.js?<?php echo time(); ?>"></script>
<title>Untitled Document</title>
</head>
<body>
aa
<div id="toolbar"></div>
</body>
Unfortunately Loader didn't load the vehicle.js
loader only load the html content, but not included vehicle.html javascript.
any way to solve this problem?
p/s: i m facing this problem EXT JS failed to load multi pages at the same time , both tabs are load at the same time with the ext-all.js will cause the application error, i have to try to use loader to prevent this happen,
I have tried, if the tabs are loaded with different ext-all.js will not be occured error, example first tab load ext-all.js, second tabs will load ext-all1.js 3th tab will load ext-all2.js.
UPDATE
vehicle.js and driver.js also having the grid panel
vehicle.js
Ext.define('MyApp.view.MyVehicleGridPanel', {
id:'mygridpanel',
extend: 'Ext.grid.Panel',
renderTo: Ext.getBody(),
width: window.innerWidth,
header: false,
height: window.innerHeight,
store: UserStore,
multiSelect: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
dataIndex: '_id',
text: 'Vehicle ID'
},
{
xtype: 'gridcolumn',
width: 126,
dataIndex: 'Plat_No',
text: 'Plat Number'
},
{
xtype: 'gridcolumn',
width: 200,
dataIndex: 'Name',
text: 'Added By'
}
],listeners: {
itemclick: function(dv, record, item, index, e) {
if (record.get('_id') > 0){
Ext.getCmp('BtnEdit').enable();
Ext.getCmp('BtnDelete').enable();
}else{
Ext.getCmp('BtnEdit').disable();
Ext.getCmp('BtnDelete').disable();
};
}},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
cls: '',
width: 65,
id : 'BtnAdd',
icon: '',
iconCls: 'add',
text: 'Add'
},
{
xtype: 'button',
cls: '',
id : 'BtnEdit',
width: 65,
icon: '',
iconCls: 'edit',
disabled: true,
text: 'Edit'
},
{
xtype: 'button',
cls: '',
id : 'BtnDelete',
width: 65,
icon: '',
iconCls: 'delete',
disabled: true,
text: 'Delete'
},
{
xtype: 'button',
cls: '',
id : 'BtnRefresh',
width: 65,
icon: '',
iconCls: 'refresh',
text: 'Refresh'
}
]
}
]
});
me.callParent(arguments);
}
});
var gridwin = Ext.create('MyApp.view.MyVehicleGridPanel');
The loader is not supposed to load your javascript. With extjs, you should have only one javascript file. Use events to execute javascript code while rendering your panels, especially use the render event.
Put your vehicle.js in your main .js file and remove the last line. This one goes into the event listener.
Change your tab item using an event handler
items: [{
closable: false,
loader: {
autoLoad:true,
url :'vehicle/vehicle.html'
},
iconCls: 'bus32',
title: 'Vehicle Manage',
listeners: {
render: function(){gridwin = Ext.create('MyApp.view.MyVehicleGridPanel')}
}
}]
General remark 1: Do your homework and read the documentation. Stick to the recommended way. Why are you trying to work in such a convoluted way ? It shows that you didn't take the time to read and apply the basics.
General remark 2: You should concatenate all your .js sources in the production environment. The best thing is to use sencha cmd. You have to create an empty app, an then copy all your project into that empty app.
It's definitely possible to mix up ExtJS with static pages - rather suitable for print previews or alike.
A secondary DOM needs to be created within an iFrame, which will cause the JS on page to execute - because it circumvents the ExtJS Loader completely - and therefore scripts will be properly parsed.
Here's an example, proven to be working (reduced to the least required):
items : [{
xtype: 'component',
autoEl: {tag: 'iframe', src: ''}
}],
listeners: {
boxready: function(){
this.items.items[0].el.dom.src='vehicle.html';
}
}
The listener for boxready causes some delay in execution (which was required for what I did).
When reading other answers, I'd comment: How about thinking out of the box, once?
... which even literally applies in this particular case :)
One simply has to know the rules in order to break them - the other way around won't work.
I got a problem on Ext 4.1.0 and Ext 4.1.1
Double click first cell to edit it and then click window close button, the editor still floats on the page.But it is ok for last cell.
Anyone met this problem before? Thanks
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var table = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: { xtype: 'textfield', toFrontOnShow: false }
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'numberfield',
hideTrigger: true,
validateOnChange : false
}
}
],
height: 200,
width: 400,
plugins:[ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})]
});
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [table]
});
window.show();
});
The easiest way to handle this for you, would be to listen to the window's beforeclose event and cancel any editing in this event using the celleditor's cancelEdit method as described here in the docs.
For example, here is your window object (from your code above) with the listener applied:
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [ table],
// add this listener to your window
listeners: {
beforeclose: function(panel) {
var view = panel.down('gridview');
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
}
}
});
Reply to comment:
Here's an override that would do the same thing. You would have to include this override in each app after ExtJS initialization though.
Of course it is also possible to replace the init function in the Ext.grid.plugin.Editor source code with this one (then you wouldn't have to include the override in the app) but I wouldn't recommend doing that for a number of reasons.
Ext.override(Ext.grid.plugin.Editor, {
init: function(grid) {
// the normal init code (below) must be included in the override
var me = this;
me.grid = grid;
me.view = grid.view;
me.initEvents();
me.mon(grid, 'reconfigure', me.onReconfigure, me);
me.onReconfigure();
grid.relayEvents(me, [
'beforeedit',
'edit',
'validateedit',
'canceledit'
]);
grid.isEditable = true;
grid.editingPlugin = grid.view.editingPlugin = me;
// additional code to cancel editing before a grid is hidden
grid.on('beforehide', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
// additional code to cancel editing before a grid is destroyed
grid.on('beforedestroy', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
}
});
I would also recommend looking into MVC architecture, it would make handling things like this alot easier for you.
I've been learning sencha touch 2.0 over the last 2 weeks and i've stumbled onto two problems. What i would like to do is have a static top bar and bottom bar on my page and let the dynamic content be controlled by buttons placed at the bottom dock. I've spent 4 hours on trying to get this to work the way i want to, i'm almost there but i need a little guidance.
My first problem is that i want to add an image to the static top dock. The code that was suggested in another form does not work.
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
This code doesnt give any errors but it also doesnt show the required image. The image is 60px by 30px
The second problem i'm having is that i would like to add icons to my bottom dock so that when the user click on them, the page would change to show a new page. I have a form with 3 fields that i would like to link to one of the icons on the bottom dock so when the icon is clicked, the form would show. Here is the full code:
Ext.setup({
phoneStartupScreen : 'resources/images/icon.png',
icon : 'resources/images/Homescreen.png',
glossOnIcon : false,
onReady : function() {
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}
var form = new Ext.form.FormPanel({
items:
[
{
xtype: "textfield",
name: "name",
label: "Name",
placeHolder: "your name here"
},
{
xtype: "emailfield",
name: "email",
label: "Email",
placeHolder: "you#example.com"
},
{
xtype: "urlfield",
name: "url",
label: "Url",
placeHolder: "http://www.example.com"
}
]
})
var searchPageContent ={
html:'This is a test for search page'
}
var userPageContent ={
html:'This is a test for user page'
}
var dockedItems = [
{
xtype : 'toolbar',
dock : 'top',
items : topBar
},
{
xtype: "toolbar",
dock: "bottom",
items: [
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "favorites",
items: form
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "search",
items: searchPageContent
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "user",
items: userPageContent
},
{
xtype: 'spacer'
},
]
}
]
new Ext.Panel({
id : 'buttonsPanel',
fullscreen : true,
dockedItems : dockedItems
});
}
});
as mentioned before, i have been able to create the static top and bottom bars but my image does not work in my top bar, which is my first problem, and when i click one of the 3 buttons, nothing happens; i would like my form to be displayed when i click my favorites button but nothing happens. Where have i gone wrong?
Thank you
After a few days of wrestling with sencha, i found an example that almost had what i wanted so modified it and it worked out exactly the way i wanted. I now have a static top bar and a static bottom bar with page icons such that when i click the page icons, the main content scrolls and the new page is displayed.
Ext.setup({
onReady: function() {
var topBar = new Ext.BoxComponent({
layout: 'hbox',
html:
'<img src="resources/icons/icon.png" height="30", width="48"/>',
flex: 1,
style:{
textAlign: 'center'
}
})
var dockedItems = [
{
//this creates the top bar, places it at the top of the page and gives it a background image
xtype : 'toolbar',
dock : 'top',
style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;',
items : topBar
}
]
// Sub-page sections
// Main portion of the page, which includes top toolbar and content
var welcome = new Ext.Panel({
items: [{
html: 'this is the welcome screen'
}],
title: "Welcome",
iconCls: "welcome",
});
var search = new Ext.Panel({
items: [{
html: 'this is the search screen'
}],
title: "Search",
iconCls: "search",
});
// This is the outer panel with the bottom toolbar
var wrapper = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
style: 'background:#8a9cB2;',
layout: {
pack: 'center'
}
},
items: [
welcome,
search,
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
],
dockedItems: dockedItems
});
}
});
I've developed a PHP framework that generates ExtJS code in the form of an application.
This involves building the full ExtJS object literal on the first call, e.g.:
Ext.onReady(function(){
menuItemStart = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start menu item.',
cls:'menuItem'
});
...
and then navigation in the application consists of event handlers which load PHP files via AJAX that output ExtJS code, and then execute this code with this function:
function loadViewViaAjax(url, paramTargetRegion) {
Ext.Ajax.request({
url: url,
success: function(objServerResponse) {
var responseText = objServerResponse.responseText;
var scripts, scriptsFinder=/<script[^>]*>([\s\S]+)<\/script>/gi;
while(scripts=scriptsFinder.exec(responseText)) {
eval(scripts[1]);
}
}
});
}
This works well. However, I now have this situation where when a page is loaded from PHP instead of via a triggered ExtJS event handler, I get errors that are varied but all come from one block of code in the ext-all-debug.js file, namely in line 4236 and line 4242:
Has anyone experienced anything similar or know what could be causing this?
Addendum
Yes #ChrisR, here is an error I can reproduce on my machine:
It says it is getting the error in the fourth line of this code, but if I click on it, it takes me to line 4242 shown above in the ExtJS library code.
<script type="text/javascript">
clearExtjsComponent(targetRegion);
var panel_form = new Ext.FormPanel({
labelWidth: 100,
frame:true,
style: 'margin: 10px',
title: 'Test Product (TEST PAGE 2)',
bodyStyle:'padding:5px 5px 0',
width: 500,
defaultType: 'textfield',
items: [{
fieldLabel: 'ID',
value: "111",
name: 'id',
width: 370,
hidden: false,
style: 'text-align: right',
name: 'id',
width: 50,
hidden: false,
},{
fieldLabel: 'Product',
value: "Paper",
xtype: 'displayfield',
name: 'product',
width: 370,
hidden: false,
},{
fieldLabel: 'Label',
value: "none",
name: 'product3',
width: 370,
hidden: false,
},{
fieldLabel: 'Label',
value: "first line\<br/>second line\<br/>third line",
xtype: 'displayfield',
height: 100,
xtype: 'displayfield',
name: 'product4',
width: 370,
hidden: false,
}
],
buttons: [{
text: 'Save',
handler: function() {
if(panel_form.getForm().isValid()){
panel_form.getForm().getEl().dom.action = 'backend/application/help/test';
panel_form.getForm().getEl().dom.method = 'POST';
panel_form.getForm().submit({
success : function(form, action) {
replace_region_with_uri_content('backend/modules');
}
})
} else {
Ext.Msg.minWidth = 360;
Ext.Msg.alert('Invalid Form', 'Some fields are invalid, please correct.');
}
}
},{
text: 'Cancel',
handler: function(){
replace_region_with_uri_content('backend/modules');
}
}]
});
replaceComponentContent(targetRegion, panel_form);
hideComponent(regionHelp);
</script>
Is this on IE? If so, all the trailing commas in your code may be the issue (they certainly are an issue). Also, lots of duplicate configs in your first item. Try running JSLint on your code from time to time to catch stuff like that.