I have button in a view as below:
initComponent: function() {
this.layout = {
type: 'vbox',
align: 'center',
pack: 'center'
};
this.items = [
Ext.create('Ext.Button', {
name:'loginButton',
action:'login',
text: 'Login',
scale : 'medium',
width: 100,
itemId:'loginButton',
handler: function() {
//any default action here
}
})
];
now in a controller I want to hide that button, I wrote
Ext.ComponentQuery.query('button[text=Login]').setVisible(false);
But it getting an error.
TypeError: Ext.ComponentQuery.query(...).setVisible is not a function
Please help me...
query returns an array, so you need to access the first index.
Related
Wants to open a mat-dialog on click of Detail Icon. But the issue is this is not referring to class. Its referring to the current grid.
constructor(private dialog: MatDialog) {}
ngOnInit() {
this.gridOptions = <GridOptions>{
rowSelection: 'multiple',
floatingFilter: true
};
this.gridOptions.columnDefs = [
{
headerName: 'Detail', field: '', filter: false, width: 80,
sortable: false,
onCellClicked: this.openModal,
cellRenderer: (data) => {
return `<mat-icon class="mat-icon material-icons" style="cursor:pointer;" aria-hidden="true">
keyboard_capslock</mat-icon>`;
}
},
{ headerName: 'Field Name', field: 'fieldName'}
];
openModal(row): void {
const detailRef = this.dialog.open(DetailComponent, {
height: '100vw',
width: '80vh',
direction: 'ltr',
data: {
record: row.data
}
});
Error: Unable to get property 'open' of undefined or null reference
Here this is referring to Grid and not to the class.
How can I refer to the class method to open the dialog?
Inline cellRenderer could be used only for simple cases.
If it's required to use functions inside or connect to third-party libraries, it has to be written as a custom cell renderer component.
i'm trying to port some highchart charts from a php web appplication to a Sencha Touche mobile app.
I want to put an empty chart in my View page and populate it dinamycally with some jsonp calls.
Here's my view code (not all the 130 lines...):
{
xtype : 'panel',
scrollable: true,
html : 'INSERIRE QUI I GRAFICI E LE TABELLE',
items : [
{
xtype : 'panel',
layout : 'fit',
html : 'AREA PER GRAFICO',
itemId : 'chartRenderPanel',
margin: '180px'
},
{ //sample code, to be replaced with a consinstent config...
xtype: 'highchart',
chartConfig: {
chart: {
type: 'spline'
},
title: {
text: 'A simple graph'
},
xAxis: {
plotLines: [{
color: '#FF0000',
width: 5,
value: 'mar'
}]
}
}
},
{
xtype : 'panel',
layout : 'fit',
html : 'AREA PER TABELLE',
itemId : 'tableRenderPanel',
margin: '180px'
}
]
}
The Highchart part is taken from this fiddle http://jsfiddle.net/marcme/DmsGx/
it works on the fiddle but not in my mobile app: debugging with chrome, i get stuck here in the Highcharts.js:
update : function(delay) {
var cdelay = delay || this.updateDelay;
if(!this.updateTask) {
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
}
this.updateTask.delay(cdelay);
},
With "Uncaught TypeError: undefined is not a function " message in the console.
Please, help! : )
Lorenzo
You have to call DelayedTask differently in sencha touch than you do in Extjs. Change this
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
to this
if (Ext.util.DelayedTask)
this.updateTask = new Ext.util.DelayedTask(this.draw, this);
else
this.updateTask = Ext.create('Ext.util.DelayedTask', this.draw, this);
I am using Jqgrid in my application. I wanted to create a column with 2 buttons. I want to have in column since the buttons may differ based on the data of the row. I googled it and I am able to found only creating a button using custom formatter option, but it appears only on double clicking a row or on edit of a row, but I want it to be displayed on column itself. Any help or link containing information will be appreciated. Below is my grid code.
Need to create an another column with buttons.
Edit:
var grid = $(gridId);
grid.jqGrid({
data: gridData,
datatype: "local",
gridview: true,
colModel: [
{
label: 'Employee Name', name: 'employeeName', width: 195, editable:true,
sortable:true, editrules:{required:true}
},
{
label: 'Address', name: 'address', width: 170, editable:true,
sortable:true,
editrules:{required:true}
},
{
label: 'Department', name: 'department', width: 120, editable:true,
sortable:true,
edittype:'custom',
editoptions: {
'custom_element' : populateReturnTypeAutocomplete,
'custom_value' : autocomplete_value
},
editrules:{required:true}
},
});
Okay add this to your colModal
{label: 'My Custom Column', name: 'custom', index:'custom' width: 120}
Now in gridComplete or loadComplete add this code
var grid = $("#grid"),
iCol = getColumnIndexByName(grid,'custom'); // 'custom' - name of the actions column
grid.children("tbody")
.children("tr.jqgrow")
.children("td:nth-child("+(iCol+1)+")")
.each(function() {
$("<div>",
{
title: "button1",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click:
handle your click function here
}
).css({"margin-left": "5px", float:"left"})
.addClass("ui-pg-div ui-inline-save")
.attr('id',"customId")
.append('<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>')
.appendTo($(this).children("div"));
$("<div>",
{
title: "custombutton 2",
mouseover: function() {
$(this).addClass('ui-state-hover');
},
mouseout: function() {
$(this).removeClass('ui-state-hover');
},
click:
handle click here
}
).css({"margin-left": "5px", float:"left"})
.addClass("ui-pg-div ui-inline-custom")
.attr('id',"customButton2")
.append('<span class="ui-button-icon-primary ui-icon ui-icon-circle-check"></span>')
.appendTo($(this).children("div"));
Now these icons I'm adding here will be available with jquery ui.css and you will have to add one more function to your script which will get 'custom' column index for u in line first of above code.
var getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;
for (; i<l; i+=1) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
I hope this helps.
I want to use a jQuery zClip plugin in jQuery UI dialog button, but I don't know how to adapt in this case. Anyone can help me?
Thank you in advance!
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () {
// use zClip to copy $('#dialog-modal').text() here
}
}
});
},
error: function (msg) {
alert(msg);
}
});
I would ignore the normal way dialog buttons handle actions, and separately use the way zClip handles actions. Something like this:
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () { return true; }
}
});
$('#dialog-modal ui-button:contains(Copy)').zclip({
path:'../whatever/ZeroClipboard.swf',
copy:$('#dialog-modal').text()
});
},
error: function (msg) {
alert(msg);
}
});
Assuming you are using jQuery 1.8+, you can specifiy your buttons in a different way to add IDs to them:
$("#mydialog").dialog({
...
buttons : [{
text: "Close",
click: function() {
$(this).dialog("close");
}
},{
text: "Copy to clipboard",
id: "copyButton", // here is your ID
click : function() {
alert("Sorry, copy not supported in your browser, please copy manually.");
}
}]
...
});
//after .dialog("open");
$("#copyButton").zclip({
...
clickAfter: false // dont propagate click: will suppress unsupported warning
...
});
The only issue I have is that it seem you can only mount zclip on visible buttons, so I do the zclip() call inside the handler for the button that opens the dialog
I am trying to add an option to a profile page for twitter widget and I have a field where users can add their twitter accounts and below it shows a preview of the widget. It works fine if I enter an account and click save and come back. But what I am trying to do is make it dynamic, to refresh the widget with corresponding account when blur event occurs on the text-field.
I have the following code:
var twitterWidget = new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#cccccc',
color: '#333333'
},
tweets: {
background: '#ffffff',
color: '#333333',
links: '#0099cc'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
});
twitterWidget.setUser(twitterUser).render().start();
$('#twitter_widget_id').change(function(){
twitterWidget.setUser($(this).val()).render().start();
});
In this case it works wrong: it shows only the newest tweets from all the accounts that I entered and in general I'm getting an empty widget.
If I delete the object and create a new one it makes the page blank and then adds the widget.
Does anyone know some public methods for the TWTR.Widget() like re-render() or something like that?
Thanks.
The documented Twitter widget source code is available at http://twitter.com/javascripts/widgets/widget.js and reading through it will tell you everything you need to know about how to manipulate its behavior. Briefly, the widget works like this:
When the widget is first created with new TWTR.Widget it calls .init() and takes note of where it's embedded in the page, inserting the widget HTML code into the DOM at that position. (It always assumes you're embedding, which is why if you create a new widget in a head script or in the context of the window it will end up embedding itself in the root of the window.)
But, you can still create the widget using a function (as long as it's called from the embedded script) and then hold onto a reference to the widget for later. When you call .render() later the widget just re-renders itself wherever it happens to be.
There are some pseudo-private methods on the TWTR object that you might try for fun, such as _getWidgetHtml() - which is called by .render() but you shouldn't need to use those.
I just wrote the following code, and it works well for me. Call this function from your embedded script (as shown), then call it again later with a new search parameter to re-render it.
<div id="my_widget_region">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>do_twitter_widget('"#winning" or "justin bieber"');</script>
</div>
function do_twitter_widget(search_query, title, subtitle) {
if (!window.widgetRef) {
window.widgetRef = new TWTR.Widget({
version: 2,
type: 'search',
search: search_query,
interval: 6000,
title: title || 'Tweets related to',
subject: subtitle || search_query,
width: 'auto',
height: 500,
theme: {
shell: {
background: '#8EC1DA',
color: '#FFFFFF'
},
tweets: {
background: '#FFFFFF',
color: '#444444',
links: '#1985B5'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
},
ready: function() {
// when done rendering...
}
});
window.widgetRef
.render()
.start();
}
else {
if (search_query != window.old_twitter_search) {
window.widgetRef
.stop()
.setSearch(search_query)
.setTitle(title || 'Tweets related to')
.setCaption(subtitle || search_query)
.render()
.start();
}
}
window.old_twitter_search = search_query;
return window.widgetRef;
}
You can just reload the widget by create a new instance using "id" params as html id of the the widget element.
Exemple below. (Works fine for me)
window.twitterCreateOrUpdateProfile = function (username) {
var opts = {
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 298,
height: 320,
theme: {
shell: {
background: '#86b9d1',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#0b0d0d'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
};
if (window.twitterCreateOrUpdateProfile.instance) {
opts.id = window.twitterCreateOrUpdateProfile.instance.widgetEl.id;
}
window.twitterCreateOrUpdateProfile.instance = new TWTR.Widget(opts);
window.twitterCreateOrUpdateProfile.instance.render().setUser(username).start();
}
window.twitterCreateOrUpdateProfile('evaisse');