I have two panels. When I collapse the first one, the second does not fit the empty space. While if I collapse the second it works well.
this.firstpanel= new Ext.Panel( {
region: config.propertyRegion,
id: config.editorpropertytable,
border: true,
borderBody: false,
autoHeight: false,
autoScroll:true,
split: true,
collapsible: true,
height: 300, width: 600, minSize: minSize, maxSize: maxSize,
});
this.secondpanel= new Ext.Panel({
region: config.previewRegion,
id: Ext.id(),
autoScroll:false,
border: true,
borderBody: false,
collapsible: true,
split: true
});
I noticed that the arrow button for collapsing panels are different, but I don't why.
First panel collapsed
Second panel collapsed
In a BorderLayout, the collapsable space is always filled by the mandatory 'center' region.
Related
I am trying to add scrollbar to kendo witndow with fixed height but it is not worked.
Please help me , below are my code
var Employee= $('#EmpData');
Employee.kendoWindow(
{
title: "Employee Data",
width: "779px",
height: "700px",
animation: false,
resizable: false,
modal: true,
actions: [
"Minimize",
"Maximize",
"Close"
],
visible: true,
// scrollable: true
}).data('kendoWindow');
$('#EmpData').data('kendoWindow').center().open();
As if data is more than popup size then it cuts ,i need to show scrollbar to kendo window if data exceeds.
Please help me.
Thanks
When I add width to the edit modal in jqGrid, the parameters after it (i.e., add:false, closeAfterEdit: true, etc.) stop working. I've tried it in different places, and it doesn't work.
jQuery("#prodgrid").jqGrid('navGrid', '#pager', {width: 1000},{edit: true, add: false, del: false, search: false}, {closeAfterEdit: true}, {closeAfterAdd: true});
FYI:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/js/jquery.jqgrid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
You use wrong options of navGrid. If you examine the documentation you will see that the position of the parameters which you use is wrong. The correct will be
$("#prodgrid").jqGrid('navGrid', '#pager',
{add: false, del: false, search: false},
{closeAfterEdit: true, width: 1000},
{closeAfterAdd: true, width: 1000});
(you can skip edit: true because it's already default value).
I see that you use free jqGrid. It makes specifying of jqGrid options easier. First of all you can skip '#pager'. In the case jqGrid will just use the pager which you already specified during creating of the grid. Seconds you can specify page: true in the option of the grid instead of usage pager: '#pager'. You will don't need to create empty <div id="pager"></div> in the case. By usage page: true free jqGrid will create the corresponding div automatically. Moreover the options of 'navGrid' are divided in independent parts: the navGrid option {edit: true, add: false, del: false, search: false} and the options of form editing: {closeAfterEdit: true, width: 1000} and {closeAfterAdd: true, width: 1000}. Free jqGrid allows to specify the options directly during creating the grid and then use simplified form of the call of navGrid:
$("#prodgrid").jqGrid({
// here there are all other standard option which you already use
pager: true,
navOptions: {add: false, del: false, search: false},
formEditing: {closeAfterEdit: true, closeAfterAdd: true, width: 1000}
}).jqGrid("navGrid");
You can read more about the style of coding the option of jqGrid here. I personally like much more named parameter as positioned parameter because everybody can better read the code.
I know that frozen columns does not work if Sub-Grid is enabled from http://www.trirand.com/jqgridwiki/doku.php?id=wiki:frozencolumns.
My understanding is that frozen does not work in the parent grid but it should work in the Sub-grid?
But when I try frozen column in sub grid it does not work? Does it mean frozen columns does not work in both the parent and Sub-grid.
If you use subgrid as grid then jqGrid just creates empty <div> in the "subgrid row" where any information can be placed. So you can create for example new grid with any features in the div. You can create grid with frozen columns of cause.
I created the demo for you by modifying the demo from an old answer. The results looks like below
I marked the header of frozen columns using CSS
.ui-jqgrid .frozen-div .ui-th-column { background: #f0dcdd; color: black; }
The code of subgrid is the following
subGrid: true,
subGridRowExpanded: function (subgridId, rowid) {
var $subgrid = $("<table id='" + subgridId + "_t'></table>");
$subgrid.appendTo("#" + subgridId);
$subgrid.jqGrid({
datatype: "local",
data: $(this).jqGrid("getLocalRow", rowid).files,
colNames: ["Name", "Filetype", "col3", "col4"],
colModel: [
{name: "name", width: 130, key: true, frozen: true},
{name: "filetype", width: 130, frozen: true},
{name: "col3", width: 130},
{name: "col4", width: 130}
],
height: "100%",
rowNum: 10,
sortname: "name",
shrinkToFit: false,
autowidth: true,
idPrefix: "s_" + rowid + "_"
}).jqGrid("setFrozenColumns");
}
I use shrinkToFit: false to prevent default shrinking of columns of subgrids together with autowidth: true which set the width of the subgrid.
The code works in jqGrid 3.7 or free jqGrid 3.8 which I published recently (see here and here), but in case of usage more old versions of jqGrid you can need to trigger jqGridAfterGridComplete event (see the answer).
I am using ExtJS 4.2.3
I need a panel to collapse with an animation with a left and right direction.
there are 2 panels the reside in an hbox container.
here is how I am calling the collapse
var me = this,
direction = NG.isRTL() ? Ext.Component.DIRECTION_LEFT : Ext.Component.DIRECTION_RIGHT;
me.collapse(direction);
No matter what I pass for the direction field I alweys get the animation working from right to left. (I need it the other way around)
I have searched the web for it but no one seems to talk about it.
Please see the image I have attached where I have captured the animation half way through.
UPDATE:
Here is a fiddle to demonstrate what I am talking about:
example
It looks like there could be a bug, see https://fiddle.sencha.com/#fiddle/j4p. However, if you want collapsible panels on the right side to collapse to the right, you should just use a border layout. See https://fiddle.sencha.com/#fiddle/j4q
Ext.create('Ext.panel.Panel', {
width: 500,
height: 200,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south',
height: 75,
split: true
},{
title: 'East Region is collapsible',
region:'east',
width: 100,
collapsible: true,
},{
title: 'West Region is collapsible',
region:'west',
width: 100,
collapsible: true,
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel'
}],
renderTo: Ext.getBody()
});
<link href="http://docs-origin.sencha.com/extjs/4.2.2/styles-3eba09980fa05ead185cb17d9c0deb0f.css" rel="stylesheet"/>
<link href="http://docs-origin.sencha.com/extjs/4.2.2/resources/css/app-4689d2a5522dcd3c9e9923ca59c33f27.css" rel="stylesheet"/>
<script src="http://docs-origin.sencha.com/extjs/4.2.2/extjs/ext-all.js"></script>
jqgrid add dialog have two buttons(submit and cancel). A message will be displayed when i click the cancel button. That message box have 3 buttons(yes, no and cancel). Now i want to remove the cancel button. any possibilities........?
Sorry for my bad english.
Thank you.
sample coding for jqgrid
<sjg:grid id="gridtable"
caption="Customer List"
dataType="json"
href="%{remoteurl}"
pager="true"
gridModel="customerList"
rowNum="10"
autowidth="true"
editurl="%{editurl}"
editinline="false"
navigator="true"
navigatorAdd="true"
navigatorAddOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
closeAfterAdd: true,
height: 275,
width: 600,
draggable: false,
resizable: false
}"
navigatorDelete="true"
navigatorEdit="true"
navigatorRefresh="true"
navigatorSearch="true"
navigatorEditOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
closeAfterEdit: true,
height: 275,
width: 600,
draggable: false,
resizeable: false
}"
navigatorDeleteOptions="{ checkOnUpdate: true}"
navigatorViewOptions="{
viewPagerButtons: false,
recreateForm: true,
checkOnUpdate: true,
height: 225,
width: 620,
draggable: false,
resizeable: false
}"
navigatorSearchOptions="{
sopt:['eq','ne','lt','gt','in','ni','cn','nc'],
closeAfterSearch: true
}"
navigatorView="true"
rownumbers="true"
rowList="10,20,30"
viewrecords="true"
>
Thank you so much.
Here i am specifing that cancel button
how to remove this cancel button?
I need only yes and no buttons.
Using grid API how it can be possible i dont know but,using jquery you can hide this button in following way :
$("#gridtable #cNew).css({'display':'none'});
'#cNew' is id of that button or you can get id of Cancle button by right click on that button and select inspect element in mozila webbrowser or use firebug to get id of that button and then replace that id with #cNew.
I think you can apply it to each form add, edit, etc.
hide button cancel
onInitializeForm: function($form) {
$form.parent().find('#cData').hide();
}
or if you want hide button submit
beforeShowForm: function ($form) {
$form.parent().find('#sData').hide();
},