I think i stucked here. I have a model (Test) with 3 fields: id, name, name2. So i want to write there something and click on Apply button on bottom and if all fields are filled and passed validation (i guess this i should do in model Test.rb, yeah?) and get to localhost:3000/some/where and if i left some filed (name or name2) unfilled so i get a message like "ERROR".
test_panel.rb
class TestPanel < Netzke::Basepack::FormPanel
js_mixin :actions
def configuration
super.merge(
:name => :test_panel,
:model => 'Test',
:title => "TEST PANEL",
)
end
end
action.js
{
onApply: function() {
var form = this.getForm();
if (form.isValid()) {
this.Apply(form.getFieldValues(), function(success) {
if (success) {
window.location = 'some/where';
} else {
Ext.Msg.show({
title: 'FF',
msg: 'I guess you have an error!!',
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING });
}
}, this);
} else {
Ext.Msg.show({
title: 'FF',
msg: 'Fill all fields!!',
buttons: Ext.Msg.OK,
icon: Ext.Msg.WARNING });
}
}
}
If my understanding is correct no need to do any thing with netzke. Just write your validators in the rails model. If any field is failed to pass the validation Netzke will capture the validation message from rails model and display it on top of the grid.
Related
As the title says, I need to capture the change event of a tab and show to the user a confirm message box. I achieved this but using the confirm JS native function. I'd like to perform this using ExtJS's Ext.Msg.show(), but the program flow does not stop with this way, as it does with confirm function. See below the two ways:
'Ext.Msg.show()' way:
onBeforeTabChange: function(panel, nextTab, oldTab)
{
var bReturn = true;
if (null != oldTab)
{
if(AppGlobals.isEditing=='si')
{
Ext.Msg.show(
{
title: 'Warning',
msg: 'Leave without saving changes?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.WARNING,
closable: false,
buttonText:
{
yes : 'Yes, sure',
no : 'No, will save changes first'
},
fn: function (buttonId)
{
if(buttonId=="yes")
{
AppGlobals.isEditing = 'no';
bReturn = true;
}
else
{
bReturn = false;
}
}
});
}
else
{
bReturn = true;
}
}
return bReturn;
}
As I said before, the code above does not stop the program flow. The alert appears but the tab changes anyway.
'confirm' way:
onBeforeTabChange: function(panel, nextTab, oldTab)
{
var bReturn = true;
if (null != oldTab)
{
if(AppGlobals.isEditing=='si')
{
bReturn = confirm('Leave without saving changes?');
if(bReturn==true)
{
AppGlobals.isEditing = 'no';
}
}
else
{
bReturn = true;
}
}
return bReturn;
}
The code above do work, and the tab does not change until user clicks on "Yes".
Any help? Thanks in advance.
Ext.Msg.show() is asynchronous and doesn't stop execution of the rest of program. The solution would be always return false from beforetabchange listener and programmatically change the tab when user press Yes.
A Sample Code: Here i have used allowChange as flag to prevent showing of message box when tab is changed programmatically. You can use you own flag here which i suppose is AppGlobals.isEditing
Ext.application({
launch: function() {
var allowChange = false;
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [{
title: 'Tab 1',
bodyPadding: 10,
html: 'A simple tab'
},
{
title: 'Tab 2',
html: 'Another one'
}
],
renderTo: Ext.getBody(),
listeners: {
beforetabchange: function(tabPanel, nextTab, oldTab) {
var bReturn = true;
if (null != oldTab && !allowChange) {
bReturn = false;
Ext.Msg.show({
title: 'Warning',
msg: 'Leave without saving changes?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.WARNING,
closable: false,
buttonText: {
yes: 'Yes, sure',
no: 'No, will save changes first'
},
fn: function(buttonId) {
if (buttonId == "yes") {
allowChange = true; // to stop showing the message box again when tab is changed programmaticaly
tabPanel.setActiveTab(nextTab);
}
}
});
}
allowChange = false;
return bReturn; // always return false
}
}
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>
I tried to add edit button functionality in grid panel. I want to open an edit window on edit button click for updating grid row record using Ext Window Form which contains fields like (Shift Name, Time, Total, Requirement, Note). The window form is created, but the row values that I have selected in grid are not set in form fields.
I tried to use this code:
Ext.getCmp('shiftWindow').getForm().setValues(selection[0].data);
but it's giving the following error
Uncaught TypeError: Cannot call method 'getForm' of undefined
Here is my code:
var shiftWindow = Ext.create('Ext.window.Window', {
title: 'Edit Shift',
resizable: false,
id: 'shiftwindow',
width: 465, //bodyPadding: 5, modal: true, store: shiftStorePlanner,
items: {
xtype: 'form',
id: 'idFormShift',
bodyPadding: 10,
items: shiftViewModelPlannerData
},
buttons: [{
text: 'Save',
cls: 'planner-save-button',
overCls: 'planner-save-button-over',
handler: function () {
var wi = this.up('.window')
var form = Ext.getCmp('idFormShift');
if (form.isValid()) {
shiftTimemappingarray = [];
getShiftTime();
//this.up('.window').close();
}
}
}, {
text: 'Cancel',
handler: function () {
this.up('.window').close();
}
}]
});
var host1 = Ext.getCmp('plannershifteditor');
var selection = host1._shiftPlannerGrid.getSelectionModel().getSelection();
if (selection.length === 0) {
return;
}
selection[0].data.ShiftName = selection[0].data.ShiftName.replace('(ARCHIVED)', '').trim(); //if edit Archive record then text name show without (ARCHIVED)
//shiftWindow.getForm().setValues(selection[0].data);
Ext.getCmp('shiftWindow').getForm().setValues(selection[0].data);
//Ext.getCmp('shiftWindow').setValue(selection[0].data);
shiftWindow.show();
There's no getForm method in the window. You can get the form using shiftWindow.down('form'). Here's the snippet:
shiftWindow.down('form').form.setValues(selection[0].data)
I am making a GET request to get back some JSON containing an array of options. Within each element I have an id, style and a name.
Based on the response I would like to dynamically set the options of my ActionSheet in my Ionic 2 app.
This ActionSheet works fine. My challenge is setting the options dynamically based on the API response.
let actionSheet = this.actionSheetCtrl.create({
title: 'Change the tag of this visitor',
buttons: [
{
text: 'Destructive red',
cssClass: 'label-red',
handler: () => {
myFunction(1);
}
},
{
text: 'Archive blue',
cssClass: 'label-dark-blue',
handler: () => {
myFunction(2);
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
I would like the keep the cancel option but show my own options above -- i.e. remove the destructive and archive options.
In PHP I would achieve this with this pseudo code ..
$options = array();
$options['title'] = 'Change the tag of this visitor';
$buttons = array();
foreach($api_response as $a) {
array_push($buttons, array('text' => $a['name'], 'cssClass' => $a['style']) );
}
$options['buttons'] = $buttons;
let actionSheet = this.actionSheetCtrl.create(json_encode($options));
And then my final question is how I can specify the appropriate value of id from the elements that I am looping through as the parameter for the myFunction() call ... e.g set the value of XX to be 1 when id=1, 20 when id=20, etc
e.g.
text: 'Name goes here',
cssClass: 'label-red',
handler: () => {
myFunction(XX);
}
I seem to have found a better way to solve this problem. I am using the addButton method ..
let actionSheet = this.actionSheetCtrl.create({
title: 'Change the tag of this visitor'
});
this.http.get('http://api.domain.com/tags', {headers:headers}).map(res => res.json()).subscribe(data => {
for (var i = 0; i < data.res.length; i++) {
actionSheet.addButton({text: data.res[i].name, cssClass: data.res[i].style });
}
});
actionSheet.addButton({text: 'Cancel', 'role': 'cancel' });
actionSheet.present();
i tried to insert data using ext4yii form. But the save function in not working. plz look through my code
code of formpanel
<ext:Window ClassName="WelcomeWindow" width="500" iconCls="IconApplication"
bodyPadding="25" bodyStyle="background-color:#fff" layout="fit"
title="<?php echo Yii::app()->name;?>" closable="false"
maximizable="false">
<prop:Items>
<ext:FormPanel itemId="form1" width="300" title="myform" autoScroll="true">
<prop:Form>
<ext:CRUDForm controller="ContactForm" />
</prop:Form>
<prop:DockedItems>
<?php
include 'ContactView_Editor_Toolbar.php';
?>
</prop:DockedItems>
<prop:Items>
<ext:TextField name="Name" fieldLabel="Name"/>
<ext:TextField name="address" fieldLabel="Address"/>
</prop:Items>
<prop:InstanceBody>
<script>
(function(){
return {
StartSaveContact:function()
{
var me = this;
me.mode='new_contact';
var msg = me.mode == 'new_contact' ? 'New contact created successfully.' : 'Contact saved successfully.';
var form = me.getForm();
if(form.isValid()) {
var lm = Ext4Yii.newLoadMask(me,'Please wait...',true);
form.submit({
params:{
mode:me.mode
},
success:function(form,response) {
lm.hide();
Ext.MessageBox.show({
title: me.title,
msg: msg,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO,
fn:function() {
}
});
},
failure:function(form,response) {
lm.hide();
Ext.MessageBox.show({
title: me.title,
msg: response.result.message,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR,
fn:function() {
}
});
}
});
}
}
}
})()
</script>
</prop:InstanceBody>
</ext:FormPanel>
</prop:Items>
</ext:Window>
code of contactformcontroller
class ContactFormController extends ExtFormController
{
public function load($request) {
}
public function save($data)
{
$customer = new Employee();
/**
* We can use the setAttributes method on the Customer model
* since the form names have the same name as the attributes.
*/
$customer->setAttributes($data);
if( $customer->save())
$this->exportData($customer);
else
$this->exportException("Don't know what to do..");
}
}
the failure function is trigering without showing any message.
Thanks for advance
If you look with firebug , then what kind of error do you get?
I have put a confirm box on the logout option of my application. Code for the same is as follows:
var abc = Ext.Msg.confirm('Confirm logout', 'Are you sure you want to logout?', function(e)
{
if(e == 'yes')
{
// logout code
}
}
);
No button of the confirm box is visible before the yes button.
How can I display Yes button before the No Button?
Any help is appreciated.
According to the sencha touch source code ( http://docs.sencha.com/touch/1-1/source/MessageBox.html#Ext-MessageBox-method-confirm )
YESNO is defined as "no, yes":
(function(){
var B = Ext.MessageBox;
Ext.apply(B, {
OK : {text : 'OK', itemId : 'ok', ui : 'action' },
CANCEL : {text : 'Cancel', itemId : 'cancel'},
YES : {text : 'Yes', itemId : 'yes', ui : 'action' },
NO : {text : 'No', itemId : 'no'},
// Add additional(localized) button configs here
// ICON CSS Constants
INFO : 'x-msgbox-info',
WARNING : 'x-msgbox-warning',
QUESTION : 'x-msgbox-question',
ERROR : 'x-msgbox-error'
});
Ext.apply(B, {
OKCANCEL : [B.CANCEL, B.OK],
YESNOCANCEL : [B.CANCEL, B.NO, B.YES],
YESNO : [B.NO, B.YES]
// Add additional button collections here
});
})();
You can use Ext.override to override this functionality in your own app:
Ext.override(Ext.MessageBox, {
YESNO: [Ext.MessageBox.YES, Ext.MessageBox.NO]
});
You can override like the below code in ST2.1, Can also implement localization in YES/NO buttons using this.
Ext.MessageBox.override({
confirm: function(title, message, fn, scope) {
return this.show({
title : title || null,
message : message || null,
buttons : [
{text: 'Yes', itemId: 'yes', ui: 'action'},
{text: 'No', itemId: 'no'}
],
promptConfig: false,
scope : scope,
fn: function() {
if (fn) {
fn.apply(scope, arguments);
}
}
});
}
});
It is Very easy Try this
Ext.Msg.confirm("Logout", "Are you Sure u want to LogOut?", function(btn){
if (btn == 'yes'){
Ext.Viewport.setActiveItem({xtype:"Home"}); // which page wants to redirect
}
});
I tried this, and works for me:
Try this solution:
<script type="text/javascript">
(function () {
Ext.override(Ext.MessageBox, {
buttonText: { yes: "Sí", no: "No", cancel: "Cancelar" }
});
})();
</script>
Ext.Msg.show({
title: '提示',
message: '是否继续?',
width: 300,
buttons: [
{text: '是', itemId: 'yes', ui: 'action'},
{text: '否', itemId: 'no'}
],
fn: function (buttonId) {
alert('You pressed the "' + buttonId + '" button.');
}
});