Develop Reference

sencha add list to panel,then add panel to my tabpanel.in controller

when i write code direct in my view .the list success display in my tabpanel's tab.look the view underneath
{
xtype: 'tabpanel',
itemId: 'tabfirst',
flex: 1,
//activeItem: 1,
tabBar: {
layout: {
pack: 'center'
}
},
items: [
{
title: 'tab1',
xtype: 'list',
itemTpl: '{title}',
data: [
{title : 'title1'},
{title : 'title2'},
{title : 'title3'}
]
},
{
title: 'tab2',
html: 'here second html2'
}
]
}
but it not success in my controller. there is nothing in my tab.
Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',
launch: function(){
var moneytab = Ext.ComponentQuery.query('.makemoney #tabfirst')[0];//--get my tabpanel
var titlestor = Ext.create('ylp2p.store.loanlist');//---get my store
titlestor.load({
callback: function(records, operation, success){
Ext.each(records, function(record){
var loanname = record.get('loanname');
var myPanel = Ext.create('Ext.Panel',{
//the code is same in my view but not work
title: loanname,
xtype: 'list',
itemTpl: '{title}',
data: [
{title : 'title1'},
{title : 'title2'},
{title : 'title3'}
]
});
moneytab.add([myPanel]);
//add above panel
});
}
});
}
});
when i add only "title" and "html" in panel,it work. then i change it to list.it success in direct write in view. but it not work write it direct in controller.

Use this code to add List. It will work.
var myPanel = Ext.create('Ext.List', {
//the code is same in my view but not work
title: loanname,
itemTpl: '{title}',
data: [
{ title: 'title1' },
{ title: 'title2' },
{ title: 'title3' }
]
});
moneytab.add([myPanel]);

As I don't have enough reputation to comment, I am posting this as answer:
Did you try giving your view fullscreen: true config and also did you include your Controller in the Ext.app.Application list of controllers?

Panel Appearance After Clicking On Text

I've just started working with Sencha Touch over the past couple days and I've run into a few questions. The main one is, when working with anything that doesn't regularly have user click interaction (titlebar, html text, etc for some random examples), is it possible to click on things like this and get a panel to appear.
I know that with buttons and other things, you have a tap, itemtap, etc, but I'm not sure about instances like this. Any help would be appreciated with examples.

Yes you can. Check out my blog post here: http://www.senchahackers.com/touch/multiple-tap-listeners-one-xtemplate/ that explains exactly how to do that.
Basically you can listen for a tap event on any element, as long as you add it to the list of 'delegates'
In your view:
listeners: {
tap: {
element: 'element',
delegate: '.app-box, .doc-box, .bubble-holder',
fn: function(e){
var url = e.target.name,
divClassName = e.delegatedTarget.className,
appbox = "app-box",
docbox = "doc-box",
bubble = "bubble-holder";
console.log(divClassName);
switch(divClassName){
case docbox :
//lets say you have an element '.doc-box' that you want to click and show the panel
// show the panel, which is a separate file, shown below
var profileController = YourApp.getController('YourController');
//call the showProfilePanelPopup() method in your controller, passing in this as the element that shows it
profileController.showProfilePanelPopup(this);
break;
case appbox :
alert(appbox);
break;
case bubble :
alert(bubble);
break;
}
}
}
}
Then in your controller:
extend: 'Ext.app.Controller',
config: {
refs: {
profilePanelPopup: {
autoCreate: true,
selector: '#profilePanelPopup',
xtype: 'profilePanelPopup'
}
}
},
showProfilePanelPopup: function(btn, action, values) {
var me = this;
var popup = me.getProfilePanelPopup();
popup.showBy(btn);
popup.on('hide', function () {
popup.destroy();
}, this);
}
Assuming you some Panel in your views directory like this:
Ext.define('App.view.ProfileNowPop', {
extend : 'Ext.Panel',
alias: 'widget.profileNowPop',
xtype: 'profilePanelPopup',
config: {
height: (Ext.os.deviceType != "Desktop") ? "35%" : 253,
cls:'profilePop',
left: '1%',
padding: 0,
top: '1%',
width: (Ext.os.deviceType != "Desktop") ? '40%' : '36%',
hideOnMaskTap: true,
modal: {
cls:'opaquemask'
},
scrollable: false,
store: 'ProfilePopStore',
model: 'App.model.ProfilePopModel',
items:[
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
id: 'gradePopField0',
cls: 'gradePopField',
style: 'background: #f7f7f5',
listeners: {
initialize: function(ele, eOpts) {
this.setReadOnly(true);
}
}
}
]
}
]
},
initialize: function() {
this.callParent(arguments);
}
});

javascript EXTJS close & reset

The previous programmer used EXTJS, with which I don't have a whole lot of familiarity with.
The application I am trying to fix has a modal called ADD ACCOUNT, with which a user can either manually type the various input fields or drag and drop an account already open into the modal.
The user can hit a reset button and clear the fields. However, if they don't clear the fields and they just close the window, when the window is reopened, the previous data is still there.
Basically, if the user decides to close the window, it needs to also reset and clear all the fields.
As stated, I am not too familiar with EXTJS. With that said, I will include the code below, which may be a lot. I will try not to include unnecessary code.
There are 2 files: accountGrid.php and accountGrid.js
I have isolated where I think the issue begins in accountGrid.js. Here is what I've found:
function addAccount(){
var AddAccountForm;
var fields = [
{name: 'must_have', mapping: 'must_have'},
{name: "*** there are like 50 of these, so I'll skip the rest ***"}
];
AddAccount = new Ext.FormPanel({
autoScroll: true,
monitorValid: true,
defaultType: 'textfield',
items:
[
{
xtype: 'fieldset',
title: 'Required Information',
collapsible: true,
autoHeight: true,
defaultType: 'textfield',
items: [*** random fields here ***]
},
{
xtype: 'fieldset',
title: 'Optional Information',
collapsible: true,
collapsed: true,
autoHeight: true,
defaultType: 'textfield',
items: [*** random fields here ***]
}
],
buttons: *** this is where the buttons being ***
[
{
text: 'Submit',
id: 'submitAdd',
formBind: true,
handler: function(){
AddAccountForm.getForm().submit({
url: 'data-entry.php', *** hope I don't need to show this file's code ***
waitMsg: 'Updating Record...',
success: function(form, action){
obj = Ext.util.JSON.decode(action.response.responseText);
AddAccountForm.getForm().reset(); *** notice this reset function ***
delete BookingDataStore.lastParams;
BookingDataStore.removeAll();
var sa = Ext.getCmp('salesArea').getValue();
*** there are few more of these var sa fiels ***
BookingDataStore.on('beforewrite', function(store, options){
Ext.apply(options.params, {
task: 'LISTING',
salesarea: sa,
*** there are a few more of these variables ***
*** honestly, I'm not sure what these are ***
});
});
BookingDataStore.reload();
Ext.Msg.alert('Success', 'The record has been saved.');
AddAccountWindow.close();
},
failure: function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Error','Your account was not submitted.'+obj['error']);
}
else{
Ext.Msg.alert('Warning','There server is unreachable: ' +action.response.responseText);
}
}
});
}
},
{
text: 'Reset', *** here is the reset ***
handler: function() {AddAccountForm.getForm().reset();}
},
{ *** 2ND EDIT ***
text: 'Close',
AddAccountForm.getForm().submit({
handler: function() {
Ext.Msg.alert('close');
};
});
} *** 2ND EDIT CONTINUED BELOW ***
],
keys: [{
key: [10,13], fn: function(){
var b = Ext.getCmp('submitAdd');
b.focus();
b.fireEvent("click", b);
}
}]
});
AddAccountWindow = new Ext.Window({
title: 'Add Account',
closable: true,
closeAction: 'close',
y: 5,
plain: true,
layout: 'fit',
stateful: false,
items: AddAccountForm
});
AddAccountWindow.show(this);
}
That was what I think is the major portion of the accountGrid.js. There was some more code for the drag and drop feature, but that was not necessary for me to display.
I did not think this code was this long. I haven't even gotten to the php file code. SMH.
Here is the code from accountGrid.php:
var AddAccountForm = new Ext.FormPanel({
id: 'AddAccountForm',
autoScroll: true,
monitorValid: true,
submitEmptyText: false,
defaultType: 'textfield',
items:
[
{
xtype: 'fieldset',
id: 'reqFieldSet',
title: 'Required Information',
*** there are more parameters, I'll skip to the buttons ***
}
],
buttons:
[
{
text: 'Submit',
id: 'submitAdd',
formBind: true,
handler: function(){
var pc = partnerCodeField.getValue();
var pn = partnerNameField.getValue();
AddAccountForm.getForm().submit({
url: 'data-entry.php',
waitMsg: 'Updating Record....',
params: {partner_code:pc, partner_name:pn},
success: function(form, action){
obj = Ext.util.JSON.decode(action.response.responseText);
AddAccountForm.getForm()reset();
delete BookingDataStore.lastParams;
BookingDataStore.removeAll();
BookingDataStore.on('beforeload', function(store, option){
Ext.apply(options.params, {
ns_task: "SEARCHING"
});
});
BookingDataStore.load();
TradeTotalsDataStore.reload();
Ext.Msg.alert('Success','The record has been saved.');
AddAccountWindow.hide();
},
failure: function(form, action){
if(action.failureType == 'server'){
obj = Ext.util.JSON.decode(action.response.responseText);
Ext.Msg.alert('Error','Your account was not submitted.'+obj['error']);
}
else{
Ext.Msg.alert('Warning','The server is unreachable:'+action.response.responseText);
}
}
});
}
},
{
text: 'Reset',
handler: function(){
AddAccountForm.getForm().reset();
partnerCodeField.enable();
partnerNameField.enable();
}
}, *** 2ND EDIT ***
{
text: 'Close',
handler: function(){
AddAccountForm.getForm().reset();
AddAccountWindow.close();
partnerCodeField.enable();
partnerNameField.enable();
}
} *** END 2ND EDIT ***
],
keys:
[
{
key: [10, 13], fn: function(){
var b = Ext.getCmp('submitAdd');
b.focus();
b.fireEvent("click", b);
}
}
]
});
var AddAccountWindow = new Ext.Window({
title: 'Add Account',
closeable: true,
closeAction: 'hide',
y: 5,
plain: true,
layout: 'fit',
stateful: false,
items: AddAccountForm
});
I just saw this immediately after the code directly above:
function addAccount(){
AddAccountWindow.show(this);
*** beneath this is code for the drag & drop features ***
*** I don't think I need to show that ***
}
I'm not sure why the code from accountGrid.php and accountGrid.js look similar. I apologize for the amount of code. I just really need help breaking this code down.
Just to reiterate, when they click the X button at the top-right of the window, it needs to clear the modal form and then close.

You have a window with a child named accountform.
What you want to do is add a listener for the close button of the window and add code to clear your form.
You already have this:
new Ext.Window({
closable: true, //adds the close button
closeAction: 'close', //'close' isn't supported (use 'hide')
Add a listener to it:
{
//....
closable: true,
listeners: {
close:function(){
//put clear form code here
}
}
}
Add code to clear the form:
AddAccountForm.getForm().reset(true)
Finally it looks someting like this:
var AddAccountWindow = new Ext.Window({
title: 'Add Account',
closeable: true,
closeAction: 'hide',
y: 5,
plain: true,
layout: 'fit',
stateful: false,
items: AddAccountForm,
listeners: {
close:function(){
AddAccountForm.getForm().reset(true);
}
}
});

sencha touch tap on search button and load a dataview with ajax search

I am almost new to sencha touch and I have this simple question:
I have a panel with a search field and a start search button (a simple search):
items: [{
xtype: 'container',
html: '<div style="width:100%;text-align:center;"><img src="images/logo.png" style="max-width:40%;" /></div>',
},{
xtype: 'fieldset',
title: '<center>Insert your adress</center>',
cls:'ps-red',
items: [{
xtype: 'textfield',
name: 'adress',
required: true,
clearIcon: true,
}]
},{
xtype:'button',
text:'Search',
ui:'confirm-round',
margin:5,
handler:function(){
}
}]
Clicking on the search button I need to make an ajax call with the input text params, and display results to another panel. What should I write in the handler function of the button?
Ext.define('Demo.view.SearchResults', {
extend: 'Ext.Container',
xtype: 'resultcard',
config: {
layout:'fit',
cls:'ks-basic',
items: [{
xtype: 'dataview',
scrollable: 'vertical',
cls: 'dataview-basic',
store: '????',
}]
}
});

OK let us assume the store as 'SampleStore'
this is the sample call that you should write in handler function, see if it is useful to you,in this example I added push view, you can update panel if you want
handler : function(){
var navigationView = button.up('navigationview');
Ext.getStore('SampleStore').getProxy().setExtraParam('search',address);
Ext.getStore('SampleStore').load({
callback: function(record, operation, success) {
if(success && record.length) {
// here you can call any other function to update panel
navigationView.push({
xtype : 'resultcard',
record : record
});
} else {
Ext.Msg.alert('Address not found. (' + address + ')');
}
}
});
}// handler close

Extjs 4 catching combobox selected value in button click

I'm just beginning with Extjs 4, and I need to get the selected value of a combobox to change stores and rendering a chart corresponding to the data of each store.
I'm using the MVC model, here's my view containing comboboxes :
Ext.define('Metrics.view.Params', {
extend: 'Ext.grid.Panel',
alias: 'widget.params',
title: 'Select Parameters',
hideHeaders: true,
initComponent: function() {
this.columns = [{
dataIndex: 'name',
flex: 1
}];
this.dockedItems = [{
xtype: 'container',
items: [{
xtype: 'combobox',
id : 'cmbGraph',
mode : 'queryMode',
name : 'graph',
fieldLabel: 'Graph',
store: ['Small data','Big data'],
editable : false
},
{
//another combobox here..
}]
And my controller is :
Ext.define('Metrics.controller.RenderGraph', {
extend: 'Ext.app.Controller',
refs: [{
ref : 'params',
selector : 'params'
}],
stores: ['GraphData'],
init: function() {
// Start listening for events on views
this.control({
'paramsbtn button[action=apply]': {
click : this.launchChart
}
});
launchChart : function(button){
var params = this.getParams();
var combo1 = params.items[cmbGraph];
console.log(Ext.encode(combo1));
var v = combo1.getValue();
var r = combo1.findRecord(combo1.valueField || combo1.displayField,v);
return(combo1.store.indexOf(r));
console.log('combo item' + r + 'selected');
}
As you can see, I'm trying to get the value of the combobox with the ID = cmbGraph, but it's not working, the error message I get is :
Uncaught TypeError: Cannot call method 'getValue' of undefined
It's complicated with Extjs 4 because I have to get to an element of a view with my controller.
Any help would be much appreciated.

You could also keep the refs so you can reuse them if you need to and use something like this if you wanted:
refs: [{
ref : 'graph',
selector : 'params > container > combobox'
}],
or
refs: [{
ref : 'graph',
selector : 'params #cmbGraph'
}],
or even straight:
refs: [{
ref : 'graph',
selector : '#cmbGraph'
}],
These should all give you the same reference to the combobox. Just depends on how you arrange your code.
var comboValue = me.getGraph().getValue();