Related
I'm currently facing the following problem:
I've created a simple line chart and filled it with example data.
But the tooltip doesn't show up.
I've tried using my config on the ECharts Website and there the tooltip is working.
option = {
title: {
text: 'Baum'
},
tooltip: {
trigger: 'item',
show: true,
showContent: true,
alwaysShowContent: true,
triggerOn: 'mousemove',
axisPointer:
{
label: {
show: true,
}
}
},
legend: {
data: ['lain', 'lain2']
},
xAxis:{
type: 'category',
data: ['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9', '10'],
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: [
{
name: 'lain',
type: 'line',
showSymbol: true,
data: [100,199,200,287,345,456,567,600,700,800],
smooth: true
},
{
name: 'lain2',
type: 'line',
showSymbol: true,
data: [111,158,231,296,374,495,596, 650,750,879],
smooth: true
}
],
animationDuration: 2000
}
}
In vue it's implemented like this:
<v-chart :options="option"></v-chart>
The data in the diagram itself is shown properly.
Thanks ahead.
I found a solution.
The import for the tooltip module has to imported explicitly.
import 'echarts/lib/component/tooltip'
With this import it's working.
I have put two buttons inside a tab Panel in Sencha Touch 2 application. The code is given below:
var btnAttendance = Ext.create('Ext.Button', {
text: 'Take Attendance',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var btnAddUser = Ext.create('Ext.Button', {
text: 'Add User',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: true,
title: 'Home',
defaults: {
margin: 5
},
layout: {
type: 'vbox',
align: 'center'
},
padding: 10,
items: [
btnAttendance,
btnAddUser
]
});
Ext.application({
requires: [
'Ext.tab.Panel'
],
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
buttonContainer,
{
title: 'Present',
items: {
html: '2',
centered: true
},
cls: 'present'
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
}
});
I have tried modifying the handler function as:
handler: function (button, event)
But this also doesn't work.
Thanks,
Nitin
You need to put all your code inside Ext.application... and launch:function(){...}.... Your code is working fine. See demonstration here.
But then again, buttonContainer is not really being added to any tab panel. If you change the tab, you can see buttonContainer is gone once to change the tabs. If you want to add it inside any tab do this-
First -
Set fullscreen:false to you buttonContainer panel.
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: false,
....... //rest of the code.
And suppose you want to add those buttons in Present tab. You can do this with following--
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
title: 'Present',
cls: 'present',
items: [
{
html: '2',
centered: true
},
buttonContainer
]
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
Here, buttonContainer is added as an item inside present tab only. You can switch the tabs and can see buttons there with correct event handler.
See this demo here
If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.
I am using ExtJS portal code in my application
I want to make portlet in collapsed state at the time of loading the page. So I have done something like
items: [{
id: 'portlet-1',
title: 'Grid Portlet Texsds',
tools: this.getTools(),
height:200,
**collapsed:true,**
autoScroll :true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this),
'endDrag': Ext.bind(this.onPortletDrag, this),
'resize' :Ext.bind(this.onPortletResize, this)
}
}
I have made collapsed property to true. But because of this when I am trying to expand the portlet [after page load] I can see blank Grid.Plz. refer the attached image.
What is the problem ? do I need to do refresh or something ? because when I set collapsed to false I can see the grid.
Please suggest what is missing here.
This is a code for the getTools: function(){
{
type: 'Minimize',
handler: function(e,target,panelHeader,tool){
//panelHeader.ownerCt.toggleCollapse();
if (panelHeader.ownerCt.collapsed)
{
panelHeader.ownerCt.expand();
}
else {
panelHeader.ownerCt.collapse();
}
}
}
for the first time when the portlet get load it is in collapsed state, Now when I click on cross icon not [the "^" for expand icons ] I can see the Blank grid.
Hope this time I am able to explain well.
I took the Ext JS 4 example portal app and added your code (without the asterisks) to portlet-1. It is properly collapsed on load and expands to show the grid.
I don't think there is anything wrong with the code you've posted. Perhaps you've changed the layout or layout properties of the surrounding container and that is affecting your portlet.
Here is my complete portal.js:
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
//requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
getTools: function(){
return [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
portlet.setLoading('Loading...');
Ext.defer(function() {
portlet.setLoading(false);
}, 2000);
}
}];
},
initComponent: function(){
var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
Ext.apply(this, {
id: 'app-viewport',
layout: {
type: 'border',
padding: '0 5 5 5' // pad the layout from the window edges
},
items: [{
id: 'app-header',
xtype: 'box',
region: 'north',
height: 40,
html: 'Ext Portal'
},{
xtype: 'container',
region: 'center',
layout: 'border',
items: [{
id: 'app-options',
title: 'Options',
region: 'west',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
split: true,
collapsible: true,
layout:{
type: 'accordion',
animate: true
},
items: [{
html: content,
title:'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},{
title:'Settings',
html: content,
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-1',
title: 'Grid Portlet',
tools: this.getTools(),
collapsed: true,
height: 200,
autoscroll: true,
items: Ext.create('Ext.app.GridPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
},{
id: 'portlet-2',
title: 'Portlet 2',
tools: this.getTools(),
html: content,
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
tools: this.getTools(),
html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-3',
items: [{
id: 'portlet-4',
title: 'Stock Portlet',
tools: this.getTools(),
items: Ext.create('Ext.app.ChartPortlet'),
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
});
this.callParent(arguments);
},
onPortletClose: function(portlet) {
this.showMsg('"' + portlet.title + '" was removed');
},
showMsg: function(msg) {
var el = Ext.get('app-msg'),
msgId = Ext.id();
this.msgId = msgId;
el.update(msg).show();
Ext.defer(this.clearMsg, 3000, this, [msgId]);
},
clearMsg: function(msgId) {
if (msgId === this.msgId) {
Ext.get('app-msg').hide();
}
}
});
I did the following code to list the searched items in the grid.
Ext.onReady(function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var searchUsers = new Ext.FormPanel({
renderTo: "searchUsers",
frame: true,
title: 'Search Users',
bodyStyle: 'padding:5px',
width: 500,
items:[{
xtype:'textfield',
fieldLabel: 'Username',
name: 'userName'
}],
buttons:[
{
text:'Search',
formBind: true,
listeners: {
click: function(){
Ext.Ajax.request({
method:'GET',
url : url+'/lochweb/loch/users/getUser',
params : searchUsers.getForm().getValues(),
success : function(response){
console.log(response); //<--- the server response
Ext.define('userList', {
extend: 'Ext.data.Model',
fields: [{ name: 'id', mapping: 'id' },
{ name: 'name', mapping: 'name' },
{ name: 'firstName' ,mapping:'personalInfo.firstName'},
{ name: 'lastName' ,mapping:'personalInfo.lastName'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'userList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/users/getUser',
reader: {
type: 'json',
root: 'Users'
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: "searchUsers",
plugins: [rowEditing],
width: 900,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},
{
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},
{
text: 'FirstName',
flex: 1,
sortable: true,
dataIndex: 'firstName',
field: {
xtype: 'textfield'
}
},
{
text: 'LastName',
flex: 1,
sortable: true,
dataIndex: 'lastName',
field: {
xtype: 'textfield'
}
}]
});
}
});
}
}
}
]
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [searchUsers]
});
win.show();
});
How to Fit the grid inside the Search User window
Add an icon in the grid,so that by clicking on that icon the values from the
grid must be populated to entry form for update.
Here with your code, I've found something:
Use renderTo: "searchUsers" for both FormPanel and the Grid: You add the FormPanel to the window, so this config should not exist (Please refer to renderTo document). So remove them.
Use frame: true for both FormPanel and the Grid: There you have the window as container, so the Form and Grid have been framed inside. So remove them.
You dynamically add the Grid on searching: I recommend you create the result Grid as a separate component (not inside success's result) and specify both Form and Grid as items' components of window. You still can config the Grid with hidden. When Ajax is successful, you can fill the Grid with data returned and show it.
"add an icon in the grid": You can specify a new column in columns of the Grid and use renderer config of grid panel to show the button. For example:
renderer: function(v) {
return "<input type='button'.../>";
}
Finally, you can catch the itemclick event of the grid to know if the column of the clicked cell is the cell which contains the button, the entry will be populated to somewhere you want. Don't forget to specify the grid's Selection model as cellmodel
forum member
I am having some problems in displaying different panel on the center area of border layout window.
Consider I am having border layout window with east side containing different button, which on click will display the grid on the center of the layout window.
my window is shown below with east containing buttons and center is empty.
my updated controller code is given below
Ext.define('rms.controller.companymgt.CompanyMgtController',{
extend: 'Ext.app.Controller',
stores:['companyStore'],
models:['companyModel'],
views: [
'companymgt.companyMain',
'companymgt.companyView',
'companymgt.companyDetail',
'companymgt.companyAdd',
'companymgt.fileUpload'
,'companymgt.departmentDetail',
'companymgt.designationDetail',
'companymgt.groupDetail'
],
refs: [{
ref: 'companyMain',
autoCreate: true,
selector: 'companymain',
xtype: 'companymain'
},{
ref: 'companyAdd',
autoCreate: true,
selector: 'companyadd',
xtype: 'companyadd'
},{
ref: 'fileUpload',
autoCreate: true,
selector: 'fileupload',
xtype: 'fileupload'
},{
ref: 'departmentDetail',
autoCreate: true,
selector: '#departmentdetail',
xtype: 'departmentdetail'
},{
ref: 'designationDetail',
autoCreate: true,
selector: '#designationdetail',
xtype: 'designationdetail'
},{
ref: 'groupDetail',
autoCreate: true,
selector: '#groupdetail',
xtype: 'groupdetail'
},{
ref: 'companyDetail',
autCreate: true,
selector: '#companydetail',
xtype: 'companydetail'
}],
init: function() {
this.control({
'#companyview button[action=company-view]': {
click: this.createCompanyview
},
'#companyview button[action=department-view]': {
click: this.createDepartmentview
},
'#companyview button[action=designation-view]': {
click: this.createDesignationview
},
'#companyview button[action=group-view]': {
click: this.createGroupview
},
'#companyview button[action=file-view]': {
click: this.createFilemgtview
},
'#companydetailtoolbar #mnuDept': {
click: this.createDepartmentnew
},
'#companydetailtoolbar #mnuExcel': {
click: this.exportExcel
},
'#companydetailtoolbar #mnuCSV': {
click: this.exportCSV
}
});
},
createCompanyview: function(btn) {
alert('company view clicked');
},
createDepartmentview: function(btn) {
alert('department view clicked');
var departmentCard = this.getDepartmentDetail();
var mainComp = this.getCompanyMain();
mainComp.getLayout().setActiveItem('departmentCard');
},
createDesignationview: function(btn) {
alert('designation view clicked');
},
createGroupview: function(btn) {
alert('group view clicked');
},
createFilemgtview: function(btn) {
alert('FILE MGT WINDOW');
this.getFileUpload().show();
},
createDepartmentnew: function(obj) {
this.getCompanyAdd().show();
}
});
my main view code is given below
Ext.define('rms.view.companymgt.companyMain', {
extend: 'rms.model.desktopmgt.Module',
alias: 'widget.companymain',
requires: ['rms.view.companymgt.companyView','rms.view.companymgt.companyDetail'],
id: 'companymain',
init: function() {
this.launcher = {
text: 'Company Management System',
iconCls: 'project-mini-icon',
handler: this.createWindow,
scope: this
};
},
createWindow: function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('companymgt-win');
if(!win){
win = desktop.createWindow({
id: 'companymgt-win',
title: 'Company Management System',
height: 566,
width: 900,
layout: 'border',
constrain: true,
modal: true,
closeAction: 'destroy',
items: [{
region: 'west',
collapsible: true,
//html: 'MAIN VIEW',
xtype: 'companyview',
flext:1
},{
region: 'center',
collapsible: true,
//html: 'DETAIL VIEW',
xtype: 'companydetail',
flex:3
}]
});
}
win.show();
return win.setPosition(100,100);
}
});
when the company button is clicked I get the alert window.
But based on the button click I want to open different detail view to the center layout of the window.
Please suggest me some solution, so I can view different window on the border layout of the window as shown above.
I would go with a card layout. The easiest thing would be to give each component an itemId. Then in your controller you would have:
, refs: [
{
ref: 'mainCardComponent'
, selector: '#mainCardComponent'
},
{
ref: 'companyCard'
, selector: '#companyCard'
},
{
ref: 'departmentCard'
, selector: '#departmentCard'
}...
Then you can reference using get... within the scope of your controller like:
var companyCard = this.getCompanyCard();
To swap out the cards, you would do something like:
var mainComp = this.getMainCardComponent();
mainComp.getLayout().setActiveItem('companyCard');
You have two options:
Make center piece a container and remove old/add new stuff to it when needed.
If you have limited number of content pages make center piece layout 'card' and create all pages at once. Only one will be visible. You can change visibility when user click certain button.