I have an accordion panel with typical settings. In each of the panels there used to be a textarea and everything worked fine.
Now I replaced each textarea with an htmleditor. When I collapse a panel and re-expand it, the content of the htmleditor is lost. This didn't happen when I used textarea. How to solve this problem?
Edited: also, when re-expanded, the htmleditor freezes, and I can't input anything. But the buttons work (bold, insert link, switch to source editing, etc). What's more strange, when I toggle 'switch to source' button twice, the content reappears, in a different font!
Using the Accordion:
myDataStore.load({params: ...}, callback: onLoadSuccess);
......
onLoadSuccess: function() {
// for each data item, create a new panel and add it to myListPanel
for (var i = 0; i < myDataStore.getTotalCount(); i++) {
var dataItem = myDataStore.getAt(i);
var newFormPanel = new Ext.FormPanel({
labelAlign: 'top',
items : [{
xtype: 'htmleditor',
fieldLabel: 'Content',
autoScroll: true,
enableFont: false,
enableLists: false,
value: dataItem.get('content');
}],
buttons: [{...}]
});
// add this panel to the accordion
myListPanel.add({
title: 'Another panel',
items: [newFormPanel]
});
}
myListPanel.doLayout();
}
Current Accordion config:
var myListPanel = new Ext.Panel({
autoHeight : true,
autoWidth: true,
autoScroll : true,
layout : 'accordion',
layoutConfig : {
titleCollapse: true,
animate: true,
fill : false,
autoWidth: true,
hideCollapseTool: true,
},
});
For me a htmleditor does not lose the content when collapsing and expanding it.
However, one solution would be to listen for the collapse event and store the current editor content to a property.
On the expand event, you place it again in the editor.
Related
I have a window, containing a tabPanel, this tabPanel has 4 tabs.
I wanted to write down something like user manual so I created several panels as blocks, each panel contains some text and pics.
from another button, I want to scroll to a particular postiton in that tab. How can I do it? here is my structure, and let's say I want the button to open the first tab, scrolling to the third panel (id:here).
tabPanel:
var tabs = Ext.createWidget('tabpanel', {
id: 'myTabs',
header: false,
activeTab: 3,
closable: true,
defaults:{ autoScroll:true },
items: [
{
title: 'first',
itemId: 'firstTab',
items: [
{
xtype: 'panel',
html: text39,
cls: 'layout_text1'
},
{
xtype: 'panel',
html: text40,
cls:'layout_subtitle'
},{
xtype: 'panel',
id: 'here',
html: text41,
cls: 'layout_text2'
}]
});
window:
var UMwindow = new Ext.Window({
id: 'myWindow',
name: 'userManual',
closable: true,
floating: true,
width: 900,
height: 600,
items : myTabs,
}).show();
I managed to open the window then activating the first tab using: Ext.getCmp('tabs').setActiveTab('firstTab'); but then I couldn't figure out how to scroll down to the position i need "third panel in my example". do I have to add property to the panel such as position or something?
I would gladly help but I'm unable to get a working jsfiddle demo out of this. I imagine that what you are trying to do requires firing setActiveTab for the tab panel then jumping to the item you would like to show, using that item's offset.
I am using extjs grid Panel with extjs plugin CellEditing, its working fine now I am facing an issue if grid cell is focused and user tried to use any scrollbar with in page, focused cell remain fixed and other grid moving with scroll, as stop scrolling fixed cell moved to its original position inside grid. Need help in this regard.
Screenshot:
Code:
Ext.define('XPL.view.AccountGridCtr', {
extend: 'Ext.grid.Panel',
alias: 'widget.accountgridctr',
menuDisabled: true,
hideHeaders: true,
cls: 'forecasting_grid',
sortableColumns: false,
scroll: 'none',
rowEditor: Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
cls: 'editable_input'
}),
columns: [],
initComponent: function () {
this.plugins = [this.rowEditor];
this.callParent(arguments);
}
});
I would like to create tabpanel so it opens when I click on button.
I can create it inside window like so:
var window = new Ext.Window({
id: 'item1',
closable: true,
floating: true,
collapsible: true,
width: 900,
height: 600,
autoScroll: true,
items : mytabpanel
}).show();
but I am wondering how I can do it without window?
it seems like show() doesn't work with tabpanel.
I'm not entirely sure what you're trying to achieve, assuming your code to create the tab panel is correct then I don't see why your code wouldn't work.
If you don't want to render the tab panel in a window, you can always render it to an actual DOM element instead by using the renderTo property.
e.g.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.getElementById('component'),
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
Where "component" is the id of a container element (E.g. a DIV) within your HTML page. If you call that within the onclick event of the button, hopefully it should do what you require.
If you want a component to float you should use floating mixin
So I have been searching everywhere for the past week but I cant find a way to get two "Ext.TabPanel to scroll together.
I am making this page to have Ext.Panel which has two items :
var MyBorderPanel = new Ext.Panel({
layout: 'border',
renderTo: 'command_display',
cls: 'auto-width-tab-strip',
height:800,
items: [
{
region: 'west',
title: 'item1: <?=ui::getURLField("item1")?>',
split: true,
width: 500,
minSize: 100,
maxSize: 900,
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
baseTab
},
{
region: 'center',
title: 'item2 : <?=ui::getURLField("item2")?>',
split: true,
margins: '0 0 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel
compareTab
}
]
});
These items : baseTab and compareTab are described like :
var baseTab = new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
items: [
<?php
$uihelper->perform("InitItem1Iteration");
$comma = true;
while($uihelper->hasNext("Item1Iteration"))
{
$uihelper->next("Item1Iteration");
?>
<?=(!$comma?",":"")?>
{
title: 'some php code',
id: 'some php code',
autoScroll: true,
contentEl: 'some php code',
}
<?php
$comma = false;
} ?>
]
});
Similar is the Item2.
Now basically what I want is. that these two tab panels have sroll bars, so I want that whenever I scroll one tabPanel, the other tab panel automatically scrolls along with it.
Is it even possible?
Thanks
Andy
Short answer, should be...
You need to access the scroller item of the specific container that you are interested in.
I would start investigating with something in the line of:
listeners: {
scroller: {
scroll: function(scroller, offset) {
console.log(scroller, offset);
}
}
}
I know that containers have scrollers defined, but I do not think that the tabpanel does. So this kind of listener would have to be added to every item (or the item could bubble the event, untested though).
(and of course, once you can capture the scroll event setting the other panel to the same offset shouldn't prove difficult)
Hope that this at least gives you a direction to move in.
You want to be looking at the scroller, as mentioned by #zelexir. Here is a fiddle with my example code http://jsfiddle.net/YgTuc/1/ This is for two panels, but should work just the same for panels in a TabPanel.
I have 4-5 grid panels, one form panel and want to put it into one viewport.
Here the code:
var panel = new Ext.Viewport({
layout: 'vbox',
items:[SearchForm,1_grid_panel,2_grid_panel,3_grid_panel]
});
It woks very well, but im need horizontal scroll box because 3rd grid panel located under visible area. How I can add this scroll box?
Update: Example of one grid
var 1_grid_panel = new Ext.grid.GridPanel({
store: some_store,
flex:2,
height: heightOfGrid,
autoExpandColumn: 'id_md_dog',
plugins: expander ,
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: new Ext.PagingToolbar({
pageSize: 100,
store: some_store,
displayInfo: true,
displayMsg: 'text',
emptyMsg: "No topics to display"
}),
columns: []
});
Have you tried autoScroll: true ?
Ah, I really forgot. You need to describe next app structure: Viewport->Panel->items(your grids). Panel must have layout: fit
If I correctly understand your problem.