I've got a profile home view (Home2). In this view a want to show a top docked title bar, a user profile info and user's posts.
Ext.define('FreescribbleApp.view.Home2', {
extend: 'Ext.Panel',
xtype: 'homepage2',
config: {
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items:[
{
xtype: 'titlebarview'
},
{
xtype: 'userinfoview',
itemId: 'userInfoWrapper',
height: 150
},
{
itemId: 'homeStage',
autoScroll: true
}
]
}
});
I also have a DataView:
Ext.define('FreescribbleApp.view.PostList', {
extend: 'Ext.dataview.DataView',
xtype: 'postlist',
config: {
scrollable: false,
defaultType: 'postitem',
useComponents: true
}
});
which lists DataItems:
Ext.define('FreescribbleApp.view.PostItem', {
extend: 'Ext.dataview.component.DataItem',
xtype: 'postitem',
requires: ['Ext.field.Text'],
config: {
style: 'background-color: #f00',
height: 100,
styleHtmlContent: false,
authorName: {
height: 30,
style: 'background-color: #0f0'
},
dataMap: {
getAuthorName: {
setHtml: 'userName'
}
},
},
applyAuthorName: function(config) {
return Ext.factory(config, Ext.Component, this.getAuthorName());
},
updateAuthorName: function(newAuthorName, oldAuthorName) {
if (newAuthorName) {
this.add(newAuthorName);
}
if (oldAuthorName) {
this.remove(oldAuthorName);
}
}
});
in my HomeController I create a PostStore, fill it with some posts and add to the DataView. After that I add the DataView to my Home2-View Element HomeStage:
var postStore = Ext.create('FreescribbleApp.store.PostStore', {
params: {
user: localStorage.getItem('userId'),
token: localStorage.getItem('token'),
target: localStorage.getItem('userName')
}
});
postStore.load();
postStore.on('load', function(){
var currentView = Ext.create('FreescribbleApp.view.PostList');
currentView.setStore(postStore);
homeStage.add(currentView);
});
I can't see any items till I set height of the DataView. It is a common issue, bun in my case I cannot set my HomeStage to 'fit' since it's only a part of Home2 and the item userinfo should get scrolled with the posts. So how can I set size of my DataView dynamicly?
I also see in my Sencha debuger for Chrome that between my DataView-List and my DataItems is a Container, which has the right heigh of all the items inside. can I just get the size of this container and set i for my DataView? Will it work and will it be a good practice?
I'm sorry, i just had to set scrollable: null, and not false in my DataView!
Related
I am creating a new project in that I am using Grid.
Here is my grid.
Ext.define('myProj.view.base.grid.myGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
controller: 'myProj-controller-base-grid-myGridcontroller',
requires: [
"myProj.controller.base.grid.myGridcontroller",
'Ext.grid.feature.Grouping',
'Ext.grid.plugin.BufferedRenderer',
'Ext.grid.filters.Filters',
],
mixins: ['Deft.mixin.Injectable'],
inject: ["gridStore"],
config: {
gridStore: null,
},
emptyText : "No data available",
plugins: {
gridfilters: true
},
overflowY: 'auto',
width:'100%',
stripeRows: false,
columnLines: false,
selModel: {
selType: 'checkboxmodel',
mode: 'SINGLE',
allowDeselect: true
},
initComponent: function () {
let _this=this;
Ext.apply(this, {
store: this.getListGridStore(),
});
this.callParent(arguments);
}
});
Now I want to overideto my filter. I have writtent my override code I am looking many examples but I am not geeting how to connect these two codes. ANy help will be usefull.
The overide code which I wanted to place here look like this.
Ext.override(Ext.grid.filters.filter.List, {
createMenuItems: function (store) {
debugger;
}
});
I believe the override works but the createMenuItems function is not called.
Did you define the filter for each column? Like in the code example shown here.
{
dataIndex: 'rating',
text: 'Rating',
width: 75,
filter: {
type: 'list',
value: 5
}
}
I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?
Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2
I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.
I m using the template admin-dashbord from the ext framework 6.2.0.
When i use this, in my AuthenticationController
this.getView().destroy();
only the child view login close.Not the parent.
The app-main component is build behind the parent view.
I don't know how to close the parent view.
I have this following structure :
LoginWindow.js
Ext.define('Admin.view.authentication.LockingWindow', {
extend: 'Ext.window.Window',
xtype: 'lockingwindow',
requires: [
'Admin.view.authentication.AuthenticationController',
'Ext.layout.container.VBox'
],
cls: 'auth-locked-window',
closable: false,
resizable: false,
autoShow: true,
titleAlign: 'center',
maximized: true,
modal: true,
....
});
Login.js
Ext.define('Admin.view.authentication.Login', {
extend: 'Admin.view.authentication.LockingWindow',
xtype: 'login',
requires: [
'Admin.view.authentication.Dialog',
'Ext.container.Container',
'Ext.form.field.Text',
'Ext.form.field.Checkbox',
'Ext.button.Button'
],
title: 'Let\'s Log In',
defaultFocus: 'authdialog', // Focus the Auth Form to force field focus as well
....
{
xtype: 'button',
reference: 'loginButton',
scale: 'large',
ui: 'soft-green',
iconAlign: 'right',
iconCls: 'x-fa fa-angle-right',
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginButton'
}
},
});
AuthenticationController.js
Ext.define('Admin.view.authentication.AuthenticationController', {
extend: 'Ext.app.ViewController',
alias: 'controller.authentication',
onLoginButton: function() {
var me = this;
localStorage.setItem("TutorialLoggedIn", true);
// Remove Login Window
this.getView().destroy();
// Add the main view to the viewport
var main = Ext.create({
xtype: 'app-main'
});
me.redirectTo('dashboard', true);
},
});
Get the view :login
Get the parent :LockingWindow
destroy the parent: LockingWindow
here is my method added to AuthenticationController.js and called in onLoginButton() method.
createInterface : function(){
var me = this,
view = me.getView(),
window = view.up('window');
Ext.create({
xtype: 'app-main'
});
window.destroy();
me.redirectTo('dashboard', true);
}
i m new in sencha . i always use id to define my component . but now i want to change it to itemid . and i found the Ext.getcmp('id'), is not work . and when i use Ext.componentquery.query('itemid') ,the console in chrome said Ext.componentquery is not a function. what can i do?
my view code:
Ext.define('ylp2p.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.carousel.Carousel',
'ylp2p.store.datainterests',
'Ext.Label',
'Ext.List'
],
config: {
fullscreen: true,
tabBarPosition: 'bottom',
scrollable: 'vertical',
items: [
{
title: '首页',
iconCls: 'home',
styleHtmlContent: true,
//true to automatically style the HTML inside the content target of this component (body for panels).
scrollable: true,
layout: 'card',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'ylp2p'
},
{
xtype: 'container',
layout: 'vbox',
items:[
{
xtype: 'label',
itemId: 'datalabel',---------this component is what i want
height: 50,
store: 'datainterests',
tpl: '金额：{data},利息：{earn}',
}//end label
]
}
]//end items
}
]
},//end config
//end listeners
});
my controller code :
Ext.define('ylp2p.controller.viewdata',{
extend: 'Ext.app.Controller',
launch: function(){
console.log('hello ! here is controller launch function');
var storeId = Ext.create('ylp2p.store.datainterests');
storeId.load({
callback: function(records, operation, success){
Ext.each(records, function(record) {
Ext.ComponentQuery.query("main > datalabel").setData({----it cant work . why?
data : record.get('data'),
earn : record.get('earn')
});
});
}
});
}
});
the console error said:
Uncaught TypeError: Ext.ComponentQuery.query(...).setData is not a function
i got it
var label = Ext.ComponentQuery.query('main #datalabel')[0];
label.setData({
data : record.get('data'),
earn : record.get('earn')
});
I found Sencha's own code to use menu.down('#groupMenuItem') to access itemId:'groupMenuItem'. So you should be fine using:
Ext.ComponentQuery.query('#itemid')
Use this.
var label = Ext.ComponentQuery.query('main #datalabel'); -- check on console label should not undefined
label.tpl.updateData -- you will find methods with tpl
i am using sencha touch 2 to build an app.
i Have the following view:
Ext.define("DRT.view.Pbox", {
extend: 'Ext.form.Panel',
xtype: 'pboxcard',
config: {
floating: true,
centered: true,
modal: true,
height: 200,
wifth: 300,
styleHtmlContent: true,
html: 'Hi this is a popup',
items: [
{
xtype: 'button',
action: 'hide',
ui: 'confirm',
docked: 'bottom'
}
]
}
});
in my controller i have the follow ref:
config: {
refs: {
home: 'homecard',
pbox: 'pboxcard',
}
}
and i have one the following function:
showError: function(){
var popup = this.getPbox();
console.log(popup);
Ext.Viewport.add(popup);
popup.show();
}
but for some reason popup is undefined. and i cant seem to find out what the problem is
sorry guys i figured it out ... posted it a little too soon i guess. had to do this instead
pbox: {
selector: 'formpanel pboxcard',
xtype: 'pboxcard',
autoCreate: true
},