I really hope someone can help me, It seems like this should be obvious but sencha documentation isn't very easy to read and incomplete. I am trying to build a search form but it doesnt seem to take the store or the url and I can't figure out how to add parameters like page? Can anyone help? This code just produces Failed to load resource: null.
var searchField = new Ext.form.Search({
value:'Search',
url: 'someurl',
store: this.data_store,
cls:'searchfield',
listeners: {
focus: function(){ searchField.setValue(''); },
blur: function(){ if( searchField.getValue()=='' ){ searchField.setValue('Search'); } },
success: function(e){
console.log(e);
}
}
});
this.dockedItems = [ searchField ];
Ext.form.FormPanel doesn't take a Ext.data.Store or Ext.data.Model directly but does deal with Instances of Ext.data.Model. Lets say you have the following model:
Ext.regModel('MyForm', {
fields: [{name: 'id', type: 'int'},'name','description']
proxy: {
type: 'ajax',
url: 'url_to_load_and_save_form'
}
})
Now your form definition would look something like this:
Ext.form.MyForm = Ext.extend(Ext.form.FormPanel, {
record : null,
model: 'MyForm',
items: [{
xtype: 'hidden',
name: 'id'
},{
xtype: 'textfield',
name: 'name',
allowBlank: false
},{
xtype: 'textarea',
name: 'description'
}],
submit : function(){
var record = this.getRecord() || Ext.ModelMgr.create({}, this.model);
this.updateRecord(record , true);
record.save({
scope: this,
success : function(record, opts){
this.fireEvent('saved', record);
},
callback: function(){
this.setLoading(false);
}
});
}
});
Ext.reg('MyForm',Ext.form.MyForm);
Of course you should add in some validations and a button to actually call the Ext.form.MyForm.submit method.
Related
This is really wired. I have a tab in a TabPanel that I want to refresh every time the user taps it. In the tab there should be a list of things. when i am trying to add the list to the panel(the tab container), it is just do not appear! when i try to add other things they aper normally!
For example:
var listConfiguration = this.getListConfiguration();
var myPanel = Ext.create('Ext.Panel', {
html: 'This will be added to a Container'
});
Ext.getCmp('Peoplebutton').add(listConfiguration);
Ext.getCmp('Peoplebutton').add(myPanel);
This code gets the html perfectly in the place! but the list is not shown! The list code is working fine, I have checked it several times...
I would be very happy if someone can help me (:
The list code, working fine for sure
getListConfiguration: function() {
var store = Ext.create('Ext.data.Store', {
fields: ['firstName', 'lastName'],
sorters: 'firstName',
autoLoad: true,
grouper: {
groupFn: function(record) {
return record.get('firstName')[0];
}
},
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
return {
xtype: 'list',
id: 'list',
itemTpl: '{firstName} ,{lastName}',
grouped: true,
indexBar: true,
infinite: true,
useSimpleItems: true,
variableHeights: true,
striped: true,
ui: 'round',
store: store
};
}
It should be an issue with the height of the list component.
Try adding a fixed height to the list, or maybe flex: 1.
Hope it helps-
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 am trying to add a search field to my form in sencha touch 1.1, but after going through examples provided by sencha touch, i could not find out a way to provide a dynamic store to the search field.
I have a store which will fetch data dynamically.
The store contains list of places and when the user enters the first letter of the place,he should be given a list of places starting from that alphabet
Here is the code i have used.
var searchField = new Ext.form.Search({
name : 'search',
placeHolder: 'Search',
useClearIcon: true,
data:siteStore,
autoComplete:true,
});
inputDataForm = Ext.extend(Ext.Panel, {
scroll: 'vertical',
autoDestroy: true,
layout: 'fit',
id:'inputForm',
initComponent: function() {
this.items = [{
xtype: 'form',
cls: 'formClass',
id:'inputImageForm',
bodyPadding: '0',
scroll: 'vertical',
items: [searchField],
}];
inputDataForm.superclass.initComponent.call(this);
}, // End fo initComponent
});
Can somebody please help.
Thank you
This is my code. It is working fine and I have docked the searchfield in a panel.
You can use this and I am sure it works.
, dockedItems: [{
xtype:'searchfield'
, name: "searchfield"
, placeHolder: 'Search Patient'
, id: 'searchPat'
, listeners: {
keyup: function(me,e){
var searchData = me.getValue();
Ext.Ajax.request({
url:'your data url'
, params:{
filter: searchData
}
, scope: this
, success: function(res){
var rec = Ext.decode(res.responseText);
var def = typeof (rec.success);
if(def != "undefined" ){
this.store.removeAll();
this.store.loadData(rec.patients);
}
}
, failure:function(res){
console.log(res);
}
})
}
, scope: this
}
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 know the typical reason for a DataView to be blank is because the model or JSON is wrong. From what I can tell, mine is right... so I'm not sure why my DataView is blank.
Controller
rpc.controllers.AboutController = new Ext.Panel({
id: 'rpc-controllers-AboutController',
title: 'About',
iconCls: 'info',
layout: 'card',
scroll: 'vertical',
items: [rpc.views.About.index],
dockedItems: [{ xtype: 'toolbar',
title: 'RockPointe Church | Mobile'
}],
listeners: {
activate: function () {
if (rpc.stores.AboutStore.getCount() === 0) {
rpc.stores.AboutStore.load();
}
}
}
});
View
rpc.views.About.index = new Ext.DataView({
id: 'rpc-views-about-index',
itemSelector: 'div.about-index',
tpl: '<tpl for="."><div class="about-index">{html}</div></tpl>',
store: rpc.stores.AboutStore,
fullscreen: true,
scroll: 'vertical'
});
Store
rpc.stores.AboutStore = new Ext.data.Store({
id: 'rpc-stores-aboutstore',
model: 'rpc.models.AboutModel',
autoLoad: true,
proxy: {
type: 'scripttag',
url: WebService('About', 'Index'),
method: 'GET',
reader: {
type: 'json',
root: 'results'
},
afterRequest: function (request, success) {
if (success) {
console.log("success");
} else {
console.log("failed");
}
console.log(request);
}
}
});
rpc.stores.AboutStore.proxy.addListener('exception', function (proxy, response, operation) {
console.log(response.status);
console.log(response.responseText);
});
Model
rpc.models.AboutModel = Ext.regModel('rpc.models.AboutModel', {
fields: ['html']
});
JSON
mycallback({"results":{"html":"... content removed for brevity ..."},"success":true});
Can anyone see what I might be doing wrong here?
There are no console/javascript errors. And the resources are showing that I am in fact pulling down the JSON from the WebService.
If I use console.log(rpc.stores.AboutStore.getCount()); inside my activate listener on the AboutController, the result is always 0, and I'm not entirely sure why
here's the staging app if you'd like to see the request
http://rpcm.infinitas.ws/ (note, this link will expire at some point)
Try returning your json value as an array instead of an object. I think Ext is expecting an array of records instead of just one.
For example
"{results : [{"html": "Your html"}]}"