I have a Ext JS Window with a spring form of user details. Additionally, I have an user validator in my controller, so that, if the form has errors i can see what errors are:
UserValidator userValidator = new UserValidator();
userValidator.validate(user, result);
if(result.hasErrors()){
return "RegisterUserForm";
My problem is relative to have this form inside a ExtJS window. If i return "RegisterUserForm" the browser goes to this form and show the errors but not in the window. It shows the form and errors in a new page and the url changes to /RegisterUserForm. (This is obvious) How can i show the same form with errors without having this problem?
Thank you
There are 2 options:
Change your server code to make that an AJAX call that returns only the data to be handled by your ExtJS code, rather than a form page
Make your Ext.window.Window use an iFrame with the /RegisterUserForm url:
ex:
Ext.create('Ext.window.Window', {
layout: 'fit',
//other config here
items: [{
xtype: 'component',
autoEl: {
itemId: 'iframe',
tag: 'iframe',
src: '/RegisterUserForm',
frameBorder: 0
}
}]
}).show()
Related
I have an extjs iframe created as below which gets rendered onto a page when called using its xtype. The URL I use in the src parameter redirects to a login page. Is it possible to pass the username and pwd along with the URL in someway so the content from that URL gets embedded directly without having to see the login screen first? If so, how can this be achieved?
Ext.define('myComp', {
extend:'Ext.container.Container',
xtype: 'iframe'
itemId:'iframe204'
requires: [
'Ext.ux.IFrame',
],
layout:'fit',
height:'100%',
initComponent:
function() {
this.items = [];
this.items.push({
xtype:'uxiframe',
itemId:'myframe',
height:'100%',
src: someURL
});
this.callParent(arguments);
},
});
I have a client React app I'm instrumenting in appinsights, and I'm using both the React plugin and the new ClickAnalytics plugin. Everything works, telemetry is flowing, however I'm having trouble getting the data-*-id custom event feature working properly.
The docs say:
The id provided in the data-*-id will be used as the customEvent name. For example, if the clicked HTML element has the attribute "data-sample-id"="button1", then "button1" will be the customEvent name.
I instrument an element as follows (using Semantic UI React):
<Button
data-custom-id="AddDealButton"
as={Link}
color="blue"
icon
labelPosition="right"
size="huge"
>
Clicking that button causes the custom event to record but the name, "AddDealButton", doesn't flow through. I always get not_specified as the event name:
Reading the docs, there is this warning regarding the plugin configuration:
If useDefaultContentNameOrId is false, then the customEvent name will be "not_specified".
So I am initializing the plugin this way:
...
extensions: [reactPlugin, clickPlugin],
extensionConfig: {
[reactPlugin.identifier]: { history: browserHistory },
[clickPlugin.identifier]: { autoCapture: true, useDefaultContentNameOrId: true }
}
...yet the name does not pass. Am I misconfiguring? Any idea what I'm doing wrong?
It turns out the problem was in the initialization configuration I showed above. It should be set up as follows:
...
extensions: [reactPlugin, clickPlugin],
extensionConfig: {
[reactPlugin.identifier]: { history: browserHistory },
[clickPlugin.identifier]: { autoCapture: true, dataTags: { useDefaultContentNameOrId: true } }
}
The resulting event name is not being pulled from my data-custom-id but rather pulled from the content of the Icon element of the Button component, so the event name becomes "Create new deal", but I can figure that out.
Microsoft's docs show a different samples for the npm install method vs the "snippet" method, and so I missed the dataTags sample.
I have the following template:
<template name="modalTest">
{{session "modalTestNumber"}} <button id="modalTestIncrement">Increment</button>
</template>
That session helper simply is a go-between with the Session object. I have that modalTestNumber initialized to 0.
I want this template to be rendered, with all of it's reactivity, into a bootbox modal dialog. I have the following event handler declared for this template:
Template.modalTest.events({
'click #modalTestIncrement': function(e, t) {
console.log('click');
Session.set('modalTestNumber', Session.get('modalTestNumber') + 1);
}
});
Here are all of the things I have tried, and what they result in:
bootbox.dialog({
message: Template.modalTest()
});
This renders the template, which appears more or less like 0 Increment (in a button). However, when I change the Session variable from the console, it doesn't change, and the event handler isn't called when I click the button (the console.log doesn't even happen).
message: Meteor.render(Template.modalTest())
message: Meteor.render(function() { return Template.modalTest(); })
These both do exactly the same thing as the Template call by itself.
message: new Handlebars.SafeString(Template.modalTest())
This just renders the modal body as empty. The modal still pops up though.
message: Meteor.render(new Handlebars.SafeString(Template.modalTest()))
Exactly the same as the Template and pure Meteor.render calls; the template is there, but it has no reactivity or event response.
Is it maybe that I'm using this less packaging of bootstrap rather than a standard package?
How can I get this to render in appropriately reactive Meteor style?
Hacking into Bootbox?
I just tried hacked into the bootbox.js file itself to see if I could take over. I changed things so that at the bootbox.dialog({}) layer I would simply pass the name of the Template I wanted rendered:
// in bootbox.js::exports.dialog
console.log(options.message); // I'm passing the template name now, so this yields 'modalTest'
body.find(".bootbox-body").html(Meteor.render(Template[options.message]));
body.find(".bootbox-body").html(Meteor.render(function() { return Template[options.message](); }));
These two different versions (don't worry they're two different attempts, not at the same time) these both render the template non-reactively, just like they did before.
Will hacking into bootbox make any difference?
Thanks in advance!
I am giving an answer working with the current 0.9.3.1 version of Meteor.
If you want to render a template and keep reactivity, you have to :
Render template in a parent node
Have the parent already in the DOM
So this very short function is the answer to do that :
renderTmp = function (template, data) {
var node = document.createElement("div");
document.body.appendChild(node);
UI.renderWithData(template, data, node);
return node;
};
In your case, you would do :
bootbox.dialog({
message: renderTmp(Template.modalTest)
});
Answer for Meteor 1.0+:
Use Blaze.render or Blaze.renderWithData to render the template into the bootbox dialog after the bootbox dialog has been created.
function openMyDialog(fs){ // this can be tied to an event handler in another template
<! do some stuff here, like setting the data context !>
bootbox.dialog({
title: 'This will populate with content from the "myDialog" template',
message: "<div id='dialogNode'></div>",
buttons: {
do: {
label: "ok",
className: "btn btn-primary",
callback: function() {
<! take some actions !>
}
}
}
});
Blaze.render(Template.myDialog,$("#dialogNode")[0]);
};
This assumes you have a template defined:
<template name="myDialog">
Content for my dialog box
</template>
Template.myDialog is created for every template you're using.
$("#dialogNode")[0] selects the DOM node you setup in
message: "<div id='dialogNode'></div>"
Alternatively you can leave message blank and use $(".bootbox-body") to select the parent node.
As you can imagine, this also allows you to change the message section of a bootbox dialog dynamically.
Using the latest version of Meteor, here is a simple way to render a doc into a bootbox
let box = bootbox.dialog({title:'',message:''});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,MyCollection.findOne({_id}),box.find(".modal-body")[0]);
If you want the dialog to be reactive use
let box = bootbox.dialog({title:'',message:''});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,function() {return MyCollection.findOne({_id})},box.find(".modal-body")[0]);
In order to render Meteor templates programmatically while retaining their reactivity you'll want to use Meteor.render(). They address this issue in their docs under templates.
So for your handlers, etc. to work you'd use:
bootbox.dialog({
message: Meteor.render(function() { return Template.modalTest(); })
});
This was a major gotcha for me too!
I see that you were really close with the Meteor.render()'s. Let me know if it still doesn't work.
This works for Meteor 1.1.0.2
Assuming we have a template called changePassword that has two fields named oldPassword and newPassword, here's some code to pop up a dialog box using the template and then get the results.
bootbox.dialog({
title: 'Change Password',
message: '<span/>', // Message can't be empty, but we're going to replace the contents
buttons: {
success: {
label: 'Change',
className: 'btn-primary',
callback: function(event) {
var oldPassword = this.find('input[name=oldPassword]').val();
var newPassword = this.find('input[name=newPassword]').val();
console.log("Change password from " + oldPassword + " to " + newPassword);
return false; // Close the dialog
}
},
'Cancel': {
className: 'btn-default'
}
}
});
// .bootbox-body is the parent of the span, so we can replace the contents
// with our template
// Using UI.renderWithData means we can pass data in to the template too.
UI.insert(UI.renderWithData(Template.changePassword, {
name: "Harry"
}), $('.bootbox-body')[0]);
I have a login screen which has an ExtJs form panel with two button Login and Reset.
Now, I'm trying to add another button below the lofin panel for a new user sign up.
But the button goes out to the bottom of the screen and a scroll bar appears making the page look ugly!
I have these in my login.jsp file:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my app.js file:
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
labelWidth:100,
frame:true,
title:'Member Login',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],
buttons: [{
text: 'New User Register',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: false,
url: 'registration.jsp'
})
}
},{
text: 'Login',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: true,
url: 'index.jsp'
})
}
},{
text: 'Reset',
scale: 'medium',
handler: function(){
login.getForm().reset();
}
}]
});
// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:'fit',
width:325,
height:175,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});
I tried adding a new button using the Ext.Createat the end of the above one but it wouldn't work.
I tried having the code in a separate js file and adding the script tag with src to the button file along with the panel file in a separate script tag and even that failed.
Can anybody help me out to create a separate button and my desired position?
Any kind of help is appreciated. Thanks.
I've looked everywhere and I've tried everything I could, but I'm not able to come up with the answer.
NOTE: The code makes the question seem very long and big, but my main query and issue is at the top and bottom of the question.
Im assuming you dont want to add the new button INSIDE the login panel because otherwise you could just add another button to your buttons list anyway. To add a button under your login panel and YET inside the window, do the following steps;
Put your form panel as an item inside a container
Add your button as a second item in the container after your form pannel
Add the container to your window as you did the panel to the window
Voilah! You could also try giving your window and 'id' such as 'id=loginWindow' and then calling the code
Ext.getCmp('loginWindow').add(
{
xtype:button,
text:'Yay!'
}
);
If you need more code specific help, feel free to message me. I know your feel bro <3
hai all,
i want to display datas from json store without using list....
then in url i want increment the page number...
i have following code in jsonstore....
Ext.regModel('message',{fields:['Drugid','Drugname','Manufacturer','Price','Unit','Catid']});
var store=new Ext.data.Store({
model: 'message',
proxy: {
type: 'ajax',
url: 'http://174.36.149.186/Medical/api/drugapi.php?op=mdrug&page=1',---- here i give just page is one,i want increment the page number
reader: {
type: 'json',
root: 'result.message'
}
},
autoLoad: true
});
i'm also new to sencha but maybe you could define an item template and add the template to a view just as you would eg. a textbox. the item template is declared just like an object and then passed to the view as the value of the itemtpl config attribute.
http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/