I am trying to create a CSV File upload on GeoExt Map App.
I need to place the upload function within the Ext.Action, so that I can add it to the toolbar of the GeoExt Panel. I am trying to implement this example. Here is my code,
action = new Ext.Action({
text: "Upload Excel",
control: Ext.create('Ext.form.Panel', {
title: 'Upload a CSV File',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'csv',
fieldLabel: 'CSV Upload',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
buttonText: 'Select CSV File'
}],
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form')
.getForm();
if (form.isValid()) {
form.submit({
url: 'file-upload.py',
waitMsg: 'Uploading the CSV File...',
success: function (fp, o) {
Ext.Msg.alert('Success', 'Your csv file "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
}),
map: map,
// button options
tooltip: "Upload CSV File",
// check item options
group: "newTool"
});
actions["upCSV"] = action;
toolbarItems.push(new Ext.button.Button(action));
Firebug keeps giving me this error,
TypeError: b[d.xtype || e] is not a constructor
Am I declaring the function incorrectly within the Ext.Action?
You can't directly push the action into a toolbar since an Ext.Action is not a type of Ext.Component. An Ext.Action is basically a means of creating an abstraction layer which can be reused multiple times. Here you need to do the following:
toolbarItems.push(new Ext.button.Button(action));
From the documentation:
Actions let you share handlers, configuration options and UI updates
across any components that support the Action interface (primarily
Ext.toolbar.Toolbar, Ext.button.Button and Ext.menu.Menu components)
Related
Developing custom HTML app using Rally:
I want to present a text box and pull value from the enterd data in it. How do i access the text in a rallytextfield while creating a custom html app using App SDK ?
Make sure you use the API docs provided - you can find information about a rallytextbox here.
Specifically, there is a method called:
getValue()
That you will find in the documentation - I think that is what you are looking for.
Here is a piece of code which is causing problems on this:
How do i access the value of the datepicker, i tried the .getValue. It is not able to get the value.Please help
Ext.define('CustomApp', {
extend: 'Rally.app.App', componentCls: 'app', id: 'appid', launch: function () {
var datepickerfrom = Ext.create('Ext.Container', {
id: 'datepickerfrom',
items: [{
xtype: 'rallytextfield',
fieldLabel: 'Enter text: ',
labelWidth: 10
}],
renderTo: Ext.getBody().dom
});
this.add(datepickerfrom);
button = {
xtype: 'rallybutton',
text: 'Generate Report',
handler: function () {
console.clear();
console.log(datepickerfrom.getRawValue());
},
};
});
i am working in extjs4 on file upload functionality. i have coded view as-
Ext.define('Balaee.view.kp.dnycontent.Content',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.kp.dnycontent.ContentView'
],
id:'ContentId',
alias:'widget.Content',
title:'This day in a history',
items:[
{
xtype: 'fileuploadfield',
hideLabel: true,
emptyText: 'Select a file to upload...',
//inputType: 'file',
id: 'upfile',
//name:'file',
width: 220
}],
buttons: [{
xtype : 'button',
fieldlabel:'upload',
action:'upload',
name:'upload',
text: 'Upload',
formBind:'true'
}]
});
And in controller to get file i had written code as-
getUpload : function() {
var fileobj = Ext.getCmp('upfile');
var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];
var reader = new window.FileReader();
reader.onload = function(oFREvent) {
fileobj=oFREvent.target.result;
console.log(oFREvent.target.result);
};
var storeObj=this.getStore('kp.DnycontentStore');
console.log(storeObj);
storeObj.load({
params:{
data:file
},
callback: function(records,operation,success){
console.log("send");
},
scope:this
})
console.log(storeObj);
}
});
So above " var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];" line is retriving all the file related data as- "File{size=879394,type="image/jpeg",name="Chrysanthemum.jpg", more...}"
So how to get and access actual contents of uploaded file? Please help me
I`m trying to write editable list with sencha touch,
I saw many examples but nothing did not work properly so I decided to build from scratch,
I have a list with items and on item tap my controller run the next code
showDetail: function (list, record) {
this.getMain().push({
xtype: 'vedit',
title: record.fullDetails(),
data: record.getData()
});
My "vEdit" screen is an form that should display the current tapped item data
This is the code for the edit form:
var form = Ext.define('TM.view.vEdit', {
extend: 'Ext.form.Panel',
xtype: 'vedit',
config: {
title: 'Edit task',
styleHtmlContent: true,
scrollable: 'vertical',
items: [
{
xtype: 'textfield',
name: 'title',
label: ''
},
{
xtype: 'textfield',
name: 'desc',
label: ''
}
]
}
});
I tried to load the data with the next code:
var ed = Ext.create('TM.model.mTasks', {
title: 'Ed',
desc: 'ed#sencha.com'
});
form.setRecord(ed);
and getting the next error:
Uncaught TypeError: Object function () {
return this.constructor.apply(this, arguments);
} has no method 'setRecord'
NEED YOUR HELP,
Thanks!
Since you have not define a field named record in form's config, so you won't get setRecord() method.
To pass on data you may try doing this:
form.config.record = ed;
and in initialize function of view you can get it like:
var taskData = this.config.record;
var form = Ext.define('TM.view.vEdit', {
Man, you need to create new form(), because it's just a type definition.
I have extjs 4.0 controller:
Ext.define('KS.controller.DailyReport', {
extend: 'Ext.app.Controller',
views: ['report.Daily'],
init: function() {
this.control({
'dailyReport button[action=send]': {
click: this.sendDailyReport
}
});
},
sendDailyReport: function(button) {
var win = button.up('window');
form = win.down('form');
form.getForm().waitMsgTarget = form.getEl();
form.getForm().waitMsg = 'Sending...';
if (form.getForm().isValid()) { // make sure the form contains valid data before submitting
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Invalid Data', 'Correct them!')
}
}
});
and extjs view:
Ext.define('KS.view.report.Daily', {
extend: 'Ext.window.Window',
alias: 'widget.dailyReport',
title: 'Daily report',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [{
waitMsgTarget: true,
xtype: 'form',
url: 'dailyReport.php',
layout: 'fit',
waitMsgTarget: true,
waitMsg: 'Sending...',
items: [{
margin: 10,
xtype: 'datefield',
name: 'reportDate',
fieldLabel: 'Report for:',
format: 'd.m.Y.',
altFormats: 'd.m.Y|d,m,Y|m/d/Y',
value: '12.12.2011',
disabledDays: [0]
}]
}];
this.buttons = [{
text: 'Send',
action: 'send'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
}
});
As you can see I tried to set waitMsgTarget and waitMsg in both places but it is not appearing when I click Send button.
What is wrong?
You are really just misusing waitMsg in the following ways:
waitMsg is not a config option of Ext.form.Basic OR Ext.form.Panel. The waitMsg must be set within your Ext.form.action.Submit. This is why setting it in the view will never work.
In your controller you are doing the same thing and setting the waitMsg as if it were a property of Ext.form.Basic.
The fix is simple. Set waitMsg in your Ext.form.action.Submit. So, just change the line(s) within form.submit() to something like:
form.submit({
waitMsg: 'Sending...',
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
//..... your other stuff here
});
and remove these lines from the controller:
form.getForm().waitMsgTarget = form.getEl();
form.getForm().waitMsg = 'Sending...';
and for completeness remove these 2 line from the view (you have waitMsgTarget in there twice):
waitMsgTarget: true,
waitMsg: 'Sending...',
NOTE: To define the waitMsgTarget to something other than the form itself you must pass in the id of the target.
For example, in your view (ie form definition) you would want to change waitMsgTarget: true to:
waitMsgTarget: 'myWindowID',
//where myWindowID is the id of the container you want to mask
For reference, see:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.action.Submit and
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic
I have the following nested list (only on item in at present to make testing easier).
It works ok, but how can I display a normal page view that has html within it or loads the html page in.
var data = {text: 'Top List',
items: [{
text: 'List item',
items: [{text: 'Selected Page'}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'memory',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
displayField: 'text',
title: 'Theatres',
store: store
});
App.views.Pastcard = Ext.extend(Ext.Panel, {
title: "past",
iconCls: "add",
items: [nestedList]
});
Ext.reg('HomeAbout', App.views.Pastcard);
SO want the user selects the 'Selected Page' item it opens the the detailed view page and html information, preferably from an external source to limit the amount of code on one page.
EDIT
I think i can try and be a little clearer.
Below is my nested list.
var data = {text: 'My List',
items: [{
text: 'First List Item',
items: [{text: 'Sub list one'}, {text: 'Sub list Two'}]
},
{
text: 'Second List Item',
items: [{text: 'Sub list one'},{text: 'Sub list Two'}]
}
]
};
When me / the user clciks on the lsit and gets to the sublist then clicks on the list item called say "Sub list Two" then at the moment it opens to a blank page as there are no more lists, but instead I woudl liek to dispaly a normal page with details on, that can scroll and everything.
At the moment I dotn need to worry about loading in my json dynamiocally as I woudl liek to get a working model before I move on to that side of it
Thsi is not a phonegap app but a standard web app to be view online via mobiles.
* Edn of Edit **
Thanks
To use external source use a store with ajax proxy check this http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store.
To display HTML you can use just html: '<h1>Selected Page</h1>', styleHtmlContent:true,
instead of text:'Selected Page'
The best way is to load JSON objects from:
var myStore = new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
then instead of html or text property use a template to display it:
tpl:[
'<h4>Email</h4>',
'<tpl for="emails">',
'<div class="field"><span class="label">{type}: </span>{value}</div>',
'</tpl>'
]
Check this tutorial http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/ and the API docs http://dev.sencha.com/deploy/touch/docs/ for more information.
Update
To the last items i.e. to the sub lists add this leaf: true then have add a handler fir onItemDisclosure to the list. You can get the record clicked as first argument passed to the event. Then you can use that object to display it on a different panel.
You can still use the tutorial above, just substitue the code where the contacts are fetched from the phone with some static data.
From that tutorial this is the part you need
app.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(app.views, {
contactsList: new app.views.ContactsList(),
contactDetail: new app.views.ContactDetail(),
contactForm: new app.views.ContactForm()
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
app.views.contactsList,
app.views.contactDetail,
app.views.contactForm
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}});
This is the main panel where the list and the details panel are contained. You handle the onItemDisclosure event on the list, get the record that was clicked on, update the details panel with that data and the switch to that panel with
app.views.viewport.setActiveItem(
app.views.contactsList, options.animation
);