PDA

View Full Version : Help needed in SUBMIT button of a form



Ami003
17 Oct 2012, 10:05 PM
Hi everyone,

I need a help in EXTJS form. I have a form where the SUBMIT button is not performing its requisite action. The field values of a form is the coloumn values of a grid, while clicking on to the SUBMIT button it does not update the content in the grid. Below is my code. Kindly Help and let me know where i am going wrong. Thanks.



Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', './ext-407-gpl/examples/ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);

var EditSchedulerScope = function() {

var metricEditGridScope;
var editGridScopeStore;

var rowEditingScope;

var valuesToUpdate = "";
var valuesToDelete = "";

return {

init : function(){


this.rowEditingScope = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});

Ext.define('EditGridScopeModel', {
extend: 'Ext.data.Model',
fields: [{name: 'id',type: 'int'}, 'metric_name','params_name','params_combination','owner','periodicity',
'availability','start_period','duration','is_active',
'no_of_period','start_time']
});

this.editGridScopeStore = Ext.create('Ext.data.JsonStore', {
model: 'EditGridScopeModel',
proxy: {
type: 'ajax',
url: 'metricControl/viewData.php?table=Schedule',
reader: {
type: 'json',
root: 'myInventory'
}
},
});



// Create the editor grid Scope
this.metricEditGridScope = Ext.create('Ext.grid.Panel', {
store: this.editGridScopeStore,
hidden : true,
columns: [{
header: 'id',
dataIndex: 'id',
width: 50,
hideable: false

},{
header: 'metric Name',
dataIndex: 'metric_name',
width: 50,
hideable: false
},{
header: 'params_name',
dataIndex: 'params_name',
width: 100,
hideable: true
},{
header: 'params_combination',
dataIndex: 'params_combination',
width: 120,
hideable: false
}, {
header: 'Owner',
dataIndex: 'owner',
width: 160,
hideable: false
}, {
header: 'is_active',
dataIndex: 'is_active',
width: 120,
hideable: false
}, {
header: 'Periodicity',
dataIndex: 'periodicity',
width: 90,
hideable: false
},
{
header: 'availability',
dataIndex: 'availability',
width: 90,
// flex:1
// editor: {
// xtype: 'htmleditor',
// enableSourceEdit: true,
// enableColors: true,
// enableAlignments: true
// }
},
{
header: 'Start Period',
dataIndex: 'start_period',
width: 90,
hideable: false
},

{
header: 'Duration',
dataIndex: 'duration',
width: 90,
hideable: false
},

{
header: 'No of Period',
dataIndex: 'no_of_period',
width: 90,
hideable: false
},

{
header: 'Start Time',
dataIndex: 'start_time',
width: 90,
hideable: false
}

],
//renderTo: 'editor-grid',
// width: 1200,
// height: 520,
width:"100%",
height:"100%",
//title: 'Editable Scope-Metrics List',
frame: true,
border : false,
plugins: [this.rowEditingScope],
listeners: {
'selectionchange': function(view, records) {
}
}

});

this.rowEditingScope.on('validateEdit', function(editor, e){

});
this.metricEditGridScope.on('beforeedit', function(editor, e) {

EditSchedulerScope.showPopup( EditSchedulerScope.metricEditGridScope , e.column, e.colIdx, e.record, e.row, e.rowIdx, e, "");

});

},//init

//Show Popup Window Definition
showPopup: function (metricEditGridScope ,td,cellIndex,record,tr,rowIndex,e,eOpts) {

//
// var columnIndex = this.getColumnIndex(metricEditGridScope, 'YourCellColumnNameThatYouWantClicked');
//
//
// if (cellIndex == columnIndex) {
// Ext.QuickTips.init();
// Ext.form.Field.prototype.msgTarget = 'side';
// /*
// var html_editor = Ext.create('Ext.form.HtmlEditor', {
// width: 300,
// height: 200,
// renderTo: Ext.getBody()
//
// });
// */
// }

//OR
var sm = EditSchedulerScope.metricEditGridScope.getSelectionModel();
var smSel = sm.getSelection()
var myStore = EditSchedulerScope.metricEditGridScope.getStore();


var metricId =""
var metricName = ""
var metricScope = ""
var metricParams = ""

for (i=0; i<= smSel.length-1; i++) {

metricId = smSel[i].get("id")
metricName = smSel[i].get("metric_name")
metricParams = smSel[i].get("params_name")
metricScope = smSel[i].get("params_combination")

} metricScope = metricScope.replace(/'/g, "");
var listOfScope = metricScope.split(",");
var listOfParams = metricParams.split(",");

//alert ("metricScope" + metricScope);
//alert ("listOfScope" + listOfScope);
//alert ("metricParams" + metricParams);

var scheduler = {}
var schedulerScope =""
var schedulerSeverity =""
var schedulerStep =""
var schedulerDuration=""
var schedulerYear=""
var schedulerCounting=""
var scopeStatus = ""
var severityStatus = ""
var stepStatus = ""
var durationStatus = ""
var yearStatus = ""
var countingStatus = ""

for(j=0; j<=listOfScope.length-1; j++){
for (k=0; k<=listOfParams.length-1;k++){
//alert ( "K:" + listOfParams[k] + "==" + "j:" + listOfParams[j] );
if(j == k){
scheduler[listOfParams[k]] = listOfScope[j];
//alert("ListOfParams:" + listOfParams[k]);
//alert ("K Value:"+k+"###");

//break;
}
}
}


alert("Scheduer Length:"+scheduler.length);
var scheduler_fieldlist = ""
for (var k in scheduler) {
// use hasOwnProperty to filter out keys from the Object.prototype
if (scheduler.hasOwnProperty(k)) {
//alert('key is: ' + k + ', value is: ' + scheduler[k]);

if(k == "scope"){
schedulerScope = scheduler[k];
scopeStatus = "yes"
}else{severityStatus = "no"}
if(k == "severity"){
schedulerSeverity = scheduler[k];
severityStatus = "yes"
}else{severityStatus = "no"}
if(k == "step"){
schedulerStep = scheduler[k];
stepStatus = "yes"
}else{stepStatus = "no"}
if(k == "duration"){
schedulerDuration = scheduler[k];
durationStatus = "yes"
}else{durationStatus = "no"}
if(k == "year"){
schedulerYear = scheduler[k];
yearStatus = "yes"
}else{yearStatus = "no"}
if(k == "counting"){
schedulerCounting = scheduler[k];
countingStatus = "yes"
}else{countingStatus = "no"}

scheduler_fieldlist = scheduler_fieldlist + '\{ xtype: textfield ,allowBlank:false ,name:'+ k + ',fieldLabel:' + k + ',value:' + scheduler[k] +'\},'
}
}

//alert("schedulerScope:" +schedulerScope);
//alert("schedulerSeverity:" + schedulerSeverity);
//alert("schedulerStep:" + schedulerStep);
//alert("schedulerDuration:" + schedulerDuration);
//alert("schedulerYear:" + schedulerYear);
//alert("schedulerCounting:" + schedulerCounting);
//
//alert("scheduler_fieldlist" + scheduler_fieldlist);

var btnSubmit = new Ext.Button({
text:'Submit'
,formBind:true,
handler : function() {

}
});



var form_scope = new Ext.form.FormPanel({
id:'frmPanel'
//,URL: 'metricControl/update_scheduler.php?table=Schedule'
//,URL: ''
,labelAlign:'top'
,monitorValid:true
,bodyStyle:'padding:15px'
,border:false
,frame:true
,listeners: {clientvalidation : function(frm) {
doTheLoop(frm);
}}
,items:[{
xtype:'textfield'
,fieldLabel:'Metric ID'
,allowBlank:true
,name:'m_id'
,listeners: {show : function(fld) {
// DOES NOT WORK
stopInvalid(fld);
}},
value : metricId
},{
xtype:'textfield'
,fieldLabel:'Metric Name'
,name:'m_name'
,allowBlank:true
,value: metricName
},{
xtype:'textfield'
,fieldLabel:'Scope'
,name:'s_scope'
,allowBlank:true
,value: schedulerScope
},{
xtype:'textfield'
,fieldLabel:'Severity'
,name:'s_severity'
,allowBlank:true
,value: schedulerSeverity
},{
xtype:'textfield'
,fieldLabel:'Step'
,name:'s_step'
,allowBlank:true
,value: schedulerStep
},{
xtype:'textfield'
,fieldLabel:'Duration'
,name:'s_duration'
,allowBlank:true
,value: schedulerDuration
},{
xtype:'textfield'
,fieldLabel:'Counting'
,name:'s_counting'
,allowBlank:true
,value: schedulerCounting
}
]
,buttons:[{
text:'Submit',
formBind: true,
// Function that fires when user clicks the button
handler:function(){

form_scope.getForm().submit({
method:'GET',
//waitTitle:'Connecting',
//waitMsg:'Sending data...',

success: function () { // When saving data success
//Add the new data in the row
smSel[0].set("params_combination",form_scope.getForm().findField("s_scope").getValue());
EditMetricsHelp.rowEditingHelp.fireEvent('validateEdit');
EditMetricsHelp.rowEditingHelp.cancelEdit();
EditMetricsHelp.rowEditingHelp.completeEdit();

Ext.MessageBox.alert ('Message','Content Updated Successfully!!!');
//var redirect = 'grid_panel.html';
//window.location = redirect;
// clear the form
//simpleForm.getForm().reset();
},

failure: function () { // when saving data failed

Ext.MessageBox.alert ('Message','Help content update failed');

}
});
alert( " Outside submit action failure");
}
}]
});


var win = new Ext.Window({
title:'The form'
,width:600
,height:300
,layout:'fit'
,border:false
//,closable:false
,closable:true
,items:form_scope
});

win.show();

},//Show Pupop

loadStore : function(){
EditSchedulerScope.editGridScopeStore.load()
},

getGrid : function(){
return EditSchedulerScope.metricEditGridScope
}

}//return

}();

metalinspired
18 Oct 2012, 7:24 AM
Please encapsulate your code into

scottmartin
19 Oct 2012, 7:08 AM
That is a lot of code to stumble through .. please format it as mentioned next time.

For a grid to update you only need to update the store and it will auto update the grid.
I suspect your submit is not returning the correct JSON response to properly update the store.

Scott.

Ami003
16 Nov 2012, 12:27 AM
Hi everyone

I need a help where i can provide a checkbox in all the columns of a grid.

I have been able to provide a checkbox with a row but the same is not working with column. Can anyone help me out. Thanks in advance.