I am trying to convert my application from 3.1 to 4.2 and can't seem to figure out what needs to be modified in place of the 'applyto'. I have tried variations of renderto and contentel but can't seem to figure it out. With 4.2 nothing seems to happen. No errors in firebug...
Ext 3.1 code that works
cust_datepicker = function(){
var els=Ext.select("input.date-picker",true);
els.each(function(el) {
new Ext.form.DateField({
applyto: el.id
,format: 'Y-m-d'
,altFormats: 'j|j/n|j/n/y|j/n/Y|j-M|j-M-y|j-M-Y'
,editable: false
,id : el.id
});
}
)};
Ext.onReady(function(){
cust_datepicker();
});
HTML Code:
<form action="xxx/xxx.cgi" method="GET">
<table><tr>
<td><input name="startdate" class="date-picker"/></td>
</tr></table>
</form>
Here something that worked for me with ExtJS 4.2.0.
The solution is to create a Form containing a Field.
HTML :
<table>
<tr>
<td><div id="here"></div></td>
</tr>
</table>
Javascript:
var here = document.getElementById('here');
var my_form = Ext.create('Ext.form.Panel', {
renderTo: here,
width: 100,
bodyStyle: 'border: none; padding: 0px',
items: [{
xtype: 'datefield',
fieldStyle: 'width: 76px;',
margin: false
}]
});
Try using contentEl property:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-contentEl
Related
Is there a way that I can set columns in a responsive table to have proportional widths, by that I mean a description column would be wider than a date column. Or is there a way that the table can set itself based upon the content being displayed? I have thought about setting percentage widths on each of the columns, but not sure that would be the best way of doing it.
Thank you.
yes you can do it!
there is a sample project
https://stackblitz.com/edit/angular-primeng-width?file=src/app/app.component.ts
in the component file add width in column definition:
this.columns = [
{ field: 'vin', header: 'Vin', width: '10%' },
{ field: 'year', header: 'Year', width: '20%' },
{ field: 'brand', header: 'Brand', width: '15%' },
{ field: 'color', header: 'Color', width: '5%' }
];
in templet file use [ngStyle]="{'width': col.width}
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
{{col.header}}
</th>
</tr>
</ng-template>
Try to set table-layout: auto; for PrimeNG table element.
It works for me
I use uiSortable (uiSortable) in my application and it works fine.
The only thing I was not able to do is to highlighting the drop cell before leave the item into the cell.
This is my html- code:
<td ui-sortable="vm.moveableItems" data-ng-model="myModelItems">
....
and this is my javascript code:
vm.moveableItems= {
start: function(e, ui) {
},
update: function(e, ui) {
},
stop: function(e, ui) {
// code to place the item into the cell -> works fine
Is there a possibility to highlight the cell I move over with the item and the mouse?
uiSortable is by default already applying the ui-sortable-placeholder class to the element you are currently hovering.
By default, it's invisible, but you can easily change it using only css:
.ui-sortable-placeholder {
visibility: visible !important;
background: red;
}
If the element you want to stylize is the td instead, just change the background of .ui-sortable-placeholder td, but keep the visibility override on the placeholder class.
You're looking for placeholder: <classname>.
This gets set in your ui-sortable=<parms>, alongside the start, update and stop methods you're already using.
Demo http://plnkr.co/edit/s3LNeq4SzrBxj4bhFu4q?p=preview
Controller
app.controller('mainController', function ($scope) {
$scope.list = ['Alabama','Alaska','Arizona','Arkansas'];
$scope.sortableOptions = {
placeholder: 'ui-state-highlight'
start: function(e, ui) {},
update: function(e, ui) {},
stop: function(e, ui) {},
};
});
Markup
<div ng-controller="mainController">
<table class="table">
<tbody ui-sortable="sortableOptions" ng-model="list">
<tr ng-repeat="item in list" style="cursor: move;">
<td>
{{item}}
</td>
</tr>
</tbody>
</table>
</div>
CSS
.ui-state-highlight {
height: 50px;
background: green;
display: block;
}
Update:Horizontal
This is also possible to do with horizontal movement. Pass 'ui-floating': true, and tweak your css to support it. Plnkr of this implantation here: http://plnkr.co/edit/YwBpL0LmSvVaa4t2HNsO?p=preview
I'm schooling up on Angularjs' ng-grid component and have encountered a rather disappointing issue. Basically, the flow is this: page loads and only a button is visible. Button is clicked and AJAX request gets json data and binds it to the grid.
This is what I see when I first click the button:
If I resize the browser at all, it snaps back into the correct size:
My controller looks like this:
myAppModule.controller('PodcastController', function ($scope, $http) {
$scope.getData = function () {
$http.get('/Home/PodcastDataAsJson').success(function (data) {
$scope.podcasts = data;
});
$scope.gridVisibilty = 'gridStyle';
};
$scope.gridOptions = {
data: 'podcasts',
columnDefs: [
{ field: 'Id', displayName: 'Id' },
{ field: 'Name', displayName: 'Name' },
{ field: 'Artist', displayName: 'Artist' }
]
};
$scope.gridVisibilty = 'notDisplayed';
});
The View looks like this:
<div ng-app="gridExampleApp">
<div ng-controller="PodcastController">
<button ng-click="getData()">Click to get Data</button>
<div id="datagrid" ng-grid="gridOptions" class="ng-class: gridVisibilty;"></div>
</div>
</div>
My css looks like this:
.notDisplayed
{
display: none;
}
.displayed
{
display: block;
border: 1px solid rgb(212,212,212);
width: 800px;
height: 300px;
}
.gridStyle
{
display: block;
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}
I'd like to know whether this is me, or whether it is a bug that I should lodge with the Angular ng-grid peeps.
Cheers
You did not show how you load the ng-grid stylesheet but I had similar problems when I tried to get it with a direct link.
Here is a demo with a local file for the ng-grid stylesheet: http://plnkr.co/edit/2pq9YotA4RJIMll5BJvh?p=preview. I also used the ng-show directive binded to the podcasts variable as the condition to show/hide the grid.
In the head of index.html, if you try to use the direct link to the stylesheet, there is a weird display effect. But if you put the same code in a local file, it works.
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