I have mail.txt on my local machine and i want to display it on the UI using extjs. I created a textarea and want to import mail.txt into it.
Ext.define('com.company.view.dashboard.Dashboard', {
extend: 'Ext.panel.Panel',
alias: 'widget.dashboard',
layout: 'fit',
iconCls: 'dashboard-tree',
initComponent: function(config) {
Ext.apply(this, {
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'P&L',
labelWidth: 100,
layout: 'hbox',
items: [{
xtype: 'textarea',
flex: 1
}]
}
]
});
this.callParent(arguments);
}});
Here If you want to Display text file in UI then what I will suggest you is put you text content in to JSON format and then on top of window or Panel you can display that.
In This example I am displaying on window. You can make as per your requirment.
Here is MyMessage function which can take the response and then display on MyMessageWindow .
MyMessage : function(){
var me = this;
Ext.Ajax.request({
url : URL of your JSON
method : 'GET',
dataType:'json',
scope : me,
headers : {
"Accept" : "application/json; charset=utf-8"
},
success : function (response, args) {
var data = Ext.decode(response.responseText);
var Msgtext = data.R.MSG; // This is depend on how you binding data in JSON.
me.MyMessageWindow(Msgtext);
}
});
},
MyMessageWindow : function(Msgtext){
var FailedMsgShow = function (text) {
Ext.create({
xtype: 'window',
title: 'P&L',
width: 600,
height: 450,
html:text,
scrollable: true,
}).show();
};
FailedMsgShow('<text style="color:green;">'+Msgtext+'</text>');
},
Note : You can display on any component like panel. I just suggesting you to put on window. you can make on panel as well instead of fieldContainer.
Related
I am new to EXTJS. I am developing application using EXTJS 4.2. I have grid that shows list of Unix server details. I have 2 JS one is serverdetails.js that shows all the servers in the grid and another one is pie.js that shows pie chart. My requirement is when I select server from the grid that is in ServerDetails.js and click on button it goes to dao layer to get server details, Now this server details I have to passed on to Pie chart Js Ext.data.Store object. How do I pass these server details to Pie chart JS?
Below is my code.
On the grid I have dashboard button that shows the pie chart for selected row in the grid. below is the code for that.
showDashBoard : function(button) {
var grid = Ext.ComponentQuery.query('serverdetailslist')[0];
var sm = grid.getSelectionModel();
var rs = sm.getSelection();
if (!rs.length) {
Ext.Msg.alert('Info', 'No Server Details Selected');
return;
}else{
dashBoardServerDetail = rs[0].getData();
var url = '/TechnologyTrackPortal/dashboard/loadDashBoard.action';
Ext.Ajax.request({
url : url,
method : 'POST',
jsonData: dashBoardServerDetail,
success: function(response){
var iResult = response.responseText;
Ext.create('resources.script.Pie');
}
});
}
}
response.responseText give me data in jason format. Now how do I pass this jason dat to pie.js file. Below is my pie.js file
Ext.onReady(function () {
Ext.define('DashBoardModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'title', type: 'string'},
{name: 'size', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
storeId : 'DashBoardStoreId',
model : 'DashBoardModel',
fields : ['title', 'size'],
autoLoad: false,
autoSync: true
});
var chart = Ext.create('Ext.chart.Chart', {
alias : 'widget.dashBoardPieChart',
title : 'Technology Portal',
store : store,
theme: 'Base:gradients',
legend: {
position: 'bottom'
},
series: [
{
type: 'pie',
angleField: 'size',
showInLegend: true,
label: {
field: 'title',
display: 'outside',
font: '12px Arial',
calloutLine: true
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'title',
display: 'rotate',
contrast: true,
font: '18px Arial'
},
tips: {
trackMouse: true,
width: 120,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('title') + ': ' + storeItem.get('size') + '%');
}
}
}
]
});
var panel1= Ext.create('widget.panel', {
// extend : 'widget.panel',
width: 800,
height: 600,
title: 'Server',
alias : 'widget.dashBoardForm',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}],
items: chart
});
I hope I am clear with my points.
Thanks
Sach
You need to see this as one app, one memoryspace, that the code is separated in two .js files makes not much difference, they both have to be loaded in your main html, asp, php or whatever. In that memoryspace you can reference each others variables and objects if they were declared before. The easiest way to accomplish what you ask is to have one store and use that for both views. So load the data in the store in your ServerDetails.js and have the chart use this same store.
I have some ExtJs apps that do that but they are for version 3.3.1 and not at my disposal for the moment. Hope this helps.
I am reading data from store and populating main girdView. When any of the row is clicked, a windows appear and I want to fill the fieldset in that window with the same record which is clicked.
Can anyone tell me how to do it?
My popup window is like:
{
extend: 'Ext.window.Window',
height: 500,
width: 1500,
minWidth :1500,
maxWidth :1500,
layout: 'fit',
controller: 'PopUpWindowController',
initComponent: function () {
var me = this;
//console.log(me.myExtraParams);
var Store = Ext.getStore('mainStore');
Ext.applyIf(me, {
/* items: [{
xtype: 'form',
bodyPadding: 10,
region: 'center'
}]*/
});
me.callParent(arguments);
},
items: [
{
xtype: 'panel',
title : 'Projektierung',
bodyStyle : 'padding:5px',
width : 1880,
autoHeight : true,
items:
[
{
xtype : 'kopfdatenView', // Have to populate this view
}
]
}]}
and in Main view I am calling it as:
{
region: 'center',
xtype: 'gridpanel',
listeners : {
itemdblclick: function(dv, record, item, index, e) {
var extra = record.data;
win = Ext.create('App.view.PopUpWindow');
console.log(win.myExtraParams);
win.on('show', function(win) {
win.setTitle(record.get('ID'));
});
win.show();
}
},
columns: [
****
],
store: 'mainStore',
height: 100,
width: 400,
}
I want to populate fieldset in kopfdatenView. Kindly help
You directly pass your record to your window on creation :
win = Ext.create('App.view.PopUpWindow', {
myRecord: record
});
And then inside the window's initComponent function (before the callParent) :
this.title = this.myRecord.get('ID');
You can do something like this:
win = Ext.create('App.view.PopUpWindow', {
params: record
});
Then, in your PopUpWindowController you can retrieve 'params' in the render event (for example).
Here I create simple extjs code which generates the accordion items dynamically. I used Panel + Layout (accordion).
I posted here because, It may help someone in future. I gone through so many test cases for this and even I searched on google but I could't find my things so I read extjs API and then I wrote out this.
My code:
Ext.onReady(function() {
var mtButton = Ext.create('Ext.button.Button',{
text : 'Add child',
handler : function() {
var numItems = myPanel.items.getCount() + 1;
myPanel.add({
title : 'Child number ' + numItems,
height : 60,
frame : true,
collapsible : true,
collapsed : true,
html : 'asdf'
});
myPanel.doLayout();
}
});
var addAccordion = function(panel){
for (var i = 1; i <= 3; i++) {
console.log(i);
panel.add({
title : 'Child number ' + i,
height : 60,
frame : true,
collapsible : true,
collapsed : true,
html : 'Demo for ' + i
});
}
};
var myPanel = Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 300,
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: false,
animate: true,
activeOnTop: true
},
items : [],
tbar : [mtButton],
listeners: {
afterrender:addAccordion
}
});
});
I have very little knowledge of extjs. so, my question : is this the right way to do it? Or there is another way around?
What if I want items from json file? Is is possible? How?
Thanks in advance!
You can easily parse a json string to create components. Try something like this:
var jsonButton = Ext.create('Ext.button.Button', {
text: 'Add child from Json',
handler: function() {
var jsonString = {"xtype":"panel", "title":"Json Panel","height":50, "width":30};//valid json
myPanel.add({
xtype: jsonString.xtype,
title:jsonString.title,
height: jsonString.height,
width: jsonString.width,
});
myPanel.doLayout();
}
});
This will of course always create the same panel, but i think it can get you started.
Hope it helps :)
I figured out how to get items for panel which has layout specified. I am putting my code here.
My code is:
Ext.onReady(function() {
Ext.define('UserInfo', {
extend: 'Ext.data.Model',
fields: ['firstname', 'lastname', 'seniority' ]
});
var preStore = Ext.create('Ext.data.Store', {
storeId: 'addStore',
model: 'UserInfo',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json',
root: 'blah'
}
}
});
var addAccordion =
function(panel){
preStore.on('load', function () {
preStore.data.each(function(store) {
console.log(store.data['firstname']);
var firstname = store.data['firstname'];
var lastname = store.data['lastname'];
var seniority = store.data['seniority'];
panel.add({
title : firstname+' '+lastname,
html : seniority,
align : 'right',
});
});
});
};
var myPanel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:50px',
width:120,
},
layout: {
// layout-specific configs go here
type: 'auto',
},
items : [],
//tbar : [mtButton],
listeners: {
afterrender:addAccordion
}
});
});
Is this the right way to do it?
Thank you in advance.
I have my code to upload my EXTJS array grid. However in store, I don't know how to call my data from a csv file that I have just uploaded (without saving).
Here's my controller upload.js:
Ext.define('APPLICATION.controller.upload',
{
extend : 'Ext.app.Controller',
init: function()
{
this.control(
{
'uploadview button':
{
uploaded: this.uploadedfile
}
});
},
uploadedfile : function(form)
{
console.log('uploadedfile called, file: ' + form);
Ext.create('Ext.container.Viewport',
{
items:
[
{
xtype: 'displayview',
store: form //guessing here ******
}
]
}
);
}
});
Here's my view display.js:
Ext.define('APPLICATION.view.display' ,
{
alias : 'widget.displayview',
var store = Ext.create('Ext.data.ArrayStore',
{
fields:
[fieldData]
/********data: myData*************/
});
var grid = Ext.create('Ext.form.Panel'),
{
//extend: 'Ext.form.Panel',
//alias : 'widget.displayview',
requires: 'Ext.grid.column.Action',
xtype: 'array-grid',
store: store,
columnLines: true,
height: 400,
width: 800,
title: 'Array Data Grid',
viewConfig:
{
stripeRows: true,
enableTextSelection: true
},
columns:
[columnLines]
};
});
Your display.js is not correct. See line after your alias.
Maybe you are looking for FileReader - API
I'm new in extjs.
Currently a panel have been created and set to north region.
Ext.create('Ext.panel.Panel', {
layout: {
type: 'border'
},
bodyStyle: 'background: yellow;',
height : 700,
width : '100%',
renderTo: Ext.get("example"),
items : [{
title: 'navigationBar',
header: false,
region: 'north',
xtype: 'panel',
//margins: '5,5,5,5',
items: [
MenuBar
]
}
And I also create a toolbar in my child class, which ready to call from my parent class and place to the north region panel.
Ext.define('adminInterface', {
extend: 'Ext.toolbar.Toolbar',
items: [{
xtype: 'tbbutton',
text: 'Button',
},{
xtype: 'tbbutton',
text: 'Button1',
menu: [{
text: 'Good',
},{
text: 'Better',
},{
text: 'Best',
}]}]
});
Once I execute the code, the toolbar variable from child class was call, but it not show out the interface.
Thanks for anyone share their information.
Hi refer my sample example
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
tbar: new Ext.Toolbar({
//your Toolbar config options
})
});
Still we can able to see more sample from existing post as shown below
How do i add a toolbar to my layout in extjs?
Extjs 4 add toolbar to panel dockeditems run-time
var myBtnHandler = function(btn) {
Ext.MessageBox.alert('You Clicked', btn.text);
},
fileBtn = Ext.create('Ext.button.Button', {
text : 'File',
handler : myBtnHandler
}),
editBtn = Ext.create('Ext.button.Button', {
text : 'Edit',
handler : myBtnHandler
}),
tbFill = new Ext.toolbar.Fill();
var myTopToolbar = Ext.create('Ext.toolbar.Toolbar', {
items : [
fileBtn,
tbFill,
editBtn
]
});
var myBottomToolbar = [
{
text : 'Save',
handler : myBtnHandler
},
'-',
{
text : 'Cancel',
handler : myBtnHandler
},
'->',
'<b>Items open: 1</b>'
];
var myPanel = Ext.create('Ext.panel.Panel', {
width : 200,
height : 150,
title : 'Ext Panels rock!',
collapsible : true,
renderTo : Ext.getBody(),
tbar : myTopToolbar,
bbar : myBottomToolbar,
html : 'My first Toolbar Panel!'
});