So I have a hidden container item:
id: 'category_search', hidden: true, ...
And another hidden panel:
{ xtype: 'panel', id: 'mylist', hidden: true ...
Here i have a controller to show category search ONLY when mylist is Not hidden - handled by the click of a button categorized_search:
catSearch: function() {
var grid = Ext.getCmp('mylist');
if(grid.isHidden){ //checking to see if the component is hidden
console.log('Please enter a search');
}
else
{
Ext.getCmp('category_search').show(); //Shows category search
}
}
When I click my categorized_search button, it does not display when mylist is showing, and will display when mylist is not showing. How can I fix this?
Cheers!
AbstractComponent.isHidden() and AbstractComponent.isVisible() are functions, not properties. Add parentheses to your if statement.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-method-isHidden
Related
I have a webpage which have buttons on it. I add the buttons with the code block below. How can I add opening links at new tab features to those buttons. Code is like that
var appList = [{
name: "<small>Clever.com</small>",
grades: "K-12",
url: "https://clever.com",
thumbnail: "clever.png"
},
{
name: "Learning.com",
grades: "K-12",
url: "http://login.learning.com/",
thumbnail: "learning.png"
}
];
If your code is generating pure HTML use target attribute for the <a/> tag.
Example:
Open in new tab
I have an ng-table which is a child component of my main page. When a row is clicked, it sends the information in that row via onCellClick using an EventEmitter. I'm trying to send this information to another child component. This happens to be a button which is the child of a Bootstrap 4 modal which pops up when a button on the main page is clicked. Just having trouble with the receiving and manipulation of that information.
HTML of child component table:
<ng-table [config]="config"
(tableChanged)="onChangeTable(config)"
(cellClicked)="onCellClick($event)"
[rows]="rows" [columns]="columns">
</ng-table>
HTML for the child component (this appears in the main page's HTML):
<app-datatable (row)="received($event)"></app-datatable>
Typescript for getting and sending the row's data (this.row is the EvenEmitter. data.row is the actual row that's clicked on):
#Output() row: EventEmitter<any> = new EventEmitter<any>();
public onCellClick(data: any): any {
let d = data.row.tDataPoint;
let i = data.row.tICCP;
let s = data.row.tStartDate;
let e = data.row.tEndDate;
let toSend:DataTable = new DataTable(d, i, s, e);
this.row.emit(toSend);
}
HTML for the button that is the child component of the Bootstrap 4 modal:
<button type="submit" class="btn" data-dismiss="modal" (click)="onClick($event)">Delete</button>
Typescript for the button child component:
selector: 'deletebutton'
#Input() receivedRow:DataTable;
onClick(message:DataTable){
this.sender.emit('This is from On Click Deletebutton');
console.log("On Click Deletebutton");
console.log(this.receivedRow);
for (let entry in DPS){
if (DPS[entry].tDataPoint===message.tDataPoint){
DPS.splice(parseInt(entry),1);
}
}
}
HTML of the button child component (this appears in the modal's HTML). This is what should actually be receiving the data from the clicked row as input.
<deletebutton [receivedRow]='row'></deletebutton>
Right now in my onClick method is saying receivedRow is undefined. I feel like what is missing is the coordination between [receivedRow]='row' where I have my deletebutton HTML and the onClick function call in the HTML for that child component. Overall, I just want to click a row, click the button to open the delete Boostrap Modal, and have the correct row be deleted I click the Delete button inside the modal. Let me know if something's not clear or more code is needed.
Is there actually a way to communicate between child components like this using #Input and #Output?
With angular2, your data flow should be :
- down to pass data
- up to send events
So if you really want to go this way, you should have something like that :
I think there's a better way tho :
For your app AND for your user, it'd be best to have a remove button on each line. This way, it avoid the user to be confused clicking on a row and then click on a remove button and within your code you'll be able to do something like that :
src/app.html :
<table class="table">
<tr *ngFor="let row of tableData">
<td *ngFor="let column of row.columns">
{{ column.name }}
</td>
<td (click)="deleteRow(row)"><button>X</button></td>
</tr>
</table>
<button (click)="addRow()">Add a row</button>
src/app.ts (troncated here to the class only) :
#Component({
selector: 'app',
templateUrl: `./src/app.html`,
})
export class App {
private tableData;
private cptRow = 1;
constructor() {
this.tableData = [
{
idRow: `idR${this.cptRow++}`,
columns: [
{idColumn: 'idR1C1', name: 'Column 1-1'},
{idColumn: 'idR1C2', name: 'Column 1-2'},
{idColumn: 'idR1C3', name: 'Column 1-3'}
]
},
{
idRow: `idR${this.cptRow++}`,
columns: [
{idColumn: 'idR2C1', name: 'Column 2-1'},
{idColumn: 'idR2C2', name: 'Column 2-2'},
{idColumn: 'idR2C3', name: 'Column 2-3'}
]
},
{
idRow: `idR${this.cptRow++}`,
columns: [
{idColumn: 'idR3C1', name: 'Column 3-1'},
{idColumn: 'idR3C2', name: 'Column 3-2'},
{idColumn: 'idR3C3', name: 'Column 3-3'}
]
}
];
}
deleteRow(row) {
// we can do this by reference ...
// this.tableData = this.tableData.filter(r => r !== row);
// or by ID
this.tableData = this.tableData.filter(r => r.idRow !== row.idRow);
}
addRow() {
this.tableData.push({
idRow: `idR${this.cptRow}`,
columns: [
{idColumn: `idR${this.cptRow}C1`, name: `Column ${this.cptRow}-1`},
{idColumn: `idR${this.cptRow}C2`, name: `Column ${this.cptRow}-2`},
{idColumn: `idR${this.cptRow}C3`, name: `Column ${this.cptRow}-3`}
]
});
this.cptRow++;
}
}
Here's a working Plunkr : http://plnkr.co/edit/hNhcdraoDNnI2C92TQvr?p=preview
Now, if you really want to use input/output properties, you should look for tutorials because the structure here seems a bit confused. I can help you to understand that (and it's important to understand it with angular2 !) but maybe you should give me a shout on Gitter/Angular instead of detailing Angular2 flow here :)
Somewhat of a work around is to place the Delete button component in the HTML for the table component like this:
<ng-table [config]="config"
(tableChanged)="onChangeTable(config)"
(cellClicked)="onCellClick($event)"
[rows]="rows" [columns]="columns">
</ng-table>
<deletebutton [receivedRow]='toSend'></deletebutton>
And still leave the table's tag in the main page's HTML like I had it:
<app-datatable (row)="received($event)"></app-datatable>
And now the row's data is being sent to that Delete button since it is technically a part of the child component of the main page.
Still not able to communicate between child components like I asked in my question though. But this is something close that works.
I've got this code:
angular.module("myApp", []).controller("myController", function($scope) {
$scope.currentOption;
$scope.showWindow = false;
$scope.myOptions = [{
id: 1,
name: 'This opens the window'
}, {
id: 2,
name: 'Option 2'
}, {
id: 3,
name: 'Option 3'
}];
$scope.showOption = function() {
if ($scope.currentOption.id == 1) {
$scope.showWindow = true;
}
console.log($scope.currentOption);
}
$scope.closeWindow = function() {
$scope.showWindow = false;
}
});
.filterWindow {
width: 100px;
height: 100px;
background-color: rgba(50, 50, 50, 0.5);
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<select ng-options="option as option.name for option in myOptions" ng-change="showOption()" ng-model="currentOption"></select>
<div ng-if="showWindow" class="filterWindow">
<button ng-click="closeWindow()">Close</button>
</div>
</div>
I've got a dropdown with three options. When I click on an option, it calls me a function with ng-change. The function is just called, when I click on another option in the dropdown list because of the ng-change. I would like to call the function every time I click on an option, also on the same twice in a row. So for example: When I click on 'Option 1', it should call the function (this works). When I click again on the same option (in this case 'Option 1'), so it should call the function again (this doesn't work, because the ng-change didn't detect a change in the dropdown). I tried it with ng-click, but then it calls the functions also when I open the dropdown, this is bad for me. The reason I need this is, in my web application one of my options opens a window, where I can filter a list. So when I filter it and than would like to change the filter critireas, it should open again this window by clicking on the same option which is selected in this moment. That's why the ng-click isn't a good solution, because this window would open also when I open the dropdown. I hope this is clear. Any ideas?
EDIT: So I builded now in the snippet example a window. When you click on the option which opens the window, it works when you do this the first time. Then you close the window, but don't change the option before... After you closed the window, the option which opens the window is still selected. When you click again on it, it don't open the window, becaus there was no change, so ng-change call for the function don't work... How to force this?
Thanks
You should change this function
$scope.showOption = function() { //Check whether drop down has any selected value
if($scope.currentOption) {
console.log($scope.currentOption);
}
}
Use ng-click instead ng-change
And remain the click event. It will not console when you open the drop down but event will trigger. Check this plunker
I am using jquery ui Dialog box. It works fine but I have a requirement that with one button I should be able to create a dialog box with each click.
So Eg: On first click a dialog box is opened. On second click, a new dialog must be created with the first one intact at it's place. I am implementing sticky notes using this.
How can this be achieved??
You can create Modal Dialog Dynamically
$("button").click(function () {
var dynamicDialog = $('<div id="MyDialog">cotent </div>');
dynamicDialog.dialog({
title: "Success Message",
modal: false,
buttons: [{
text: "Yes",
click: function () {}
}]
});
});
Demo
Note: since all come on same location just move and see the new dialog in the demo
Hi I've added a button to the toolbar of my KendoUI Grid, but I have a couple of issues, I'm hoping someone can assist with.
I've tried to add one of the kendo web icons next to the button but it doesn't render.
When I click the button in the toolbar I see the following error in the console:
Uncaught ReferenceError: sendEmail is not defined.
I don't understand why it isn't seeing my function. Just for testing purposes I'm displaying an alert until it sees it.
toolbar: [
{ name: "create", text: "Add" },
{ template: "<input type='button' class='k-button' value='Email Users' onclick='sendEmail()' />",
imageclass: "k-icon k-i-pencil" }
]
function sendEmail() {
debugger;
alert('Send Emails');
}
Can someone please help?
You can Use as below:
toolbar: [
{
name: "Add",
text: "Send Email",
click: function(e){alert('Send Emails'); return false;}
}
],
According to the documentation you would need to return the function that you want to occur on click. Like this:
template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
The documentation
I hope that helps.
this works for me:
you must define your grid in variable
initializing grid and add your button in toolbar option
toolbar: [{ name: "myButton", text: "this is your button text" }]
after initializing write this code to find button and add function:
grid.find(".k-grid-toolbar").on("click", ".k-grid-myButton", function (e) {
alert("it's work") ;});
Is your function sendEmail() initialized in document.ready or $(()=>{}); if not you will have to initialize it or else you could use this way
add a id for the button and write this in your document.ready (remove the onlcick from the button tag).
$("#examplebuttonid").click(()=>{
//write your code in here
});