extJS how to POST parameters through button? - extjs

I have this code. If i click on button my form parameters are inserting into database. How i can do it?? what i should write there?
And if i click on reset form, my window closing. Please help! Thank you!
var AddQuestion = new Ext.Button({
method : 'POST',
url : '/questions/create',
tooltip : 'Add Question',
icon : '/images/icons/silk/add.png',
iconCls : 'add',
style : 'margin-right: 60px;float:right;',
handler : function() {
new Ext.Window({
title : 'Add Question',
width : 700,
height : 800,
bodyStyle : 'padding: 10px',
layout : 'form',
modal : true,
closable : true,
resizable : false,
draggable : false,
autowidth : true,
items :[
{
fieldLabel : 'Question',
name : 'question[text]',
xtype : 'htmleditor',
enableFont : false,
enableFormat : false,
enableFontSize : false,
enableLists : false,
enableAlignments: false,
enableFont : false,
enableColors : false,
height : 160,
width : 560
},
{
name :'form_type',
fieldLabel :'Form Type',
xtype :'combo',
triggerAction :'all',
mode :'local',
editable : false,
allowBlank : false,
emptyText :'You should Choose any...',
store :new Ext.data.SimpleStore({
fields :['mode', 'name'],
data :[
['1', 'TextArea Question'],
['2', 'Scale Question'],
['3', 'TextArea + Scale Question']
]
}),
displayField :'name',
valueField :'mode',
hiddenName :'form_type'
},
{
xtype : 'itemselector',
name : 'selected_respondents',
imagePath : '../ux/images/',
bodyStyle : 'background:#DFE8F6',
multiselects: [{
legend : 'All Respondents',
width : 270,
height : 350,
store : st,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
},{
legend : 'Selected Respondents',
width : 270,
height : 350,
store : st2,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
}]
},
{
fieldLabel :'To do',
xtype : 'button',
text : 'Refresh respondents ↑',
height : 30,
icon : '/images/icons/silk/arrow_refresh_small.png',
width : 180,
handler: function(){
if((who_is_admin == '1') || (who_is_admin == '0')){
if (st2.getCount() == 0){
st.reload();
}else
{
Ext.Msg.show({
title : 'Message for You',
msg : "You should left <i>'Selected Respondents'</i> field empty to <b>refresh</b> some changes!",
modal : true,
Height : 200,
closable : true,
resizable : false,
draggable : false,
Width : 300,
buttons : Ext.Msg.OK
});
}
}
}
},
{
xtype : 'checkbox',
boxLabel : 'Make Question Active',
inputValue : '1',
name : 'is_active',
hiddenName : 'is_active',
checked : true
},
],
buttons: [{
text: 'Reset Form',
handler: function(){
}
},{
text: 'Submit Form',
handler: function(){
}
}
}] // button end
}).show(); //show window
}
});

You can do this by sending AJAX request as soon as user clicks on button.
For eg in your case handler for 'Submit Form' button should look like
Ext.Ajax.request({
url:'assertion.htm', // url of page where you want to send it
method: 'POST',
params: {
selectedSource:source.getValue() //Right hand side whatever value you want to send
},
scope:this
});

Related

ExtJs vtype compare using VTypes with multiple combo boxes

Have a form where I have two group boxes with two combo boxes each. The first group box is for a deposit payment and the second is for the final payment. The first combo box in each group box is to make the payment a request and the second is to make the payment mandatory. But you cannot make the deposit payment and required payments both set to mandatory.
Therefore, I have been trying to use VTypes to check and compare the two required combo boxes and put out a message if they are both set to YES. I'm unable to get the contents of the other combo box using field,up('form').down('#' + field.pmtField); (where pmtField is defined in the item.)
Here is the code:
(Ext.myapplication extends Ext.grid.Panel)
var form=new Ext.myapplication(
{
layout : {type: 'vbox', align: 'stretch'},
border : false,
items:
[
{
xtype: 'fieldset',
title: 'Deposit Requirements',
items:
[
{
xtype : 'fieldcontainer',
layout:{type: 'hbox'},
border: 0,
items:
[
{
xtype : 'combobox',
name : 'deposit_request_flag',
labelAlign : 'top',
inputWidth : 30,
fieldLabel : 'Requested',
labelStyle : 'font-weight:bold',
valueField : 'deposit_request_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
},
{
xtype : 'combobox',
name : 'deposit_required_flag',
labelAlign : 'top',
inputWidth : 30,
fieldLabel : 'Required',
labelStyle : 'font-weight:bold',
valueField : 'deposit_required_flag',
editable : false,
vtype : 'depositFlagCheck',
pmtField : 'payment_required_flag',
value : 'f',
store : [['t','YES'],['f','NO']]
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Payment Requirements',
items:
[
{
xtype : 'fieldcontainer',
layout:{type: 'hbox'},
border: 0,
items:
[
{
xtype : 'combobox',
name : 'payment_request_flag',
labelAlign : 'top',
fieldLabel : 'Requested',
labelStyle : 'font-weight:bold',
valueField : 'payment_request_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
},
{
xtype : 'combobox',
name : 'payment_required_flag',
labelAlign : 'top',
fieldLabel : 'Required',
labelStyle : 'font-weight:bold',
valueField : 'payment_required_flag',
vtype : 'paymentFlagCheck',
depField : 'deposit_required_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
}
]
}
]
}
]
});
Here is the definition of my VTypes:
Ext.QuickTips.init();
Ext.apply(Ext.form.field.VTypes, {
depositFlagCheck : function(val, field) {
var paymentFlag = field.up('form').up('form').down('#' + field.pmtField);
if (val == 'YES') {
if (paymentFlag.getValue() == 't') {
return false;
}
}
return true;
},
depositFlagCheckText : 'You cannot require both dep and full payment amount.',
paymentFlagCheck : function(val, field) {
var depositFlag = field.up('form').down('#' + field.depField);
if (val == 'YES') {
if (depositFlag.getValue() == 't') {
return false;
}
}
return true;
},
paymentFlagCheckText : 'Still cannot do it!'
});
Try following and let me know the result. Here, I added an id both component then try to get component value by getValue() method.
(Ext.myapplication extends Ext.grid.Panel)
var form=new Ext.myapplication(
{
layout : {type: 'vbox', align: 'stretch'},
border : false,
items:
[
{
xtype: 'fieldset',
title: 'Deposit Requirements',
items:
[
{
xtype : 'fieldcontainer',
layout:{type: 'hbox'},
border: 0,
items:
[
{
xtype : 'combobox',
name : 'deposit_request_flag',
labelAlign : 'top',
inputWidth : 30,
fieldLabel : 'Requested',
labelStyle : 'font-weight:bold',
valueField : 'deposit_request_flag',
editable : false,
value : 'f',
id : 'deposit_request_flag',
store : [['t','YES'],['f','NO']]
},
{
xtype : 'combobox',
name : 'deposit_required_flag',
labelAlign : 'top',
inputWidth : 30,
fieldLabel : 'Required',
labelStyle : 'font-weight:bold',
valueField : 'deposit_required_flag',
editable : false,
vtype : 'depositFlagCheck',
pmtField : 'payment_required_flag',
value : 'f',
id : 'deposit_required_flag',
store : [['t','YES'],['f','NO']]
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Payment Requirements',
items:
[
{
xtype : 'fieldcontainer',
layout:{type: 'hbox'},
border: 0,
items:
[
{
xtype : 'combobox',
name : 'payment_request_flag',
labelAlign : 'top',
fieldLabel : 'Requested',
labelStyle : 'font-weight:bold',
valueField : 'payment_request_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
},
{
xtype : 'combobox',
name : 'payment_required_flag',
labelAlign : 'top',
fieldLabel : 'Required',
labelStyle : 'font-weight:bold',
valueField : 'payment_required_flag',
vtype : 'paymentFlagCheck',
depField : 'deposit_required_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
}
]
}
]
}
]
});
Ext.QuickTips.init();
Ext.apply(Ext.form.field.VTypes, {
var depVal = Ext.getCmp('deposit_request_flag').getValue(),
payVal = Ext.getCmp('deposit_required_flag').getValue();
depositFlagCheck : function() {
if (depVal == 'YES' && payVal == 't') {
return false;
}
return true;
}

Custom function call after Extjs 4 grid sort

I have an Extjs 4 grid with sort capability. i want to call a custum function after each time user presses sort button.
In my custom function i want to navigate to the first page of my grid (my grid uses pagination and it takes advantage of server-side sort) i think i must use store.loadPage(1) in my custom function (correct me if I'm wrong)
where should i put my custom function?
This is my Ext.OnReady() function:
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var url = {
local: 'grid-filter.json', // static data file
remote: 'grid-filter.php'
};
var paging = true;
var encode = false;
var local = false;
Ext.define('UserDirectoryDataModel', {
extend : 'Ext.data.Model',
fields : [ 'uname', 'fname', 'lname', 'postcode', 'mail', {
name : 'pass'
}, 'hasAccess', 'isActive', 'lastVisit' , 'deleteUser'],
idProperty : 'uname'
});
var itemsPerPage = 20;
var store = Ext.create('Ext.data.Store', {
pageSize : itemsPerPage,
autoLoad: false,
local: false,
autoDestroy: true,
model : 'UserDirectoryDataModel',
autoSync : true,
sortOnLoad : true,
remoteSort:true,
sorters : {
property : 'uname',
direction : 'ASC'
},
listeners: {
beforeload: function(){
store.loadPage(1);
}
},
proxy : {
type : 'ajax',
url: (local ? url.local : url.remote),
api : {
read : 'read.php',
update : 'update.php'
},
reader : {
type : 'json',
root : 'users',
successProperty : 'success',
totalProperty : 'totalCount'
},
writer : {
type : 'json',
writeAllFields : true,
encode : false,
root : 'users'
},
afterRequest : function(request, success) {
if (request.action == 'update') {
if (success) {
Ext.MessageBox.alert('alert',
'data updated!');
}
}
}
}
});
store.load({
params:{
start:0,
limit: itemsPerPage
}
});
var filters = {
ftype: 'filters',
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [
{
}
]
};
var createColumns = function (finish, start) {
var columns = [ {
text : "username",
dataIndex : 'uname',
width : 150,
filterable: true,
align : 'right'
}, {
text : "name",
dataIndex : 'fname',
width : 150,
align : 'right',
hidden : false,
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "last name",
dataIndex : 'lname',
width : 150,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "PostalCode",
dataIndex : 'postcode',
width : 110,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "email",
dataIndex : 'mail',
width : 200,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "password",
width : 150,
align : 'right',
sortable : false,
filterable: true,
hidden : true,
dataIndex : 'pass',
editor : {
xtype : 'textfield',
inputType : 'password',
allowBlank : true
}
}, {
text : "access to system",
dataIndex : 'hasAccess',
renderer:function(value){
if(value[0]=="1"){
return "has";
}else{
return "doens't have";
}
},
width : 100,
align : 'center',
sortable : false,
filterable: false
}, {
text : "active",
dataIndex : 'isActive',
renderer:function(value){
if(value==null)
return;
if(value[0]=="1"){
return "no";
}else if(value[0]=="0"){
return "yes";
}else if(value[0]=="2"){
return "Not in portal!";
}
},
width : 100,
align : 'center',
sortable : false,
filterable: false
}, {
text : "last visit",
dataIndex : 'lastVisit',
width : 120,
hidden : true,
align : 'right',
sortable : true,
filterable: true
}, {
text : " ",
dataIndex : 'uname',
renderer:function(value){
return "delete";
},
width : 120,
hidden : true,
align : 'right'
} ];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
border: false,
width : 1200,
height : 620,
title : '',
store: store,
disableSelection : false,
seltype : 'rowmodel',
loadMask : true,
viewConfig : {
id : 'gv',
trackOver : false,
stripeRows : false,
plugins : [ {
ptype : 'preview',
bodyField : 'excerpt',
expanded : true,
pluginId : 'preview'
} ]
},
columns: createColumns(),
features: [filters],
dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: store
})],
plugins : [ Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit : 2
}) ],
renderTo : 'userdatagrid'
});
grid.child('pagingtoolbar').add([
{
text: 'show filters',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert('show filters',data);
}
},{
text: 'delete filters',
handler: function () {
grid.filters.clearFilters();
}
}
]);
store.loadPage(1);
});
Or you could use this:
grid.on('sortchange', function() {
grid.getStore().loadPage(1);
});
Forget everything I wrote:
Server Side sorting in an ExtJS GridPanel
You should put your custom function in the grid event: sortchange.
I just re-read your question - I thought you have infinite paging.
If your sort is done server side, then yes, you need to call loadPage(1).
You also need to send the sort parameters.
listeners: {
sortchange: function(){
var grid = Ext.ComponentQuery.query('my-grid-alias')[0];
grid.getStore().loadPage(1);
}
}
I hope this helps.
I just put a loadPage(1) in the sortchange event, but it made twice server request(grid made the first one with sort parameters automatically), how could it be only once?
I figure out one solution, I set "remoteSort:false" in store and
"sortchange: {fn:function(){
var time = (new Date()).getTime()/1000;
// after {remoteSort:false} is set, sortchange event will be fired twice when column header is clicked, so I had to set a parameter for time record
if('undefined' == typeof(this.last_sort_time) || this.last_sort_time+1 < time){
this.getStore().loadPage(1);
this.last_sort_time = time;
}
}, scope:this}"
in grid.
But it not works fine, because the received data was reordered by the grid before displayed on it
At last, I solve the problem in this way:
Ext.override(Ext.grid.column.Column, {
doSort:function(){
var ds = this.up('tablepanel').store;
ds.currentPage = 1;
this.callParent(arguments);
}
});
And it works perfectly so far
sortchange event fires after request is send to the server. For solution look here
http://www.sencha.com/forum/showthread.php?145779-Reset-page-for-paginator-on-sort-change

Grid not displaying in window - ext js

I am new to ext js. And my requirement is OnClick of a button, it calls a js function which pops up a window.Within this window I have a formPanel and a grid embedded in it. In the window items properties, if I add grid, the window is not showing. If I keep only form variable, then the window is displayed.
items : [filterPIDForm,pidGrid] is not working whereas
items: [filterPIDForm] is working fine.
Below is the code snippet
<script type="text/javascript">
jQuery(document).ready(function(){
// eCube search
jQuery('#eCubeSearch').click(function(){
pidSearch();
});
});
function pidSearch()
{
var filterPIDForm = new Ext.form.FormPanel({
title : 'Job Filters',
floatable : false,
id : 'filterForm',
tabTip : 'woot',
labelAlign :'top',
region :'west',
collapsible : true,
bodyStyle : 'padding: 5px; background-color: #DFE8F6',
border : false,
// style : 'border-top: 1px solid #99BBE8;',
width : 220,
items : [
{
xtype : 'combo',
width : 200,
id :'emailCombo',
fieldLabel :'Filter by Owner',
valueField :'emailValue',
displayField :'emailDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
},
{
xtype : 'combo',
width : 200,
id :'statusCombo',
fieldLabel :'Filter by Status',
valueField :'statusValue',
displayField :'statusDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
//value :'ALL'
},
{
xtype : 'textfield',
fieldLabel : 'PID/Description Search',
width : 200,
id :'searchText'
}
],
buttons: [
{
text : 'Clear Filter(s)',
id : 'clear'
},
{
text : 'Apply Filter(s)',
id : 'apply'
}
]
});
var pidGrid = new Ext.grid.GridPanel({
title : 'Job List',
id : 'pidList',
columns: [
//new Ext.grid.RowNumberer(),
{
header : 'PID',
width : 70,
dataIndex : 'pid',
sortable : true
},
{
header : 'Description',
id : 'description',
dataIndex : 'description',
sortable : true
}
]
});
var win = new Ext.Window({
modal:true,
title: 'PID Search',
layout:'absolute',
id: 'eCubeSearchWin',
width:1000,
height:400,
resizable: false,
plain: false,
resizable: false,
border: true,
closeAction :'close',
items : [filterPIDForm,pidGrid],
//items : [filterPIDForm],
buttons : [
{
text : 'OK',
id : 'test'
},
{
text : 'Close',
handler : function(){
Ext.getCmp('eCubeSearchWin').close();
}
}
]
});
win.show();
}
</script>
try setting layout in window
var win = new Ext.Window({
renderTo : Ext.getBody(),
width : 500,
height : 500,
layout : 'border',
items : [{
items : filterPIDForm
,layout :'fit'
,region : 'north'
,height : 300
},{
items : pidGrid
,layout :'fit'
,region :'center'
}]
}).show();

Problem in clicking Ext JS button second time

On clicking an 'add' button my program opens a window but when a closes that window and again click on 'add' button window doesn't show up. Here is my code to show window-
var AddURLWindow = new Ext.Window ({
title : 'XXXX',
width : 550,
border : 'false',
height : 160,
id : 'win',
name : 'win',
bodyStyle : 'background-color:#fff;padding: 5px',
autoScroll : true,
items: [
urlContainer
],
buttonAlign : 'right', // buttons aligned to the right
buttons :[{
text : 'Add URL'
//handler : saveRules
},{
text : 'Cancel',
handler : closeWindow
}] // buttons of the form
});
Code for urlContainer is-
var urlContainer = {
xtype : 'fieldset',
flex : 1,
border : false,
hideBorders : false,
autoHeight : true,
labelWidth : 70,
height : 42,
defaultType : 'field',
defaults : {
anchor : '100%',
allowBlank : false,
border : 'false'
},
items : [
nameTextField
]
};
Code for nameTextField is-
var nameTextField = new Ext.form.TextField({
border : false,
fieldLabel : 'Name',
name : 'first',
// id : 'id-name',
emptyText : 'Entesr URL',
anchor : '100%',
width : '400',
allowBlank : false
});
Any help?

ExtJS : BUtton actions when extending form panel

How can I call the formpanel.getForm() method when I am trying to override the Ext formpanel?
commentsForm = Ext.extend(Ext.form.FormPanel, {
frame: true,
initComponent: function() {
var config = {
frame : true,
autoScroll : true,
labelWidth : 150,
autoWidth : true,
labelPad : 20,
waitMsgTarget: true,
bodyStyle:'padding:0px 15px 15px 15px',
items: [{
xtype : 'fieldset',
title : 'Write Comment',
anchor : '100%',
defaults : {
selectOnFocus: true,
msgTarget: 'side',
xtype: 'textfield',
width : 200
},
items : [{
xtype : 'textarea',
name : 'comment',
allowBlank : false
}, {
name : 'added_by',
allowBlank : false
}, {
xtype : 'myndatefield',
name : 'added_at',
allowBlank : false,
value : new Date()
}]
}],
buttons: [{
text: 'Add',
handler : function() {
// TODO
var classForm = this.getForm();
console.log(this.getForm());
if (classForm.isValid()) {
console.log(classForm.findField("name"));
}
Ext.WindowMgr.hideAll();
}
}, {
text: 'Cancel',
handler : function() {
Ext.WindowMgr.hideAll();
}
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
myn.commentsForm.superclass.initComponent.apply(this);
}
});
First in your code you are extending not overriding...
commentsForm.getForm() is a way to access BasicForm in your FormPanel if you place var at very beggining, however your code is confusing regarding name spaces: myn.commentsForm.superclass.initComponent.apply(this);

Resources