I am trying to create a Form using ExtJS . The files are placed properly but no rendering is happening :
index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-debug.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div id="aa"></div>
</body>
</html>
app.js
Ext.create('Ext.form.Panel', {
renderTo: document.getElementById('aa'),
title: 'User Form',
height: 130,
width: 280,
bodyPadding: 10,
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
});
Anybody any idea what am I missing ?
Thanks
In your app.js, try running that code when the onReady event has been fired e.g.
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
renderTo: document.getElementById('aa'),
title: 'User Form',
height: 130,
width: 280,
bodyPadding: 10,
defaultType: 'textfield',
items: [
{
fieldLabel: 'First Name',
name: 'firstName'
},
{
fieldLabel: 'Last Name',
name: 'lastName'
},
{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}
]
});
});
Just use Ext.onReady():
Adds a function to be called when the DOM is ready, and all required
classes have been loaded.
If the DOM is ready and all classes are loaded, the passed function is
executed immediately.
Working example: http://jsfiddle.net/Ld5e6/
Related
I'm with some troubles with the CakePHP serialize and bootstrap-tables.
I've loaded all .js.
I think the bootstrap-tables dont reconize the
{ "despesas":[ in front of the .json
Can someone help me?
My route.php
//code
Router::extensions(['json']);
//code
my DespesasController.php function
//code
public function test()
{
$this->paginate = [
'contain' => ['Lojas', 'DespesaTipos'],
'limit' => '1000000000'
];
$this->set('despesas', $this->paginate($this->Despesas));
$this->set('_serialize', ['despesas']);
}
//code
test.ctp
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css">
<table id="table"></table>
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pt-BR.min.js"></script>
<script type="text/javascript">
$('#table').bootstrapTable({
url: 'test.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'descricao',
title: 'Item Name'
}, {
field: 'valor',
title: 'Item Price'
}, ]
});
</script>
test.json
{
"despesas": [
{
"id": 1,
"data": "2015-01-02T00:00:00-0200",
"descricao": "INTERNET TRIBUNA BAIRROS (50%)",
"valor": 1503,
"loja_id": 1,
"despesa_tipo_id": 1,
"obs": "",
"created": "2015-12-10T00:00:00-0200",
"modified": "2015-08-05T00:00:00-0300",
"criado_por": "Kelvin Primo",
"modificado_por": "Deise"
},
When I open it on browser it returns.
No matching records found
Load you json data before you create the table, then you can pass it into the table, how it likes it.
<script type="text/javascript">
$(function () {
$.getJSON( "test.json", function(data) {
$('#table').bootstrapTable({
data: data.despesas,
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'descricao',
title: 'Item Name'
}, {
field: 'valor',
title: 'Item Price'
}]
});
});
});
</script>
I have three files: form.html, report.html, console.html. I am facing two problems with console.html page.
I am trying to load 'report.html' but only static content is loaded,
extJs components are not loaded or say script is not executed.
I am trying to load 'form.html'. In this code, i am able to load form.html along with extJs components successfully. But the problem is that once tab2 is loaded, i am not able to activate/see tab1.
Appreciate any help. Any example of autoLoad without any error will do.
Console.html is as below:
<head>
<title>Sample Console</title>
<link rel="stylesheet" type="text/css" href="../ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="../ExtJs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: 'frmSampleConsole',
split: true,
height : '100%',
width : '100%',
layout:'border',
defaults: {
collapsible: true,
split: true
//bodyStyle: 'padding:15px'
},
items:
[
{
title: 'Report',
region : 'west',
width : 280,
autoLoad : 'report.html',
contentType: 'html',
scripts : true
}
,
{
id :'tabpanel',
xtype:'tabpanel',
title: 'Main Content',
collapsible: false,
region:'center',
items : [
{
id : 'tab1',
title: 'Tab1',
collapsible: false,
margins: '5 0 0 0',
activeTab:0,
items: [
{
html : 'Sample html content'
}
]
},
{
id :'tab2',
title : 'Tab2',
layout : 'fit',
closable: true,
loader: {
url: 'form.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
render: function(tab) {
tab.loader.load();
}
}
}
]
}
]
});
});
</script>
</head>
<body>
<div id = 'frmSampleConsole'></div>
</body>
</html>
your need to set "scripts: true," then your extjs script are work.
I'm new to Sencha Touch 2 and would like to place an HTML tag on top of the page and an xtype: formpanel below that. Any clue how to do this? Do I have to place both of these elements inside another xtype?
Thx in advance.
-> Screenshot
The code looks as follows (some stuff came before the code of course):
xtype: 'carousel',
direction: 'horizontal',
//Will be applied to every object in the array by default
defaults: {
styleHtmlContent: 'true',
scrollable: true
},
items: [
{
cls: 'configurator-item',
html: '<h2>Demo heading</h2>',
xtype: 'formpanel',
items: [
{
xtype: 'fieldset',
title: 'Demo',
defaults: {
//labelWidth: '30%',
autoCapitalize: true,
//required: true,
clearIcon: true
},
items: [
{
xtype: 'textfield',
name: 'locationOfHouse',
label: 'Demo',
placeHolder: 'Demo?'
},
{
xtype: 'spinnerfield',
name: 'numberOfPeople',
label: 'Demo',
minValue: 0,
maxValue: 99,
increment: 1,
cycle: true
}
]
}
]
},
You can implement this using 2 xtypes.
(1) xtype = panel or container to display the html or top.
(2) xtype = fieldset for the middle content.
Once this sencha app renders in the browser, it will be converted into series of divs and spans. So, 1# will give you more control to manipulate the text.
I have implemented the same for you on senchafiddle, you can have a look,
http://www.senchafiddle.com/#PHRyc
Hope it helps.
Yes, thanks I got it meanwhile like this:
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'panel',
docked: 'top',
html: [
'<h1>Demo heading</h1>'
},
{
xtype: 'fieldset',
title: 'Demo',
defaults: {
//labelWidth: '30%',
autoCapitalize: true,
//required: true,
clearIcon: true,
labelAlign: 'top',
},
items: [
{
xtype: 'textfield',
name: 'Demo',
label: 'Demo',
labelWidth: '33%',
placeHolder: 'Demo'
}
(..and closing all the brackets above..)
I am using Sencha Architect 2. I am trying to generate a generic UI element with a text search and a table displaying the results. Generic means I want to use it for several different type of searches, e.g. for users, or roles or still something else.
So what I definitely like in this context about Sencha Architect 2 is that it always generates classes. Here is my generated class:
Ext.define('ktecapp.view.ObjSearchPanel', {
extend: 'Ext.container.Container',
alias: 'widget.objsearchpanel',
height: 250,
id: 'UserSearchPanel',
itemId: 'UserSearchPanel',
width: 438,
layout: {
columns: 3,
type: 'table'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'textfield',
itemId: 'txtSearchText',
fieldLabel: 'Search Text',
colspan: 2
},
{
xtype: 'button',
id: 'searchObj',
itemId: 'searchObj',
text: 'Search',
colspan: 1
},
{
xtype: 'gridpanel',
height: 209,
itemId: 'resultGrid',
width: 430,
store: 'UserDisplayStore',
colspan: 3,
columns: [
{
xtype: 'gridcolumn',
width: 60,
dataIndex: 'ID',
text: 'ID'
},
{
xtype: 'gridcolumn',
width: 186,
dataIndex: 'DISPLAYNAME',
text: 'Displayname'
},
{
xtype: 'gridcolumn',
width: 123,
dataIndex: 'JOBTITLE',
text: 'Job Title'
},
{
xtype: 'actioncolumn',
width: 35,
icon: 'icons/zoom.png',
items: [
{
icon: 'icons/zoom.png',
tooltip: 'Tooltip'
}
]
}
],
viewConfig: {
},
selModel: Ext.create('Ext.selection.CheckboxModel', {
})
}
]
});
me.callParent(arguments);
}
});
The problem I am having is that everything needs to be pretty customizable, dataIndexes of the columns, the store, ...
So how can I get a constructor like function for the class ObjSearchPanel where I pass all that information? In the code above all this looks pretty much hardcoded...
Thanks in advance
Kai
use config,
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-config
Ext.define('SmartPhone', {
config: {
hasTouchScreen: false,
operatingSystem: 'Other',
price: 500
},
constructor: function(cfg) {
this.initConfig(cfg);
}
});
var iPhone = new SmartPhone({
hasTouchScreen: true,
operatingSystem: 'iOS'
});
iPhone.getPrice(); // 500;
iPhone.getOperatingSystem(); // 'iOS'
iPhone.getHasTouchScreen(); // true;
iPhone.hasTouchScreen(); // true
Actually (in ExtJS 4), when you pass a config object to the constructor, this config object is assigned to this.initialConfig variable and still available to other functions of the class. So you can use it in the initComponent.
You still can find code in ExtJS 3.3 like this Ext.apply(this, Ext.apply(this.initialConfig, config)); in the initComponent of classes. However, use it at your own risk because this is not in the document of ExtJS 4, only found it in the source code.
I'm trying to follow this example on Phil haak's blog using the razor viewengine.
Except my view renders the json as text instead of displaying the grid.
Here is the code for my view :
#{
ViewBag.Title = "Home Page";
}
<h2>#ViewBag.Message</h2>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
url: '/Home/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Votes', 'Title'],
colModel: [
{ name: 'Id', index: 'Id', width: 40, align: 'left' },
{ name: 'Votes', index: 'Votes', width: 40, align: 'left' },
{ name: 'Title', index: 'Title', width: 400, align: 'left'}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'My first grid'
});
});
</script>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
The rendered page looks like this :
{"total":3,"page":1,"records":22,"rows":[{"i":37,"cell":["37","1","What does AcceptVerbs do?"]},{"i":36,"cell":["36","1","Can I change the default model binder?"]},{"i":35,"cell":["35","1","How do I do custom paging?"]},{"i":34,"cell":["34","1","Writing a custom ControllerFactory"]},{"i":33,"cell":["33","65","How do I defend against CSRF attacks?"]},{"i":32,"cell":["32","2","If there was a random question generator, would you use it?"]},{"i":30,"cell":["30","51","Is there a random question generator?"]},{"i":29,"cell":["29","2","How many questions are in this table?"]},{"i":28,"cell":["28","7","How do I use the SelectList?"]},{"i":27,"cell":["27","50","How do I use jQuery grid with MVC"]}]}