ExtJS 4 - get button when store.load [closed] - extjs4

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
can you halp me to do something like this
{
xtype : 'button',
text : 'Prikazi',
handler : function(item,el){
this.setDisabled(true);
store.load(function(records, operation, success) {
if(success){ this.up('button').setDisabled(false); }
});
}
}
problem: this.up('button')

Just use the parameters that you're passing -
because 'this' refers first to the button and in the callback it refers to the store:
{
xtype: 'button',
text: 'Refresh',
id: 'btn_refresh',
handler: function(clicked_button, the_event) {
clicked_button.setDisabled(true);
store.load(function(records, operation, success) {
if(success){
clicked_button.setDisabled(false);
}
});
}
}
Might be more elegant to use the store's beforeload event to control the button-state.
Update: changed variable names to make the example even more obvious.
Maybe checkout FireBug or Chrome Developer Tools once
... and please accept the answer in case it should have been helpful.

Related

ESLint in Vue : Missing space before function parentheses [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I created a project with npm and vuejs/vue-cli.
I have eslint entries in my package.json file.
I got a warning when running my code :
WARNING Compiled with 1 warnings
5:57:37 AM
✘ http://eslint.org/docs/rules/space-before-function-paren Missing
space before function parentheses src/components/HomePage.vue:142:9
show() {
^
✘ 1 problem (1 error, 0 warnings)
what should i do with the space in this line?
export default {
el: '#skills',
props: {
skill: Object,
selectedId: Number
},
computed: {
show() { //in this line
return this.skill.id === this.selectedId
}
},
...
}
You may either add the space before the paren or (preferred option) update your .eslintrc.js file to represent your style preferences.
I recommend you add this rule in .eslintrc.js:
rules: {
'space-before-function-paren': ['error', {
anonymous: 'always',
named: 'never',
asyncArrow: 'always'
}]
}
The Docs:
https://eslint.org/docs/rules/space-before-function-paren#require-or-disallow-a-space-before-function-parenthesis-space-before-function-paren
As the error states, you're missing a space after your function name and before your parenthesis:
Missing space before function parentheses
There is an ESLint rule in your code that states your function must be formatted like so:
myFunction () { ... }
You have your function formatted like so:
myFunction() { ... }
If you add a space between show and () it should resolve the issue. Here's the correct snippet:
export default {
el: '#skills',
props: {
skill: Object,
selectedId: Number
},
computed: {
show () { //in this line
return this.skill.id === this.selectedId
}
},
...
}
Try setting vetur.format.defaultFormatter.js to prettier-eslint.
If you're using TypeScript, you may need to set vetur.format.defaultFormatter.ts to prettier-tslint instead.
If we are using anonymous function then it is showing error. To solve this use arrow function.

How would you render this simple UI using React js?

I am new to React and I want to render the UI shown in the picture.
Description:
The UI consists of two main components the sidenav and the display container. The side nav shows the title and the number of questions/answers pairs in for that given tab. When the user clicks on a tab of the side nav, the display container outputs the selected tab as a title with the questions/answers pairs, see api.
EX: the user clicks tab2 on the side nav, the display container will show
Tab2
Question C
Answer to Question C
Question D
Answer to Question D
Question E
Answer to Question E
And the side nav tab 2 will display 3, since there are 3 question/answer pairs.
[IMG]http://imgur.com/fR4DVoP[/IMG]
http://imgur.com/fR4DVoP
The data will be fetched from an api in the json format
[ { 'Tab1' : [
{
'question':'QuestionA',
'answer':'Answer to Question A'
},
{
'question':'QuestionB',
'answer':'Answer to Question B'
}
],
'Tab2' : [
{
'question':'QuestionC',
'answer':'Answer to Question C'
},
{
'question':'QuestionD',
'answer':'Answer to Question D'
},
{
'question': 'QuestionE',
'answer': 'Answer to Question E'
}
]
//... tab3, tab4, an so on...
}
Had you read reac-router tutorial ? if not here's the link.
Please read it careful, after that, you will have a good understanding how to acomplish your requirement using react router Links in the easy way.
Or checkout this repo Starter Kit as starting point

Protractor e2e testing suggestions about code complexity [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 6 years ago.
Improve this question
I know my question will get marked as to broad but I didn't think of another place to ask it.I work in QA and month ago i started learning protractor by myself so i can test our projects with protractor there was no one to guide me i learned all by myself and google so I wanted you guys to check the code i made and give me some suggestions. Does it look like it should,because i think its worthless it gets the job done but i feel it is still beginner level, and there is none to guide me so i know the level i am at the moment any suggestions are welcome.My config file pretty basic.
exports.config = {
framework: 'jasmine2',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['page.js'],
onPrepare: function() {
var jasmineReporters = require('jasmine-reporters');
}
}
My specification file:
/*
##############################################
FUNCTIONS in helper_functons:
getsite();
logIn();
mainPageItem(); | 0 - Recipes | 1 - Collections | 2 - Profiles |
openRecipe(index);
createRecipe (name,description,step,numStep,ingName,numIngr,addToCollections,share);
deleteRecipe(recipeName); //must use getMainPageAndRefresh()
openRecipe(index);
browseRecipe();
openCollection(index);
createCollection(name,description);
openUser(index);
getNotifications();
goToProfile();
browseProfile();
getMainPageAndRefresh();
goToTimeline();
openLegal(index);
useSearch(textString);
createPost(postName);
logOut();
##############################################
*/
var functions = require('./helper_functions.js');
var uName = 'asd';
var pass = 'asd';
describe('Hooray',function(){
it('Gets site',function(){
functions.getSite();
});
it('Logs in ',function(){
functions.logIn(uName,pass);
});
it('Recipe options',function(){
browser.sleep(9000);
});
it('Logs out',function(){
functions.getMainPageAndRefresh();
functions.logOut();
});
});
And I am using another file where i created helper functions so my tests look more readable this is where the main code is http://pastebin.com/KgXCh74m I uploaded on pastebin because it is 500 lines. My idea was to call a function whenever you need it and test it in the page.js file.
By looking at your code, it seems you have put all your elements in a function and accessing them in your specs. In general this way of accessing elements would lead to some Flaky tests and you would not be able to run test scripts confidently and error free.
Protractor's community widely encourages the usage of Page Objects. Protractor has some good documentation,they have specifically mentioned style guide http://www.protractortest.org/#/style-guide to get started.
Some of the tips from my experience while writing protractor tests:
Avoid browser.sleep for page loads , instead use browser.manage().timeouts().pageLoadTimeout(10000);
Use Expected Conditions for interacting with web elements elementToBeClickable, elementToBeSelected etc.
Use Page Objects efficiently. Avoid accessing/performing actions on elements in page objects. It has to be done inside the specs i.e.
your page.js should look like this -
var somePage = function() {
this.username = element(by.id('someId')); //Here we are only defining the elements
this.password = element(by.id('someId'));
this.button = element(by.css('someCss'));
this.login = function(uid,pwd) { // If we are using functions in page objects, we would just access the defined elements above rather than defining them in the function (reusability & decoupling).
this.username.sendKeys(uid);
this.password.sendKeys(pwd);
this.button.click();
};
};
In the above page object if the username or password element changes you only have to change them, no need to touch the login function.
your spec.js should look like this -
var SomePage = require('path to your page.js');
describe('page', function() {
var page = new SomePage();
it('should test page', function() {
page.username.sendKeys('username'); // Here we are performing the action on the elements.
page.password.sendKeys('password');
page.login(username,password);
});
});
Maintaining test data in a separate JSON file.
Set browser.ignoreSynchronization = true while dealing with non-angular pages
Use CssSelectors as much as you can to identify elements.
Since Protractor is community driven --> Follow protractor on GitHub, StackOverflow & Gitter.
You would get all the updates/issues from these platforms so that you can solve your issues or ask for help, these awesome folks would help you!

adding jquery validation to kendo ui elements

I've looked at many posts on this and have it working to the extent that it does validate my fields when I add the following.
$.validator.setDefaults({
ignore: []
});
The part I'm still missing is adding the input-validation-error class to notify the user. It is working fine for my other input elements (non-kendo). I've tried adding the class manually in $.validator.setDefaults as well but nothing seems to be working.
Is there an example out there somewhere or has anyone gotten it to work?
I'm not certain I'm doing this right but here's what I've tried to add it manually.
$.validator.setDefaults({
ignore: [],
errorClass: "input-validation-error",
errorElement: "input",
highlight: function (element, errorClass) {
$(element).addClass(errorClass)
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass)
}
});
I found a solution to this based on this post. Basically what you need to do is look for the parent element that the input is wrapped in. Something like this:
$.validator.setDefaults({
ignore: [],
highlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().addClass('input-validation-error');
} else {
element.addClass('input-validation-error')
}
},
unhighlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().removeClass('input-validation-error');
} else {
element.removeClass('input-validation-error')
}
}
});
I would advise anyone though to visit the post I've linked to above before taking off down this particular rabbit hole as it introduces another issue, just to be aware of what you're getting into. The excepted answer is really more relevant to this question than the one being asked there.

How to fire events in MVC [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I want to execute button click event in MVC4. I am new for MVC4 and don't know where to write event, function and how to handle them b/w Model,View and Control.
is there any one have idea about same?
I will be grateful, if some one help me with detail explanation and example.
Thanks in advance.
MVC 4 is essentially stateless, so unlike Web Forms, there's no "automatic" way to wire a button click on the browser UI to your C# code.
The way it's handled generally is that when you click on a button (e.g. <button> maybe?), it fires off an HTTP request either via AJAX or standard browser redirect. That HTTP request gets handled by an action on your controller.
So say you've got this controller:
public class MyController : Controller {
public string Foo() {
return "Bar!";
}
}
You can wire up your markup and jQuery like so in Razor:
<button id="my-button">Call Foo!</button>
<script>
jQuery(function ($) {
$('#my-button').on('click', function () {
$.ajax({
url : '#Url.Action("Foo", "MyController")',
type : 'GET'
});
});
});
</script>
That's basically it in a very quick gist.
I would start with the basics. You don't need jquery... Have a read of http://weblogs.asp.net/scottgu/archive/2007/12/09/asp-net-mvc-framework-part-4-handling-form-edit-and-post-scenarios.aspx to understand how asp.net MVC works.
Define two methods inside your controller with the same name. The method defined with HttpVerbs.Post will be the method called when you click the button (a POST request).
Put a form around your button pointing to your method and when you click the button it will run the method named with the HttpVerbs.Post.
View
<form action="Home/MyMethod" method="post">
<input type="text" id="username" />
<button text="Click me" />
</form>
Controller
public class HomeController : Controller
{
public ActionResult MyMethod()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult MyMethod(string username)
{
// notice the string username matches the <input id="username"...
// alternatively you can pass a FormCollection to this method.
return View();
}
}