Team,
Is anyone aware how to disable horizontal scroll bar in panel. I am using EXTJS 3.4
Basically I want only vertical scroll bar to be visible and not horizontal.
I tried autoScroll=true as panel property but If I do so I can see both horizontal and vertical scroll bar.
here is the code.
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var tab2 = new Ext.FormPanel({
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
title: 'Run Report',
bodyStyle:'padding:5px',
border : true,
style: 'margin:0 auto;margin-top:50px;margin-left:50',
width: 900,
height:600,
items:
[{
xtype:'panel',
border:true,
height:75,
title:'Inner Panel',
bodyStyle:'padding:5px',
autoScroll:true,
items: [{
layout:'column',
border :false,
items:[{
columnWidth:.3,
layout: 'form',
border :false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.3,
layout: 'form',
border :false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
}]
}]
,
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tab2.render(document.body);
});
</script>
</div>
</body>
</html>
The solution is to set overflowY to 'auto' and then remove autoScroll completely.
xtype:'panel',
border:true,
height:75,
title:'Inner Panel',
bodyStyle:'padding:5px',
//autoScroll:true,
overflowY: 'auto'
Using 4.2.1 what works for me in Chrome, FF and IE11 is using this:
style: 'overflow-y: scroll; overflow-x: hidden;'
I know this is late but this is the actual setting to use:
bodyStyle:'overflowY: auto',
Hope it helps someone. Should be able to get it to work in 4.x implementations too. So far I only tested it in 3.4.
// autoScroll:true,
// style:'overflow-y:auto;overflow-x:hidden;',
overflowY: 'auto',
It works with replacing comments with overflowY.
Related
Is there any way to customise the expand(+)/ collapse(-) buttons in ExtJs grid/ accordion.
You can change the icons by overriding the CSS for tool icons. You can add a class name to the accordion panel and apply styles to the tool buttons using that.
Sample Code Snippet
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 200,
height: 300,
layout: {
type: 'accordion'
},
cls: 'my-accordion',
items: [{
title: 'Panel 1',
html: 'Panel content!'
}, {
title: 'Panel 2',
html: 'Panel content!',
collapsed: true
}, {
title: 'Panel 3',
html: 'Panel content!',
collapsed: true
}],
renderTo: Ext.get("container")
});
body {
padding: 0px;
}
.my-accordion .x-accordion-hd .x-tool-over .x-tool-collapse-top,
.my-accordion .x-accordion-hd .x-tool-over .x-tool-collapse-bottom,
.my-accordion .x-accordion-hd .x-tool-collapse-top,
.my-accordion .x-accordion-hd .x-tool-collapse-bottom {
background-position: 0 -570px;
}
.my-accordion .x-accordion-hd .x-tool-over .x-tool-expand-top,
.my-accordion .x-accordion-hd .x-tool-over .x-tool-expand-bottom,
.my-accordion .x-accordion-hd .x-tool-expand-top,
.my-accordion .x-accordion-hd .x-tool-expand-bottom {
background-position: 0 525px;
}
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<div id="container">
</div>
I have a tab panel that is displaying two tabs. I also created an Ext.panel.Panel (docspanel), that is displaying in both tabs.But how hide it for tab B?
tabPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
activeTab: 0,
autoScroll: true,
items: [
{
id:"panel_A",
html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",
},{
id:"panel_B",
html: "<iframe src= '"+B_url+"' width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
}],
renderTo: Ext.getBody()
});
viewport = new Ext.Viewport({
layout:'border',
items:[tabPanel,docsPanel]
});
With this difinition your docsPanel added to Ext.Viewport(along with tab panel), not to tabPanel.
viewport = new Ext.Viewport({
layout:'border',
items:[tabPanel,docsPanel]
});
You can add tabPanel to panel A, like this:
items: [
{
items: [
docsPanel,
{
xtype: 'panel',
id:"panel_A",
html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />"
}
]
},
{
id:"panel_B",
html: "<iframe src= '"+B_url+"' width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />"
}
],
or just hide() / show() docsPanel on tabchange event of tabPanel (imo its pointless).
I want to bind my ng-grid celltemplate to html textbox ( I am having ng-grid , which displays the data,below that I want to add a textbox, so that as I type something in textbox, the values should get update in cell Template of ng-grid).
Here is my html page:
<div ng-controller="bulkAssign" >
<form name="signup_form" method="POST">
<div style=" border: 1px solid rgb(212,212,212);
width: 1000px;
height: 200px;" ng-grid="gridUser">
</div>
<p><b>Editing grid</b></p>
<div class="gridStyle" ng-grid="gridOptions" data-ng-click="testSeletion()"></div>
<label>Edit grid from textbox</label>
<input type="number" name="assignTo" ng-model="assignTo" placeholder="Assign order to" class="form-control" >
</form>
</div>
Here is my controller:
$scope.gridOptions = {
data: 'names',
enableCellSelection: false,
enableRowSelection: true,
showSelectionCheckbox: true,
multiSelect: true ,
columnDefs: [
{
field: 'orderId',
displayName: 'OrderId',
enableCellEdit: false,
cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>'
},
{field: 'trackingId', displayName: 'trackingId', enableCellEdit: false, cellTemplate:'<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="loadById(row)">{{row.getProperty(col.field)}}</a></div>' },
{field: 'orderTitle', displayName: 'OrderTitle', enableCellEdit: false},
{field:'customerName', displayName:'CustomerName', enableCellEdit: false},
{field:'customerContactno', displayName:'ContactNo', enableCellEdit: false},
{field:'assignTo', displayName:'assignTo', enableCellEdit:true,cellTemplate:'<input type="number">'}
],
selectedItems: $scope.mySelections,
filterOptions: $scope.filterOptions
};
My question is after entering value in textbox, when i click button, is it possible to update values in ng-grid celltemplate?
I am new to ExtJS4. I'm testing some simple demos in ExtJs4 Docs. I find that the header of Panel is always little smaller than body of panel, and the panel inside is samller too. The header is always 11px shorter than the body under the measure with Firebug. I test the code in FF, IE8, Chrome, all of them render it like what the screen shot shows (the image link).
Sorry for my poor English. I'm confused with this probelm,help me,please.
the screen shot link:
http://i.stack.imgur.com/vb2Xo.jpg
or
http://www.tu265.com/di-c870adf0409aa61a99c774186dd9afa8.jpg
my js code:
Ext.create('Ext.panel.Panel', {
title: 'container panel',
renderTo: 'container',
width: 400,
height: 300,
layout: 'accordion',
items: [{
tools: [{ type: 'gear', handler: function () {
Ext.Msg.alert('msgWindow', 'btn is Clicked');
}
}, { type: 'refresh'}],
title: 'panel1',
xtype: "panel",
html: "insidePanel1"
}, {
title: 'panel2',
xtype: "panel",
html: "insidePanel2"
}, {
id: 'panel3',
title: 'panel3',
xtype: "panel",
html: "insidePanel3"
}]
});
Ext.create("Ext.Button", {
renderTo: 'container',
text: "open panel3",
handler: function () {
Ext.getCmp('panel3').expand(true);
}
});
html code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Layouts</title>
<link href="../../ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../../ext-4.0.7-gpl/ext-all-debug.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//js code
</script>
</body>
</html>
Your code works OK on my PC (FF, IE 8 and Chrome). So I think you can try it with several ways:
ext-all-gray.css or ext-all-access.css instead of ext-all.css.
ext-all.js instead of ext-all-debug.js.
re-download ext-4.0.7-gpl from Sencha site.
You could use your own css file and a rule like this for example
.x-panel-body .x-panel-header-text{
font-size:12px;
font-weight:bold;
}
Take a look in a working example
I have similar thing. Try to set scopeResetCSS = false, sometimes it comes with demo examples, so just comment them.
//Ext.scopeResetCSS = true;
This is my Ext Panel and Ext Window
This is Editor Grid Panel
voiceListingEditorGrid = new Ext.grid.EditorGridPanel({
id: 'voiceListingEditorGrid',
store: voiceDataStore,
cm: voiceColumnModel,
enableColLock:false,
resize: false,
autoload: true,
clicksToEdit:2,
sm: colSM,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
tbar: [
{
text: 'Add a site',
tooltip: 'Add a new site',
iconCls:'add',
handler: displayFormWindow
}, '-', {
text: 'Delete selection',
tooltip: 'Select a record from table and delete',
handler: confirmDeleteSite, // Confirm before deleting
iconCls:'remove'
}]
});
This is Ext.Window
voiceListingWindow = new Ext.Window({
id: 'voiceListingWindow',
title: 'Sites',
draggable : false,
resizable: false,
closable: false,
width:805,
height:500,
plain:true,
layout: 'fit',
items: voiceListingEditorGrid
});
The Data Store
voiceDataStore = new Ext.data.Store({
id: 'voiceDataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.php',
method: 'POST'
}),
// these parameters are passed for any HTTP request
baseParams:{
task: "VOICELISTING",
user_id : user_id_param
},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
},[
{name: 'queue_code', type: 'string', mapping: 'queue_code'},
{name: 'site_name', type: 'string', mapping: 'site_name'} ,
{name: 'queue_id', type: 'int' , mapping: 'queue_id'}
]),
sortInfo:{field: 'queue_id', direction: "ASC"}
});
The Model
voiceColumnModel = new Ext.grid.ColumnModel(
[
/*{
header: 'ID',
dataIndex: 'queue_id'
},*/
colSM,
{
header: 'Site Name',
dataIndex: 'site_name',
width:330,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
regex: /[a-zA-Z0-9]+/
})
},{
header: 'Site Number',
dataIndex: 'queue_code',
width:310,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([0-9\s]+)$/ ,
regex: /[0-9]/
})
},{
header: 'Add Call Queue',
align: 'center',
width: 124,
sortable: false,
//renderer: function(val){ return '<input type="button" onclick="redirect();" value="Add Call Queue" id="'+val+'"/>'; },
renderer: function(val){ return '<input type="image" alt="Add Call Queue" id="'+val+'" src="images/plus.png" name="Add Call Queue" onclick="redirect();" >' ; },
dataIndex: 'user_id'
}
]
);
This is the PHP file
<?php
session_start();
if(!isset($_SESSION['validuser'])){
header( "Location: http://localhost/vcc" );
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>VCC</title>
<link rel="stylesheet" type="text/css" href="customeStyle.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="voicesite.js"></script>
<script type="text/javascript" >
function goBack(){
//history.back();
window.location ="http://didyouwonder.com/vcc/users.php";
}
</script>
</head>
<body>
<div id="contianerVoice">
<div id="logoffbtn1">
<a href="logout.php" ><img src="images/signout.gif" alt="Logout" /></a>
</div>
<h1>Account Name: <?php echo $_GET['account_name']?></h1>
<div id="footerVoice">
<div id="left-footer">
<a href="#" onclick="goBack();" ><img src="images/back1.png" alt="Back" /></a>
</div>
<div id="right-footer">
<div id="rdiv">
<ul>
<li><img src="images/plus.png"/><span> Add Voice Site</span></li>
<li><img src="images/enable.png"/><span> Enable</span></li>
<li><img src="images/disable.png"/><span> Disable</span></li>
</ul>
</div>
<div id="ldiv">
<ul>
<li><img src="images/add.gif"/><span> Add</span></li>
<li><img src="images/delete.gif"/><span> Delete</span></li>
<li> Double click to Edit</span></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Please see the attached images and then read the explanation below
Page layout is fine when page loads
See this Image
This is what happens when firebug window is opened and page is refreshed.
See this image
Grid appears OK when the page is loaded. The problem is when I open up the firebug window and refresh the page , Grid goes to the top and same thing happens when I open the page on Mac. I don't know how to handle this problem since this is the first time I am working with Ext.
Please suggest something.
OK I have solved the issue ... This is a pluign that serves my purpose. There is an example of using this plugin over here. Read the documentation carefully and then the example.
But at first it didn't work for me, the reason was ext window container, that was rendering the grid panel. So I removed this from code
voiceListingWindow = new Ext.Window({ ...
Now the grid panel is rendered according to this property of Grid panel
... renderTo: 'reportTabContent' // render the grid to the specified div in the page