Following the answer on load an html file into a panel, I was able to load the HTML File taking the entire Panel, but how can I use that solution to load the file in a ITEM?
I have the following file Demo.js
Ext.define('Sencha.view.Demo', {
extend: 'Ext.Panel',
xtype: 'democard',
config: {
iconCls: 'search',
title: 'Demo',
styleHtmlContent: true,
scrollable: 'vertical',
layout: {
type: 'vbox'
},
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Demo'
},
{
xtype: 'fieldset',
width: "100%",
style: {float:'left'},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Text Label'
},{
xtype: 'button',
text: 'Press',
ui: 'confirm'
},{
width: '60px'
}]
},
{
> HERE I WANT TO INSERT THE HTML FILE <
}
]
}
});
I tried adding the following code in the marked area :
extend: 'HTMLPanel',
config: {
iconCls: 'home',
title: 'Holcim',
styleHtmlContent: true,
scrollable: 'vertical',
url: 'file.html',
}
But the 'file.html' will not show. How could I achieve this? I would like to include some HTML Files in some items.
Solved
Ok, going to use another another solution hope it helps. With this solution, I just have to write " html: loadURL('url') "
Related
Newbie to ext.js: I am trying to understand what is this:
xtype: 'app-main'
means in my auto generated code. No documentation available. I guess this is a reference to so me alias, but I could not find it..
I used sencha cmd (latest may 2014 - ext.js 4.2.2) which autogenerated a number of files, which had xtype: 'app-main' in them...
Main.js
Ext.define('test12.view.Main', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border'
],
xtype: 'app-main', <<<<-------
layout: {
type: 'border'
},
items: [{
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Center Tab 1'
}]
}]
});
viewport.js
Ext.define('test12.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
'Ext.layout.container.Fit',
'test12.view.Main'
],
layout: {
type: 'fit'
},
items: [{
xtype: 'app-main'
}]
});
xtype is a config that allow you to instantiate the classes you define more easily
Example:
Ext.define('Myapp.view.MyCoolPanel',{
extend : 'Ext.panel.Panel',
xtype : 'coolpanel',
//some cool configs ...
});
//somewhere else
Ext.create('Ext.window.Window',{
//regular configs
items: [
{
xtype: 'coolpanel'
}
]
}).show();
see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-xtype
best regards
So, it seems that xtype: ... inside a Ext.defing( ... ) {
sets the new view to the xtype, in this case app-main.
Makes sense ;)
I just want to create a layout where i've defined my custom application header.. and them some content beneath.. e.g. a border layout...
Ext.define('app.view.Main', {
extend: 'Ext.container.Container',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border',
'Ext.layout.container.Anchor',
'Ext.form.field.Text'
],
xtype: 'app-main',
layout: { type: 'anchor' },
items: [
{ xtype: 'app-header' },
{
//xtype: 'container',
layout: 'border',
items: [{
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
}, {
region: 'center',
xtype: 'tabpanel',
items: [{ ...
this code is always returning the error Layout run failed... When i change the layout of my second item which should be a border it works.. Somehow it doesnt get along with the border layout...
Can someone tell me why? A hint for a solution would be nice too :)
I am an ext js layout newb :(
To create a header with a top header:
new Ext.container.Viewport({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'app-header'
}, {
flex: 1,
layout: 'border',
xtype: 'container',
items: [] // border stuff
}]
});
I am attempting to load a detail view for an item disclosure from a list but without using NavigationView and the "push()" command.
CONTROLLER:
Ext.define('App.controller.MyPlans', {
extend: 'Ext.app.Controller',
requires: ['App.view.EventDetail',
'App.view.PlansContainer'],
config: {
refs: {
},
control: {
'MyPlansList': {
disclose: 'onDisclose'
}
}
},
onDisclose: function (view, record) {
console.log("My Plans list disclosure " + record.get('id'));
var eventDetailView = Ext.create('App.view.EventDetail');
eventDetailView.setRecord(record);
Ext.Viewport.setActiveItem(eventDetailView);
}
});
VIEW:
Ext.define('App.view.EventDetail', {
extend: 'Ext.Panel',
xtype: 'EventDetail',
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Event Name',
items: [{
xtype: 'button',
id: 'addRunBackBtn',
ui: 'back',
text: 'Back'
}]
}, {
xtype: 'panel',
styleHtmlContent: true,
itemTpl: [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>']
}],
}
});
I am basically trying to pass the data to the view using the "setRecord()" command but nothing seems to be loading in the view. Any thoughts??
Thanks
Instead of ItemTpl just write Tpl. I doubt that itemTpl exists without list xtype.
Other thing is put Tpl inside config:
{tpl:['<div class="ListItemContent">{descriptionddata}</div>']}
The answer before/above me is good but if you intend of keeping your formatting inside view and not in controller then , it works by using setData instead of setRecord
detailview.setData({title:record.get('title'), description:record.get('descriptiondata')});
Instead of panel try list as below
Ext.define('App.view.EventDetail', {
extend: 'Ext.TabPanel',
xtype: 'EventDetail',
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Event Name',
items: [{
xtype: 'button',
id: 'addRunBackBtn',
ui: 'back',
text: 'Back'
}]
}, {
xtype: 'list',
styleHtmlContent: true,
itemTpl: [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>']
}],
}
});
I found the issue here:
A panel doesn't have a itemTpl
{
xtype: 'panel',
styleHtmlContent: true,
itemTpl : [
'<h1>{name}</h1>',
'<h2>{location}</h2>',
'<h2>{date}</h2>'
]
}
The one of the possible way to do it could be:
Change the VIEW:
{
xtype: 'panel',
id: 'thePanel',
styleHtmlContent: true
}
Change the Controller:
onDisclose: function(me, record, target, index, e, eOpts) {
...
Ext.getCmp('thePanel').setHtml('<h1>'+record.get('name')+'</h1><h2>'+record.get('location')+'</h2><h2>'+record.get('date')'</h2>'); //For setting the Data
...
}
Hope this could help!
I have the following code as my main javascript file for displaying a list + buttons. It all shows properly and everything like adding items to the store works great, but is there a simple way to get the list to only display values where the name equals a certain value?
Ext.define("MyProject.view.Main", {
extend: 'Ext.NavigationView',
requires: ['Ext.NavigationView', 'Ext.dataview.List'],
xtype: 'myproject-main',
config: {
items: [
{
title: 'List of Data',
layout: 'fit',
xtype: 'container',
itemId: 'listContainer',
items: [
{
xtype: 'list',
store: 'DataStuff',
itemTpl: '{name}',
emptyText: 'No data added yet'
},
{
xtype: 'container',
docked: 'bottom',
padding: '5px',
layout: 'hbox',
items: [{ xtype: 'button', itemId: 'addBtn', text: 'Add Data', ui: 'confirm', width: '50%', align: 'left' }, { xtype: 'button', itemId: 'updateBtn', text: 'Update Data', ui: 'action', width: '50%', align: 'right' }]
}
]
}
]
}
});
I had thought there was a simple filters: category I could add under the store but couldn't find anything that worked.
List displays items that provided by store. For controls list filter you should control his store fitlers.
Example
var store = list.getStore();
store.filter('category', 'first');
//or
var customFilter = function(record){
return soAnyCheckForRecods(record);
}
store.filterBy(customFilter);
More information about filters look here http://docs.sencha.com/touch/2-0/#!/api/Ext.data.Store
All I want to do is when I click the reset button on my form it resets all fields. And I have tried everything but it does not seem to work. Here is the class that has the button in it:
App.views.HomeIndex = Ext.extend(Ext.form.FormPanel,{
floating: true,
scroll: 'vertical',
itemId: 'jobSearch',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [{
xtype: 'textfield',
itemId: 'keywords',
label: 'Keywords',
labelAlign: 'top',
labelWidth: '100%',
name: 'keywords'
},{
xtype: 'textfield',
label: 'Job Title',
itemId: 'jtitle',
labelAlign: 'top',
labelWidth: '100%',
name: 'jtitle'
},{
.... //more xtypes here
,
dockedItems: [{
xtype: 'toolbar',
itemId: 'toolbar',
dock: 'bottom',
height: '36',
items: [
{ xtype: 'button', text: 'Reset',itemId: 'resetBtn',
},
{ xtype: 'spacer'},
{ xtype: 'button', text: 'Submit',itemId:'submitBtn',ui: 'action',
}
]
}]
In my App.js I have the code to handle the reset method:
//this is one way I thought of doing it. But obviously it does not work. I have tried googling all over but couldnt find a solution.
this.homeView.query('#resetBtn')[0].setHandler(function(){
var form = this.el.up('.x-panel');
//form.down('.x-input-text[name=keywords]').setValue(' ');
form.query('#jobSearch').getComponent('keywords').reset();
});
});
Ext.reg('HomeIndex', App.views.HomeIndex);
Your form's ID is "jobSearch", the name is "keyboards". You're trying to combine both.
Try:
form.query('#jobSearch').reset();
or:
document.forms['keywords'].reset();
Try this. It's a bit more ExtJS like.
var form = Ext.ComponentQuery.query('#jobSearch .form')[0];
form.reset();