I am completely new to jqGrid and simply having a hard time get started as every post seem to be very advanced. I simply have a simple grid setup and now want to add the 'add/edit' icons. I have below code but they still don't show up. What else is missing?
$("#tabPeopleList").jqGrid('navGrid', '#tabPagerBar', {
edit: true, <-- isn't this all there is needed?
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext:"Delete"
});
Everything looks good, just ensure that you have the following elements in your html:
<table id="tabPeopleList" ></table>
<div id="tabPagerBar"></div>
and in your jqGrid ititialization:
pager: $('#tabPagerBar'),
Related
I am trying to customize the behavior of an editor button in a plugin. On click, it opens a modal where the user can input some text. On confirmation, I want to wrap this text into code tags. But I don't want to take this text as if it comes from a text editor, I want to handle it as visual text. This means, I want to preserve any formatting (whitespaces and linebreaks) but not accept any other tags besides the code tags that I add afterward.
function showDialog() {
var win = ed.windowManager.open({
title: "Insert code",
body: {
type: 'textbox',
name: 'code',
multiline: true,
minWidth: ed.getParam("code_dialog_width", 600),
minHeight: ed.getParam("code_dialog_height", Math.min(tinymce.DOM.getViewPort().h - 200, 500)),
spellcheck: false,
style: 'direction: ltr; text-align: left'
},
onSubmit: function(e) {
ed.focus();
ed.undoManager.transact(function() {
ed.insertContent('<code>' + e.data.code + '</code>');
});
ed.selection.setCursorLocation();
ed.nodeChanged();
}
});
}
First i'd wrap that function in tags and make sure to initiate the function by adding showDialog() at the end of that function so the DOM knows to call the function. and with wordpress's content filter its going to add spaces no matter what unless you disable the content filter from auto populating format. if you go to a site like https://www.willpeavy.com/minifier/ and copy your code into that and minify the spaces you should be able to include it in your text(not Visual) tab in MCE. That being said its really bad practice to run functional code in MCE you're better off making a separate page / Post template for it.
I am trying to include a caption on the actual webpage under the image while using the magnificence popup gallery. Using a div and class caption or carousel-caption, I am unable to do so without the images in the gallery stacking vertically one by one. How can I do this?
<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
<img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true}
// other options here
// end each line (except the last) with a comma
});
});
js fiddle: https://jsfiddle.net/sb4btox7/
Since I don't yet have enough reputation points to comment, I'm commenting here, in addition to providing a solution.
Comment: JSFiddle isn't working with your http:// images because JSFiddle is trying to serve them from https://
Solution:
You are halfway there. There are 2 parts to making the captions work.
You correctly have put the link in the anchor tag and not the
image tag
You must specify your title source in your
initialization script like this.
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true},
type: 'image',
image: {
titleSrc: 'title'
// this tells the script which attribute has your caption
}
});
});
The script then automatically writes your caption to its div labeled class="mfp-title"
BONUS Solution: I needed my lightbox image to open in a new window for users on their phones to zoom in, so I added this after the first titleSrc declaration:
titleSrc: 'title',
titleSrc: function(item) {
return '' + item.el.attr('title') + '';
}
This information is in the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html in the "Image Type" section
I tried to use the selected answer, but even using the documentation, the examples wouldn't work for me. What I ended up using was:
$('.elements').magnificPopup({
type: 'image',
gallery: {
enabled: true
},
image: {
titleSrc: function(item) {
return item.el.find('img').attr('title');
}
}
});
This probably has something to do with the version I was using, but it wasn't clear what version the documentation was for. Hopefully this is useful to someone.
I am trying to find a way to get a close (X button) in the top right hand corner of the Ext.MessageBox in Sencha Touch 2.0 so that when you click on the button it closes the MessageBox.
You might want to have a look at this nice tutorial:
Add action buttons to floating sencha touch panels
the explanation is for ST1, but it might help you understanding how you could achieve this in ST2.
Hope this helps.
There's no built-in config which meets your need, so you have to do it manually.
Note that Ext.MessageBox is just a float and modal Ext.Container, so you can customize it like a normal container.
Let's try something like this (you can edit this code live through Sencha Touch 2 documentation here:
http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox
var box = Ext.create('Ext.MessageBox',
{
id: 'message-box',
title: 'title',
message: 'message',
items: [
{
xtype: 'toolbar',
height: '40px',
docked: 'top',
items: [
{xtype: 'spacer'},
{xtype: 'button',
text: 'X',
ui: 'plain',
style: {padding: '5px'},
handler: function(){Ext.getCmp('message-box').hide();}
},
],
}
]
});
box.show();
Hope it helps.
I am using a jqGrid that has allot of columns to it.
I added the view option (when clicking on a row and then on the 'view' button, in the bottom left corner of the grid, it opens a model with all the info for that row.
I see that the model has some css style:
overflow-hidden
Therefor if i have allot of columns to show after a certain height that i gave it when creating the grid, they get hidden.
How can i make that dialog box be:
overflow-auto
If possible i want only the inside div to scroll and leave the header of the dialog and the buttons on bottom there all the time.
How can i do this?
myGrid.jqGrid('navGrid', '#pager',
{ edit: false, add: false, del: false, search: false, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{},
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
I tried this:
$('#viewmod'+myGridId).css({overflow: 'auto'});
But it didnt work...
You tried the way described here and here.
Found the answer for this.
When declaring the view options add the dataheight option...
{ dataheight: 250, jqModal: false, closeOnEscape: true} // view options
I have the following code, which generates a basic layout for my app:
tabpanel = new Ext.TabPanel({
fullscreen: false,
ui : 'dark',
sortable : false,
tabBarDock: 'bottom',
cardSwitchAnimation: 'flip',
items: [{
title: 'Tab 1',
html : '1',
cls : 'card1',
icon : 'tab1'
}]
});
lists.views.Viewport = Ext.extend(Ext.Panel,{
fullscreen: true,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: "top",
title: 'title'
}],
items: [tabpanel],
initComponent: function() {
this.tabpanel.add(new lists.views.ItemLists());
lists.views.Viewport.superclass.initComponent.apply(this, arguments);
},
});
This doesn't work, probably due to the fact that the TabPanel that is inside the Viewport Panel cannot be pointed to like this. I've searched through the sencha documentation but I can't find how to add the
new lists.views.ItemLists()
to the tabpanel, which in turn is inside the
lists.views.Viewport
Also, there will be other stuff I want to declare before my viewport (or even after it) that I want to add to specific other panels I might add later. What is the best way to achieve this?
Any ideas on how to do this?
Thanks!
If you take the this. off the reference to the tabpanel in the Viewport's initComponent method then it should work because the tabpanel variable is global.
Alternatively, you can access the Viewport's items via the items property, for example,
initComponent: function(){
this.items.get(0).add(new lists.views.ItemLists());
lists.views.Viewport.superclass.initComponent.apply(this, arguments);
}
Hope this helps
Stuart