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);
}
}
});
Related
I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?
Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2
I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.
I have a form with autoScroll feature. How can I scroll to the bottom of the form when I add a new item to it?
height: 200,
autoScroll: true,
Here is my sample code
If the field is added at the end of the form then the following solution might help:
EXTJS 5 & 6
http://docs.sencha.com/extjs/5.1.0/api/Ext.form.Panel.html#cfg-scrollable
In the form config:
scrollable: true,
In button handler:
{
xtype: 'button',
itemId: 'addChildBtn',
disabled: false,
text: 'Clone fieldset',
handler: function () {
// Clone field set
var set = Ext.getCmp('s1');
var s = set.cloneConfig();
form.add(s);
this.up('form').getScrollable().scrollTo(0, 9999);
}
}
EXTJS 4
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.Panel-method-scrollBy
In button handler:
{
xtype: 'button',
itemId: 'addChildBtn',
disabled: false,
text: 'Clone fieldset',
handler: function () {
// Clone field set
var set = Ext.getCmp('s1');
var s = set.cloneConfig();
form.add(s);
this.up('form').scrollBy(0, 9999, true);
}
}
Having a strange issue with a plugin that enables a combobox to allow multiple selections, the plugin is LovCombo, I have it working to the point where I can pick multiple selections, if I collapse the combobox with the down arrow I see the selections remain in the combobox, if I make selections though and then click anywhere outside the combobox then the values vanish!
Issue can be seen at http://jsfiddle.net/5Asf4/12/
Ext.onReady(function () {
var lc = new Ext.ux.form.LovCombo({
id:'lovcombo'
//,width:300
,fieldLabel: 'Test Data'
,hideOnSelect:false
//,maxHeight:200
,store:[
[1, 'Personnel []']
,[11, 'Finance (33)']
,[5, 'Door']
,[6, 'Door Panel']
,[2, 'Management !77']
,[25, 'Production']
,[3, 'Users']
,[20, 'Window']
,[21, 'Window Panel']
,[22, 'Form Panel']
,[23, 'Grid Panel']
,[24, 'Data View Panel']
]
,triggerAction:'all'
,mode:'local'
});
var addAssetDialog = new Ext.Window( {
id: 'maintenance_addAssetDialog',
title: 'Test Multi Select Combobox',
closeAction: 'hide',
items:[
{
xtype: 'form',
id: 'maintenance_addAssetForm',
border: false,
bodyBorder: false,
items: [
lc
],
}
],
buttons:[
{
text: 'Cancel',
disabled: true,
handler: function ( ) {
},
scope: this
},
{
text: 'Save',
disabled: true,
handler: function ( ) {
},
scope: this
}
],
});
addAssetDialog.show();
}); //end onReady
found a fix from the sencha forums, comment by savva http://www.extjs.com/forum/showthread.php?p=427065#post427065
add the following line to the config
beforeBlur: Ext.emptyFn
jsfilddle updated to show fix
http://jsfiddle.net/shauncraig007/5Asf4/13/
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
I am developing an application in which when submit button is clicked in the form, it should go to a different screen. However it is just printing the results outside of the window and not really going to a new screen. I have hardcoded the store to make sure there is data when I start the application and it still prints it outside of the viewable area.
Here is my Ext.data.Store:
var store = new Ext.data.Store({
model: 'jobSummary',
storeId: 'jobStore',
data : [{title: 'This is test'},
{title: 'This is test2'},
{title: 'This is test3'}]
});
Here is the list that I am using it in:
SearchJobsForm.jobsList = Ext.extend(Ext.Panel, {
dockedItems : [ {
xtype : 'toolbar',
title : 'WTJ',
dock : 'top',
items : [ {
xtype : 'button',
text : 'Back',
ui : 'back',
handler : function() {
//back button controller
},
scope : this
} ]
} ],
items : [ {
xtype : 'list',
emptyText : 'No data available.',
store : 'jobStore',
itemTpl : '<div class="list-item-title">{title}</div>'
+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure : function(record) {
},
grouped : false,
scroll : 'vertical',
fullscreen : true
} ],
initComponent : function() {
SearchJobsForm.jobsList.superclass.initComponent.apply(this, arguments);
}
});
And i am calling this list panel from my submit button handler which is:
var jobsList = new SearchJobsForm.jobsList();
The full code I have pasted on this link for better visibility:
http://pastebin.com/a05AcVWZ
Ok,
SearchJobsForm.form is your main panel, it will contains two components a searchForm (with text/select input) and a panel/list of results.
In the callback, we will hide() the form and show() the results list. This is not a clean code, but the simpliest and kissest one I can get from yours.
First let's instantiate the jobsList
// It has the id ( id: 'jobsListId')
var jobsList = new SearchJobsForm.jobsList();
then you should put all your inputs into a form (xtype : formpanel,
id: 'searchFormId')
And add the resultPanel just after the form
Here is the code
SearchJobsForm.form = Ext.extend(Ext.Panel,{
initComponent: function(){
Ext.apply(this, {
id: 'searchForm',
floating: true,
width: 250,
height: 370,
scroll: 'vertical',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [
{
xtype: 'formpanel', // 1. this is the added formpanel
itemId: 'searchForm',
id: 'searchFormId', // this id is important
items: [
{
xtype: 'textfield',
...
}, {
xtype: 'textfield',
...
},
// all your inputs
]
},
// 2. add here the results panel : jobsList
jobsList
], // the code continues inchanged
dockedItems: [{
...
- Finally we will modify the ajax callback to hide/show the panels. Do not remove one of them, elsewhere you won't be able to reset your form
// here it comes
Ext.util.JSONP.request({
url: "http://"+serverAdd+":"+ port+"/users/searchresults.json",
format: 'json',
callbackKey: 'callback',
params : searchCriteria,
callback: function(data) {
console.log('callback');
// Call your list-filling fonctions here
// jobsList.fill(data);
Ext.getCmp('searchFormId').hide();
Ext.getCmp('jobsListId').show();
},
failure: function ( result) {
console.error('Failed');
}
});
For your next projects, I recommend you to work with classes and namespaces to avoid 1000 lined files ; Ext.ns() is your best friend and will avoid you a lot of headaches.