Develop Reference

w2ui grid hide and show not working properly

I am working on w2ui grid and I need to hide and show it based on certain condition. Grid is not showing back even though visibility:visible property is applied after it is hidden. It is just showing a line.
Please have a look at my code below:
HTML:
<div id="LastMileGrid" class="col-lg-6 col-sm-12 col-md-6" style="width: 100%; height: 150px"></div>
Javascript:
$('#LastMileGrid').w2grid({
name: 'LastMile',
show: {
toolbar: true,
footer: true,
toolbarReload: false,
toolbarColumns: false,
lineNumbers: true,
},
columns: [
{ field: 'recid', caption: 'ID', size: '10%', sortable: true },
//{ field: 'Header', caption: 'Header', size: '20%', editable: { type: 'text' }, sortable: true },
{ field: 'Description', caption: 'Description', size: '50%', editable: { type: 'text' }, sortable: true }
],
toolbar: {
items: [
{ id: 'add', type: 'button', caption: 'Add Record', icon: 'w2ui-icon-plus' },
{ id: 'remove', type: 'button', caption: 'Remove Record', icon: 'w2ui-icon-cross' }
],
onClick: function (event) {
if (event.target == 'add') {
var Index = w2ui['LastMile'].records.length;
w2ui['LastMile'].add({ recid: w2ui['LastMile'].records.length + 1 });
}
if (event.target == 'remove') {
var grid = w2ui["LastMile"];
grid.method = 'DELETE';
grid.delete();
}
}
},
//records: [{ recid: 'AAA' }, { recid: 'BBB' }, { recid: 'CCC' }]
});
And when opening the pop up I call the function,
$('#popup').w2popup('open', {
onOpen: function () {
if ($("#ddlMode").val() == "AIR" && ($("#drpServiceScope").val() == "D2D" || $("#drpServiceScope").val() == "A2D")) {
$('#LastMileGrid').attr("style", "visibility:visible;height:160px:")
}
else {
$('#LastMileGrid').attr("style", "visibility:collapse;")
}
},
modal: true,
});

You can try to call w2ui["LastMile"].refresh() after hiding or showing.

Answering to help others as I am late :D.
After spending a lot of time to resolve the issue,I have formulize below 2 solutions for w2ui grid show hide issue or column size issue :
1.Change the size of columns to px instead of %.
ie. use
{ field: 'lname', caption: 'Last Name', size: '30px' }
instead of
{ field: 'lname', caption: 'Last Name', size: '30%' },
2. If you wish to keep column size in % due to some requirement:
Depending on where you are rendering grid,you need to handle the resizing.
Calling refresh on grid will send data request again to server.
I don't wanted grid to make call to server each time I show/hide grid, hence written the resize of my own.
To help understand the function please note that in my application,
I have followed naming convention as follows:
If I create a grid then it will be id+"_grid",
If create a form that it will be id+"_form",
same for layout id+"_layout".
So I can get the associated component to a id and establish relation between them.
Call resize() function after you call show().
If below function doesn't help, try adding some milli seconds delay between show and my function resize().
function resize(id){
var grid=id+"_grid";
var layout=id+"_layout";
var form=id+"_form";
if(w2ui[layout]){
if($(w2ui[layout].el("main")).hasClass("w2ui-grid")){ /*means in w2ui layouts main has grid hence call resize. Calling refresh on layout "main" will make grid to reload data again ,hence grid resizing is handled in next case */
w2ui[layout].resize();
}else{
w2ui[layout].refresh();/*means main has element other than grid so refresh */
}
}
if(w2ui[form])
w2ui[form].resize();
if(w2ui[grid])
w2ui[grid].resize(); //if grid is directly rendered without a layout resize helps
}

EXTjs getEl() fails before showing the element

Good day all.
In EXTjs, probably 4.x version, I have a menu with a couple of levels of sub-menus
I'd like to add a data attribute to some of those sub-menus and actually I can do this with no problems with:
Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 4});
but this is working only for the first element of the menu (to be clear, the element that is shown upon loading.
For any other element of the menu, first of all I have to click the menu to show all the sub-menu and only at that time I can use the getEl() function, otherwise this error is shown:
Uncaught TypeError: Cannot read property 'set' of undefined
I understand that I'd need to... show? render? well, "do something" to those sub elements in order to have them in the dom properly... I attach part of the code:
this is part of the menu I create:
xtype: 'button',
id:"notificationMenu",
hidden: false,
reference: 'userType',
style: 'color: #ffffff;width:58px;height:58px;',
glyph: 0xf0f3,
menu:{
border:0,
menuAlign: 'tr-br?',
bodyStyle: {
background: '#3e4752',
},
items:[
{
text:"TASKS",
disabled:true
},
{
text:"Campaigns",
data_id:"me_campaigns",
glyph:0xf0c1,
id:"notification_me_campaigns_root",
hidden:true,
menu:{
border:0,
menuAlign: 'tr-br?',
bodyStyle: {
background: '#3e4752',
},
items:[
{
text:"Approval",...
in this example, if I make after Render:
Ext.getCmp("notificationMenu").getEl().set({"data-notifynumber": 10})
but if I use
Ext.getCmp("notification_me_campaigns_root").getEl().set({"data-notifynumber": 4})
the error above is shown. please do you have some advice? may I call a "force render" somehow?

Try to use afterrender to get dom element.
ExtJs getEl() Retrieves the top level element representing this component but work when dom is prepared without dom creation it will return null.
I have created an Sencha Fiddle demo hope this will help you to achieve you requirement/solution.
var panel = new Ext.panel.Panel({
renderTo: document.body,
title: 'A Panel',
width: 200,
tools: [{
xtype: 'button',
text: 'Foo',
menu: {
defaults: {
handler: function () {
Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
}
},
items: [{
text: 'Item 1'
}, {
text: 'Item 2',
menu: {
listeners: {
afterrender: function () {
this.getEl().set({
"data-notifynumber": 20//only for example you can put as basis of your requirement
});
}
},
defaults: {
handler: function () {
Ext.Msg.alert('Successs', 'You have click on <b>data-notifynumber</> ' + this.up('menu').getEl().getAttribute('data-notifynumber'))
}
},
items: [{
text: 'Sub Item 1',
}, {
text: 'Sub Item 2'
}]
}
}],
listeners: {
afterrender: function () {
this.getEl().set({
"data-notifynumber": 10//only for example you can put as basis of your requirement
});
}
}
}
}]
});

Tinymce dialog's textbox overlaps with label

As the title suggests, Tinymce's dialog box's textbox is overlapping with the label.
ed.addButton('addref', {
title : 'Add References',
image : 'img/example.gif',
onclick : function() {
ed.windowManager.open({
title: 'Add References',
body: [
{type: 'textbox', name: 'refName', label: 'Name'},
{type: 'textbox', name: 'refSurname', label: 'Surname'}
],
onsubmit: function(e) {
ed.focus();
ed.selection.setContent('<pre class="language-' + e.data.refName + ' line-numbers">Data</pre>');
}
});
}
});
This is how my dialog box looks

I was using a beta version of tinymce(4.0b1). When I updated my library to 4.5.2, the issue was solved.

No type for image in tinymce version 4

I need to develop a small plugin for tinyMCE 4.0.
I have to show preview of image based on the input url.
I cannot figure out the type for image preview.
Is there anything like type="image"
tinymce.PluginManager.add('uploadimage', function(editor, url) {
// Adds a menu item to the Insert menu
editor.addMenuItem('uploadimage', {
text: 'Example plugin',
context: 'insert',
onclick: function() {
editor.windowManager.open({
title: 'TinyMCE site',
width: 400,
height: 300,
buttons: [{
text: 'Close',
onclick: 'close'
}],
body: [
{
name: "path",
type: "textbox",
size: 40,
label: "File URL",
},
{
name: "fileList",
type: "listbox",
label: "Link list",
values: editor.settings.external_image_list_url,
onselect: function(e) {
this.parent().parent().find("#path").value(this.value());
}
},
{
name: "fieldset",
type:"image" //HERE I NEED TO PREVIEW IMAGE BUT THERE IS NO SUCH TYPE IMAGE
}
],
});
}
});
});

I think that your best bet is to specify the type as "Container" and then set the HTML output manually with method "renderHtml" as can be seen in the documentation at:
http://www.tinymce.com/wiki.php/api4:class.tinymce.ui.Container
On the right side of that page you get to see a list of all the available types. This could be extended obviously if you decide to code your own Image control.

Sencha Touch Checkbox select on label click

I have some checkboxes in my app:
http://img846.imageshack.us/img846/7397/628bc474d4904ff2993df81.png
Now I want to trigger/toggle selection when the labels are clicked.
Any ideas?

If you want to achieve the same in Sencha Touch 2, you can use the following for radiofields or checkboxes:
defaults: {
xtype: 'radiofield',
name: 'fieldname',
listeners: {
// Adding listener for tap event on label element,
// this should toggle the checkbox.
"tap": {
element: "label",
fn: function () {
var me = this;
me.setChecked(!me.isChecked());
},
}
}
}
EDIT: Apparently, the "click" event should be "tap", according to #jayteejee. Changed the original "click" listener to a "tap" listener accordingly.

Use this to add tap listener to the label element.
{
id: 'username',
xtype: 'checkboxfield',
name : 'username',
label: 'User Name',
listeners:{
labelEl:{
tap:function(){
var obj = Ext.getCmp('username');
if(obj.isChecked()){
obj.uncheck();
}else{
obj.check();
}
}
}
}
}

Thijs' answer worked well with a minor adjustment to get it working on Android and iOS with Sencha Touch 2. Just change "click" to tap:
{
xtype: 'checkboxfield',
name: 'fieldname',
label: 'Label',
listeners: {
tap: {
element: "label",
fn: function () {
this.setChecked(!this.isChecked());
}
}
}
}