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
Related
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.
In ExtJS, on a menu toolbar button, I am trying to remove the current panel in my center window, then recreate it with the new selection. I do not understand the proper way to do this. So far when I click the menu item, it removes whatever is currently there successfully, then it will add the new panel successfully. The problem is the 2nd time I hit the button I get the following error:
REGISTERING DUPLICATE COMPONENT ID 'mainportalID'.
I realize its telling me I already used this ID, but then what would be the correct way to remove the current panel, and replace with a new one?
Here is my view controller:
selectMenuButton: function (button, e) {
console.log('select menu button section was hit')
console.log(button);
console.log(e);
var optionString = button.text;
var myDetailsPanel = Ext.getCmp('navview');
console.log(myDetailsPanel);
var count = myDetailsPanel.items.items.length;
if (count > 0) {
myDetailsPanel.items.each(function (item, index, len) {
myDetailsPanel.remove(item, false);
});
}
myDetailsPanel.add({
xtype: optionString
});
}
var myStore = Ext.create('ExtApplication1.store.PositionsStore');
var gridSummary = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 600,
title: 'my first grid',
columns: [
{
text: 'AcctNum',
dataIndex: 'AcctNum',
width: 100
},
{
text: 'AcctShortCode',
dataIndex: 'AcctShortCode',
flex: 1
},
{
text: 'Exchange',
dataIndex: 'Exchange',
width: 200
}
]
});
This is my view
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportal',
id: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
]
});
adjusted panel
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportalAlias',
reference: 'gridtextfield',
//id: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
]
});
adjusted view controller
onComboboxSelect: function (combo, record, eOpts) {
console.log('new listener was hit');
//return selected Item
var selectedValue = record.get('ClientName');
var selectedCID = record.get('ClientID');
//find the grid that was created
var me = this;
console.log(me);
var xxx = this.lookupReference('gridtextfield');
debugger;
//debugger;
var mainPortalView = Ext.getCmp('mainportalID');
var targetGrid = mainPortalView.down('grid');
//find the store associated with that grid
var targetStore = targetGrid.getStore();
//load store
targetStore.load({
params: {
user: 'stephen',
pw: 'forero',
cid: selectedCID
}
//callback: function (records) {
// Ext.each(records, function (record) {
// console.log(record);
// });
// console.log(targetStore);
//}
});
},
added listeners to MainPortal.js
var myStore = Ext.create('ExtApplication1.store.PositionsStore');
var gridSummary = Ext.create('Ext.grid.Panel', {
store: myStore,
width: 600,
title: 'my first grid',
columns: [
{
text: 'AcctNum',
dataIndex: 'AcctNum',
width: 100
},
{
text: 'AcctShortCode',
dataIndex: 'AcctShortCode',
flex: 1
},
{
text: 'Exchange',
dataIndex: 'Exchange',
width: 200
}
],
listeners: {
destroy: function () {
debugger;
}
}
});
Ext.define('ExtApplication1.view.main.MainPortal', {
extend: 'Ext.panel.Panel',
xtype: 'mainportal',
alias: 'widget.mainportalAlias',
//id: 'mainportalID',
itemId: 'mainportalID',
html: 'user... this is the main portal window',
autoScroll: true,
bodyPadding: 10,
items: [
gridSummary
],
listeners: {
destroy: function () {
debugger;
}
}
});
I want to add some form items from a json array to a form panel. But I'm getting this error "Uncaught TypeError: this.getView(...).getStore is not a function". But this function is declared inside the controller below. I don't now how to fix it.
View:
Ext.define('myApp.viewForm', {
extend: 'Ext.form.Panel',
xtype: 'form',
controller: "form,
viewModel: {
type: "form"
},
title: 'form',
bodyPadding: 10,
autoScroll: true,
defaults: {
anchor: '100%',
labelWidth: 100
},
reconfigure: function(data) {
var me = this;
Ext.each(data, function(item, index) {
console.log(item) ;
me.add(item);
});
}
});
// create form and add store
var form = Ext.create('myApp.view.Form', {
renderTo: Ext.getBody(),
store: new myApp.store.Forms()
});
// Mocking the loading of data and firing of 'metachange' event
var mockData = {
"data": [{
"name": "ff",
"xtype": "textfield",
"allowBlank": false,
"fieldLabel": "labelText1"
}, {
"name": "fsdsdf",
"xtype": "textfield",
"allowBlank": false,
"fieldLabel": "labelText2"
}]
};
form.getStore().fireEvent('metachange', form.getStore(), mockData);
Controller:
Ext.define('myApp.view.FormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.form',
init: function(application) {
this.getView().getStore().on("metachange", this.handleStoreMetaChange, this);
},
handleStoreMetaChange: function(store, meta) {
this.getView().reconfigure(meta.data);
}
});
I have a layout like this:
Ext.define('App.view.Demo', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.toolbar.Paging'
],
xtype: 'app-main-demo',
autoScroll: true,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
frame: true,
initComponent: function() {
Id = this.Id;
var store = Ext.create('APP.store.Demo');
store.proxy.url = store.proxy.url + this.Id;
Ext.apply(this, {
store: store
});
this.items = [],
this.bbar = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
listeners: {
beforechange: function(){
//do some stuff
}
}
}),
this.callParent();
},
listeners: {
afterrender: function(obj,eOpts){
obj.store.currentPage = 1;
obj.store.load(function(records, operation, success) {
console.log(records.length);
if (records.length > 0){
var panel = Ext.create('App.view.Demo2',{
Id: Id,
oId: records[(obj.store.currentPage - 1)].data.id,
rId: records[(obj.store.currentPage - 1)].data.request_id
})
obj.add(panel);
obj.doLayout();
}
})
}
}
});
Here I am dynamically creating the panel(Demo2). On next or prev click in pagination of Demo, it should draw the structure dynamically(passing respective oId and rId to Demo2).
Demo2 consists of extends from Ext.panel.Panel, On the basis of the oId and rId passed I am quering the db and changing the color of the button.
Code For Demo2:
Ext.define('Ext.view.Demo2', {
extend: 'Ext.panel.Panel',
xtype: 'app-main-demo2',
layout: {
type: 'fit',
pack: 'start',
align: 'stretch'
},
initComponent: function() {
var store = Ext.create('Ext.store.Demo2');
store.proxy.url = store.proxy.url + this.oId + '/' + this.rId;
Ext.apply(this, {
store: store
});
this.items= []
this.callParent();
},
listeners: {
afterrender: function(obj, eOpts){
var status;
obj.store.load(function(records, operation, success) {
status= records[0].data.status;
if (status == 'Complete') {
var Panel = Ext.create('Ext.view.Demo3',{
style: {
background: '#A9A9A9'
}
flex:2,
text: 'Completed'
}) ;
obj.add(Panel);
obj.doLayout();
}
});
Here, I am dynamically created Demo3 that extens Ext.button.Button.
Code For Demo3:
Ext.define('Ext.view.Demo3', {
extend: 'Ext.button.Button',
requires:[
],
xtype: 'app-main-demo3',
layout: {
type: 'fit',
pack: 'start',
align: 'stretch'
}
});
In Demo, On prev and next click how to destroy the previous structure and load the new structure. Thanks in Advance
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.menu.*',
'Ext.form.field.ComboBox',
'Ext.layout.container.Table',
'Ext.container.ButtonGroup',
'Ext.form.FieldSet',
'Ext.data.*',
'Ext.form.*'
]);
Ext.onReady(function() {
Ext.QuickTips.init(); //tips box
Ext.define('MyApp.view.MyContainer13', {
extend: 'Ext.panel.Panel',
alias: 'widget.myroutegridpanel',
width: window.innerWidth,
header: false,
height: window.innerHeight,
//renderTo: Ext.getBody(), //cannot put in everywhere, if not this panel will full screen, can't see other already
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'container',
flex: 1,
//maxWidth: window.innerWidth/3,
items: [
{
//xtype: 'mygridpanelroutename'
xtype: 'myroutegridpanel1'
}
]
}
]
});
// THIS IS THE PART I ADD IN, THEN ERROR OCCUR, until below ,please check my remark
Ext.create('Ext.window.Window', {
alias: 'widget.myroutegridpanel1',
width: 400,
height: 400,
title: 'Example of Dynamic Grid',
layout: 'fit',
items: [
{
// All what you have to set! :)
xtype: 'dynamicGrid',
url: 'route/get-routefare.php'
}
]
});
Ext.define('Ext.ux.grid.DynamicGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.dynamicGrid',
alternateClassName: 'Ext.grid.DynamicGrid',
// URL used for request to the server. Required
url: '',
initComponent: function() {
var me = this;
if (me.url == '') {
Ext.Error.raise('url parameter is empty! You have to set proper url to get data form server.');
}
else {
Ext.applyIf(me, {
columns: [],
forceFit: true,
store: Ext.create('Ext.data.Store', {
// Fields have to be set as empty array. Without this Ext will not create dynamic model.
fields: [],
// After loading data grid have to reconfigure columns with dynamic created columns
// in Ext.ux.data.reader.DynamicReader
listeners: {
'metachange': function(store, meta) {
me.reconfigure(store, meta.columns);
}
},
autoLoad: true,
remoteSort: false,
remoteFilter: false,
remoteGroup: false,
proxy: {
reader: 'dynamicReader',
type: 'rest',
url: me.url
}
})
});
}
me.callParent(arguments);
}
});
Ext.apply(Ext.data.Types, {
FLOATORSTRING: {
convert: function(v, n) {
v = Ext.isNumeric(v) ? Number(v) : v;
return v;
},
sortType: function(v) {
v = Ext.isNumeric(v) ? Number(v) : v;
return v;
},
type: 'floatOrString'
}
});
Ext.define('Ext.ux.data.reader.DynamicReader', {
extend: 'Ext.data.reader.Json',
alias: 'reader.dynamicReader',
alternateClassName: 'Ext.data.reader.DynamicReader',
readRecords: function(data) {
if (data.length > 0) {
var item = data[0];
var fields = new Array();
var columns = new Array();
var p;
for (p in item) {
if (p && p != undefined) {
// floatOrString type is only an option
// You can make your own data type for more complex situations
// or set it just to 'string'
fields.push({name: p, type: 'floatOrString'});
columns.push({text: p, dataIndex: p});
}
}
data.metaData = { fields: fields, columns: columns };
}
return this.callParent([data]);
}
});
// UNTIL HERE, THOSE CODE AFTER ADDED, then returned ERROR in the picture below
}); // on ready
You can see the code i have comment where i have added the code then the error occur, however, i would like to learn how to traceback the error come from, unfortunately, ext-all-debug.js only display those simple error comment, how to trace where is the error come from?
There are a couple things you can do
reference the ext-dev.js instead. The difference has to to do with the differences between the two files. The ext-debug.js file contains all the supporting javascript uploaded at once. The ext-dev.js file contains only the core files and need to load the supporting ones as needed. We get much more informative errors this way. In this case the alias is not recognized.
Second, use Chrome tools and right click and choose Inspect Element. You can see the actual line where the code fails in the sources tab by clicking twice on the pause button on the upper right corner of the developer tools area. It will turn purple. Screen below shows how we now see the line of code that fails highlighted