Using ExtJs 4.1.
I'm creating a panel (for example) and I would like that the generated html includes one or more "data-" attributes (for example: data-intro="some text" data-step="1")
How can this be done?
After the component has rendered, you could apply the attributes to the top level element representing the component
Example:
var panel = Ext.create('Ext.panel.Panel',{
title: 'Test',
width: 500,
height: 200,
renderTo: Ext.getBody(),
listeners: {
afterrender: function(cmp) {
cmp.getEl().set({
"data-intro": 'some text',
"data-step": 1
});
}
}
});
panel.show();
You can use the autoEl config option to achieve this.
{
xtype: 'panel',
title: 'My Panel',
autoEl: {
tag: 'div',
'data-step': '1'
}
}
Related
I am using Ckeditor as rich editor for text input in the Chrome browser. I also have added some html id tag for easy parsing by bs4 after the system getting the data.
The following is my setting in the html:
CKEDITOR.replace( 'editor', {
toolbar : 'Basic',
uiColor : '#9AB8F3',
height : '70%',
startupShowBorders: false,
})
And in the config.js:
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.allowedContent = True;
};
Although I have already followed the instruction to allow all html tag content to be preserved with config.allowedContent = *; in the config.jd. However, it seems not working as I got the following results when getting data (by CKEDITOR.instances.editor.getData()):
<span style='font-size:11.0pt;'> content </span>
instead of this that I want:
<span id="news_content" style='font-size:11.0pt;'> content </span>
In other words, it still strips out all the html tag I added.
When I checked the source code, I found that the same textarea content was produced twice with the one with the tag being put in hidden format, i.e.,
<textarea name="editor" id="editor" rows="100" cols="40" style="visibility: hidden; display: none;">
And the editor produces another version in the real textarea that allows me to edit. However, this is useless because all the html tags are stripped there.
So, my question is, how to preserve the html tag in the real textarea so that I can parse the html with id tags after editing and submission. Could anyone advise on this? Thanks a lot.
I may not be able to answer my own question, but I like to share my solution with those encountering similar situation.
In short, finally I give up using ckeditor or any plug-in editor as many of them will strip off the html tag, which is essential to me in the subsequent process.
Thanks to html5, my solution is using editable div. The setting is very simple as below:
css:
#my-content {
box-shadow: 0 0 2px #CCC;
min-height: 150px;
overflow: auto;
padding: 1em;
margin: 5px;
resize: vertical;
outline: none;
}
html:
<div id="my-content" class="editable" style="width:900px; height:400px; text-overflow: ellipsis; overflow-y: scroll;"></div>
js script:
$('.editable').each(function(){
this.contentEditable = true;
});
So far, I am happy with it, it shows what exactly the html code showing and preserve all the tags I added. The only downside is it does not provide any toolbar for format editing. My solution is to make one for it, and via the following link you can get a very good tutorial as to making a toolbar with a ready-to-use demo as illustration.
https://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditable-attribute--cms-25657
Hope this helps.
i am working in extjs4. i have window as=
addComment : function(btn) {
var me = this;
var reviewWindow = Ext.create('Ext.window.Window', {
bodyPadding: '0 0 0 15px',
cls: 'requestWindowCls',
style: {
borderColor: 'white'
},
width: 575,
header : true,
id: 'addcomment',
buttonAlign: 'right',
html : 'Add Comment',...
i want to update window's html on condition and want to place that html in header as title which will consist of text along with some icon. So how to perform this in extjs4
For updating window content you can use reviewWindow.update('HTML content');
For updating window's header content you can use reviewWindow.getHeader().update('HTML content');
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
I am new to Sencha Touch 2 and I want to have something like:
A list (eg for todos, just for trying out ST2) where I can tap to edit or set it as done etc.
I am not sure I am doing it right, but I am thinking I have a panel containing a list on the left and details view on the right. Looking at the docs for Conatiner:
//this is the Panel we'll be adding below
var aboutPanel = Ext.create('Ext.Panel', {
html: 'About this app'
});
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'hbox',
defaults: {
flex: 1
},
items: {
html: 'First Panel',
style: 'background-color: #5E99CC;'
}
});
//now we add the first panel inside the second
mainPanel.add(aboutPanel);
I figured I might be able to use the config property for configure my Panel:
Ext.define("SimpleTodo.view.Main", {
extend: 'Ext.Panel',
config: {
items: [
{
xtype: 'panel',
config: {
html: 'Panel 1 ...'
}
},
{
xtype: 'panel',
config: {
html: 'Panel 2 ...'
}
}
]
}
});
Fails: A blank screen. If I add html property into config I get HTML shown but what I am I doing wrong with the items?
You might have also noticed, I am having a list of left and details on right. This is good for tablets, but how can I make it for phones? Do I need to use Profiles and separate views for them?
but what I am I doing wrong with the items?
You don't have a config property for panel component. So, remove the config property for each individual panel and directly use html property to set html inside each panel
Like this,
{
xtype: 'panel',
html: 'Panel 1 ...'
},
{
xtype: 'panel',
html: 'Panel 2 ...'
}
I want a dojox.grid.DataGrid with a dojo.data.ItemFileReadStore as the data store. I want it to fill the entire screen. I don't want to specify dimensions in pixels. All the examples that I've seen specify them in pixels or use a CSV data store. I've tried using HTML elements and javascript to setup the datagrid and store.
Has anyone done this? Is there a bug? It seems like what anyone would want, but maybe it's not possible for some reason. Any ideas? Thanks!
Edit to insert code:
<div id="gridContainer" style="width: 100%; height: 100%;"></div>
<div id="gridContainer1" style="width: 400px; height: 200px;"></div>
<script type="text/javascript">
dojo.addOnLoad(function(){
// our test data store for this example:
var jsonStore = new dojo.data.ItemFileReadStore({
url: '/mydata.json'
});
var layout = [{
field: 'id',
name: 'id',
width: '20px'
},
{
field: 'name',
name: 'name',
width: '50px'
},
{
field: 'owner',
name: 'owner',
width: '50px'
}];
// create a new grid:
var grid = new dojox.grid.DataGrid({
query: {
rowid: '*'
},
store: jsonStore,
clientSort: true,
rowSelector: '20px',
structure: layout
},
document.createElement('div'));
dojo.byId("gridContainer1").appendChild(grid.domNode);
grid.startup();
});
</script>
Depending on whether I use gridContainer or gridContainer1, it does not show or shows the grid respectively.
What gives?
Yep - perfectly possible.
1) Page layout is the responsibility of the layout widgets (ContentPane, StackContainer, BorderContainer, TabContainer...) The grid is able to take part in a layout but you should really place it in a contianer that is designed to do layout.
2) Programatic creation can be achieved with:
var layout = [{
name: "MyFirstColumnHeader",
field: 'someColumnNameInMyData',
width: "180px;"
},
{
name: "MySecondColumnHeader",
field: 'someOtherColumnName',
width: "180px;"
}
];
var emptyData = {
identifier: 'uniqueIdOfEachItem',
label: 'displayName',
items: []
};
var store = new dojo.data.ItemFileWriteStore({
data: emptyData
});
var grid = new dojox.grid.DataGrid({
id: 'myGrid',
query: {
uniqueIdOfEachItem: '*'
},
store: store,
structure: layout
}, gridPlaceholder);
grid.startup();
where
MyFirstColumnHeader is the text you would like in the first column header
someColumnInMyData is the object attribute or 'column' in the data to be displayed
gridPlaceholder is a div on the page to put the grid into (just add an empty div to ContentPane and make the style of the ContentPane to be width : 100%, height : 100%
uniqueIdOfEachItem is the property of each displayed item that marks them as unique, e.g. their primary key or ID property
This example creates a read/write store and has a simple layout, but the dojo docs should be able to help with more complex examples.