Develop Reference

How to use ExtJS modern Grid Row expander Plugin?

How to use the grid row expander plugin used in Kitchensink?. Which is not working when we give the itemConfig body tag and plugin list.
Its working only after we mention the column externally like below. Also the row number cell is not displaying the digits more than one, even after setting width its not working.
columns: [{
//expander is not displayed without adding this expander column
text: '',
width: 50,
resizable: false,
hideable: false,
sortable: false,
editable: false,
ignore: true,
ignoreExport: true,
cell: {
xtype: 'expandercell',
}
},{
....
}]
There is no Docx for using
http://docs.sencha.com/extjs/6.2.0/m...wExpander.html
Find the fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1qnr

When you are specifying the grid configs, the plugins has to be specified under the columns.
Check this fiddle https://fiddle.sencha.com/#view/editor&fiddle/1qov it's the same as yours only the plugins are put under the columns.
However this is not the general approach in ExtJS, usually it should not matter where you specify the configs but it seems necessary for the rowexpander.
The second issue with the rownumberer it looks like a bug. When you put more than 100 it will be OK again. Also when you use Triton theme it's OK. It looks like the width of the row is incorrectly counted when using Material theme.

Render Extjs 4.2 app inside Div tag

I want to render my viewport inside div tag. If i change "Ext.container.Viewport" to any other container, that works in development mode but not in Build mode. In Build mode it displays nothing.
I found similar question on Stackoverflow like Render Ext.application in a div but answer in this question suggest to use different container, but in my case if I replace viewport to a container, nothing is displaye din Build mode(Empty console log).
Here is my code of viewport :
Ext.define('PfalzkomApp.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Fit',
'Papp.view.PopUpWindow'
],
type: 'fit',
renderTo: Ext.Element.get("REA_TasklistEntry"),
items: [{
xtype: 'app-popUpWindow'
}]
});
Can anyone help me?
Thanks for your time.

C3 chart sizing is too big when initially loaded

I am using the C3 JavaScript library for the display of graph data. When my page initially loads, the graphs are hidden. It isn't until a "tab" on the page is selected that the graphs display.
The trouble I am seeing is that my first graph doesn't fit its containing div tag when first loaded. I can change the date range I'm viewing data for by clicking a button, at which time the graphs will be correctly sized.
Here is the relevant HTML that I'm using for the graphs (notice that I am using AngularJS, in case that helps/hinders things at all):
<div class="chartgrouping">
<div ng-show="showGraphSection" class="graphA">
<h2 class="section-main-heading">Data A</h2>
<div id="dataAChart" class="chart c3"></div>
</div>
<div ng-show="showGraphSection" class="graphB">
<h2 class="section-main-heading">Data B</h2>
<div class="stats">
<div class="highest-value">Data Breakdown<span>{{percentageOfSubstance}}%</span></div>
<div class="goals">GOAL: 20%</div>
</div>
<div id="dataBChart" class="c3" style="max-height: 320px; position: relative;"></div>
</div>
</div>
The initial, incorrect display (the first graph stretches the entire way across):
And the correct result after loading new data, after the first result (above) has been displayed:
Is there a good solution to this problem?

I have found the solution relates to how it determine the full width of the element when hidden (often the case when using bootstrap tabs etc and other hidden elements).
To get around this, you need to trigger the resize event on the window to make d3 (the underlying graphing library) work out the correct sizing.
jQuery(window).trigger('resize');
You can do this on bootstrap using something akin to
jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() {
jQuery(window).trigger('resize');
});

In my case, #Flanamacca's answer only partially worked. Loading the chart data with a setTimeout with delay of 0 seems to fix it.

After trying a variety of possibilities, I finally found a solution. It's an Angular solution, so anyone else experiencing the problem and not using Angular will need to modify it appropriately.
How I solved it was, rather than using an ng-show on the parent div, I removed that one and added exact copies of it to each sub-tag (the h2 and the h2s' siblings). Simple solution, but such a pain to figure out.

The jQuery(window).trigger('resize'); stuff didn't work for me.
But using C3 resize ( ) function works like a boss :
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
}
});
$('.collapse').on('shown.bs.collapse', function() {//Your event listner
chart.resize();
});

If you are using Foundation with multiple tabs then the following worked for me,
$('#myPanelId' ).on('toggled', function(){
jQuery(window).trigger('resize');
})
Where myPanelId is the panel id which contains the charts.

#Flanamacca's answer didn't work for me, though it was a bootstrap tab-related problem so I did use the jQuery selector they suggested.
What worked for me was the c3 flush() method, which forces the chart to redraw (see http://c3js.org/reference.html#api-flush).
$('a[data-toggle=tab]').on('shown.bs.tab', function() {
my_c3_chart.flush();
});

Simply setting the CSS max-width of the div containing the chart worked for me.

Our situations might be different, but maybe someone with a more comprehensive understanding of how html is rendered can extrapolate from this.
my problem was that I was hiding the graph until my data was pulled in and the graph was generated with c3.generate. I was hiding the graph using css "display: none;". this was what caused the issue. once I changed my css to "opacity: 0," the issue went away.

Liferay and ExtJS

I have the application with Servlets, CSS, JS and JSON. It's working with ExtJS 3 library (I keep the code in another project).
The goal is to run this application inside a Liferay Portlet.
I created new Portlet called "portal-portlet".
Added all my Java classes to new src folder. Am I suppose to refractor code?
Added all ExtJS code from WebContent folder to docroot > js > extjs3 folder of the Portlet.
Modified view.jsp:
<div id="invoice_form"></div>
It links with application.js:
Ext.onReady(function() {
// code responsible for rending main window
var main = new Ext.Viewport({
layout: 'border',
renderTo: 'invoice_form',
id: 'main',
items: [{
5.. Modified liferay-portlet.xml with lines look like this one:
<header-portlet-javascript> /js/extjs3/adapter/ext/ext-base.js </header-portlet-javascript>
6.. Created new Theme Project and added CSS to custom.css and portlet.css (to override Liferay default CSS). I copied CSS from ExtJS.
Here what I've got.
My new ExtJS Portlet cover all page and contain almost nothing. It's suppose to have data table in right column and file manager in left column. Now you can see only bar that's suppose to separate file-tree from table
So I'm ready to do it from scratch. Should I use hook or theme project and what I did wrong, how make it work?
Thanks for reading.

The problem is that Liferay portlets are rendered into a div and when you try to embed an existing Sencha application you will notice that many nodes are just placed as child of the body. Thus its totally corrupting your Sencha application and mostly it end ups in a white screen.
This is how I fixed it for large Sencha application which luckily wrapped everything already into a Ext.Viewport object :
Now place in your view.jsp (portlet) this here :
Then setup up your Sencha panels and put them into a Viewport object :
this._viewport = new Ext.Viewport({
layout : 'border',
margins : '0 0 0 0',
renderTo:Ext.get(Repository.Config.GUI_PARENT),
defaults : {
renderTo:Ext.get(Repository.Config.GUI_PARENT)
}, // default config for all child widgets
items : [
new Ext.Panel({ // Header panel for login and toolbar
region : 'north',
height : 60,
margins : '0 0 0 0',
border : true,
items :[
{ // Header with logo and login
region: 'north',
html: Repository.Templates.login.apply({
currentUser : this._currentUser,
isPublicUser : this._currentUser=='public'
}),
height: 30,
renderTo:Ext.get(Repository.Config.GUI_PARENT)
},
this._controls.toolbar
] // Toolbar
}), // Panel
this._controls.centerPanel,
this._controls.leftPanel,
this._controls.rightPanel
]
});
Notice that the renderTo:Ext.get(Repository.Config.GUI_PARENT) literal doesn't seem to fix the problem yet but !
Now replace in ext-all.js this
Ext.Viewport = Ext.extend(Ext.Container, {
this.el = Ext.getBody()
with
Ext.Viewport = Ext.extend(Ext.Container, {
this.el = Ext.get(Repository.Config.GUI_PARENT);
where Repository.Config.GUI_PARENT is simply a constant : "root"
I am not sure this is still the right in general way but it seems to work now very fine.

Resize the jqGrid page edit box

In my ASP.NET MVC 3 app I have the pager enabled on my jqGrid, as shown in the picture below:
The textbox for Page (center of image with the number 1 in it) is really wide - way wider than it needs to be. Does anyone know how to adjust the size of this box?
This is particularly an issue when my grid is narrower than this one, at that point the textbox for the Page pushes (or is placed) too far to the left and ends up squashing the buttons, as seen in the picture below:
Here, the two buttons to the left of "Page" (previous page, first page) are under the "Edit" label that is part of my custom Edit button. Notice that the page box is still really wide. Also, the "View 1-10 of 1005" on the right side, visible in the first image, is truncated in the narrower grid.
Perhaps there is a setting for this or someone has a workaround. I'd rather the second grid not have to be wider than it needs to (my workaround is to set the width to a value rather than 'auto' or 'inherit', but that makes the grid columns wide. A properly sized textbox for Page would leave plenty of room for the pager buttons plus my own button.
The pager/custom button for my grid look something like this:
.jqGrid('navGrid', '#icecreamPager',
{ search: true, edit: false, add: false, del: false, searchText: "Search" },
{}, // default settings for edit
{}, // default settings for add
{}, // default settings for delete
{closeOnEscape: true, closeAfterSearch: true, multipleSearch: true }, // settings for search
{}
)
.jqGrid('navButtonAdd', '#icecreamPager',
{ caption: "Edit", buttonicon: "ui-icon-pencil",
onClickButton: function () {
var grid = $("#icecreamGrid");
var rowid = grid.jqGrid('getGridParam', 'selrow');
var cellID = grid.jqGrid('getCell', rowid, 'icecreamID');
var src = '#Url.Action("Edit", "Icecream", new { id = "PLACEHOLDER" })';
document.location = src.replace('PLACEHOLDER', cellID);
},
position: "last"
});
I've been looking through the jqGrid documentation and examples but haven't happened upon how to set this. Ideas? This is the 4.0 jqGrid.

I suppose that you use ASP.NET MVC standard CSS which bring some minor problems in jqGrid. One from there is the pager width. It can be fixed with respect of
<style type="text/css">
/* fix the size of the pager */
input.ui-pg-input { width: auto; }
</style>
Another small recommendation is to use
<style type="text/css">
table { border-style:none; border-collapse:separate; }
table td { border-style:none; }
</style>
or
<style type="text/css">
div.ui-jqgrid-view table.ui-jqgrid-btable {
border-style:none;
/*border-top-style:none;*/
border-collapse:separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable td {
border-left-style:none
}
div.ui-jqgrid-view table.ui-jqgrid-htable {
border-style:none;
/*border-top-style:none;*/
border-collapse:separate;
}
div.ui-jqgrid-view table.ui-jqgrid-btable th {
border-left-style:none
}
</style>
which would fix some problems with the width calculation and will remove unneeded horizontal scrolling bars. I made the feature request to make the corresponding changes in the standard CSS of jqGrid, but the request stay unanswerd.
I recommend you to take a look in the demo from the answer. All the settings and some other tricks are used in the demo. The demo project are downgraded to VS2008 corresponds to the question, but with the minimal modifications you can convert it back to VS2010.