I am trying to use BootStrap Table with on of my views in an Aurelia App to render a Table.
I tried couple of things as per "Usage" Documentation of BootStrap Table, but no luck :(
Has anyone tried it already?
The code for the bootstrap table will want your HTML to already exist in the DOM before it initializes. In the code for your viewmodel add an attached() function. Aurelia will call this during the viewmodel lifecycle after it has been bound to the view and rendered in the DOM. In your attached() function you'll write the code to initialize the table. Use the Via Javascript instructions.
export class App {
message = 'bootstrap-table';
attached(){
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
}
}
Here is an example that works in Chrome, Edge and Firefox on windows 10: https://plnkr.co/edit/u0Qu5O
Related
I'm creating a Docusaurus v2 project that will host documentation for a number of tools. They're all related, so it makes sense for them to be hosted in one place - but they're distinct enough that the docs for each should be separate.
As there are potentially a lot of these tools, I wanted to put the nav links in a dropdown, rather than having them fill up the entire width of the header. I'm trying the following:
themeConfig: {
navbar: {
...
items: [
{
to: '/about',
position: 'left',
label: 'About',
},
{
position: 'left',
label: 'Tools',
items: [
{
type: 'doc',
docId: 'intro',
label: 'Tool 1',
docsPluginId: 'tool1',
},
{
type: 'doc',
docId: 'intro',
label: 'Tool 2',
docsPluginId: 'tool2',
},
...
]
},
...
],
},
}
This partly works, in that a drop down menu appears with the correct labels (Tool 1 and Tool 2) - but the links aren't clickable and aren't highlighted if the active page is one of the documentation tools.
Is this a bug, or am I doing something wrong?
You need href for navigating outside of the website
Or, you need to for avigating within the website, which is client side routing.
{
type: 'doc',
docId: 'intro',
label: 'Tool 1',
docsPluginId: 'tool1',
href: "https://tool1.com"
},
{
type: 'doc',
docId: 'intro',
label: 'Tool 1',
docsPluginId: 'tool1',
to: "/tool1"
},
im having a hard time learning ExtJS. inspite of the fact that almost everywhere it was mentioned that it was the easiest compared to others like DOJO.
what iam trying to create is a simple tree (NO MVC.. just a simple tree).
heres my javascript code..
Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
title: 'Simple Tree',
width: 150,
height: 150,
root: {
text: 'Root',
expanded: true,
children: [
{
text: 'Child 1',
leaf: true
},
{
text: 'Child 2',
leaf: true
},
{
text: 'Child 3',
expanded: true,
children: [
{
text: 'Grandchild',
leaf: true
}
]
}
]
}
});
and only something like a panel is being rendered on the body.
html is this
<body>
<div>
</div>
</body>
what am i doing wrong?
UPDATE:-
1.whole of the javascript here is placed in the page after the body tag.
2. im including bootstrap.js jsvascript file that is bundeled with ExtJS download.
Ext.create() function should have been called inside Ext.onReady() otherwise some elemnts are rendered and others are not
I'm trying to create a tabpanel view that contains a splitview controller on the first tab. Think "kitchen sink" demo placed into one tab of a tabpanel.
The others do not contain the nestedlist.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/
I've tried placing the nestedlist into a container, which you can see in some of the commented code shown below.
At the moment, this working code only shows the nestlist taking up the entire section on the first tab:
Ext.application({
name: 'Test',
requires: [
'Ext.dataview.NestedList',
'Ext.navigation.Bar'
],
launch: function() {
Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
id: 'tab4',
title: 'Tab4',
iconCls: 'star',
xtype: 'container',
items: [{
xtype: 'nestedlist',
displayField: 'text',
docked: 'left',
store: store
}, {
html: 'Detail View'
}]
}, {
id: 'tab2',
title: 'Tab2',
iconCls: 'star',
html: 'No nav bar?'
}, {
id: 'tab3',
title: 'Tab3',
iconCls: 'star',
html: 'Screen3'
}]
}).setActiveItem(0);
}
});
Store setup:
Ext.Loader.setConfig({ enabled: true });
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
}, {
text: 'Wasabi Peas',
leaf: true
}]
}
]};
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: data
});
Okay. I have created this example for you: http://www.senchafiddle.com/#ynn40
You can also download the whole source from here: http://rwd.me/FG5s (quite large as it includes the SDK)
Be sure to look through all the files as I have added lots of documentation.
Some notes:
I created a new component called Sencha.view.SplitView. This obviously can be called anything. It has a xtype of splitview so we can simply just require it and include it into our Main.js file (which is a Ext.tab.Panel.
{
xtype: 'splitview',
title: 'SplitView',
store: 'Items'
}
Because this is an item inside a tabPanel, we need to give it the title configuration too. Of course we could include this Splitview component anywhere.
As you can see it has a store configuration which is defined in SplitView:
config: {
/**
* We create a custom config called store here so we can pass the store from this component
* (SplitView) down into the nested list when it updates. Checkout {#link #updateStore}
* #type {Ext.data.Store}
*/
store: null
}
This is used to pass the store from the splitview to the nested list (we will get to that in a second). Of course that configuration will do nothing unless we add the appropriate methods to update the nested list:
/**
* This is called when the {#link #store} config has been updated.
* We simply check if the nested list has been created, and if it has, set the store
* on it with the new value.
*/
updateStore: function(newStore) {
if (this.nestedList) {
this.nestedList.setStore(newStore);
}
}
As you can see, we are simply updating the nestedList (if it exists) store with the new value of the SplitView store.
Inside the initialize method of SplitView, we created both the detailContainer (where the detail card of the nested list should go) and the nestedList and then add them to the SplitView. Make sure you look at some of the configurations that we give nestedList as they are important. The store configuration:
// Set the store of this nested list to the store config of this component (Splitview)
store: this.getStore()
The detailCard and detailContainer configurations:
// Tell the nested list to have a detail card and put it inside our new detailContinaer
detailCard: true,
detailContainer: this.detailContainer
And of course the listeners so we know when things get changed:
// And finally add a listener so we know when to update the detail card
listeners: {
scope: this,
leafitemtap: this.onLeafItemTap
}
Finally we add the onLeadItemTap method into the Splitview (we added the listener above) which should update the detail card with new information:
/**
* This is called when a leaf item is tapped in the nested list, or when the detail card
* should be updated. In here, we just get the record which was tapped and then set the HTML
* of the detail card.
*/
onLeafItemTap: function(nestedList, list, index, node, record, e) {
var detailCard = nestedList.getDetailCard();
detailCard.setHtml(record.get('text'));
}
Hopefully this makes sense and helps you. If not, let me know.
I'm new to sencha touch and trying to build a list from an array. I use Ext.data.ArrayStore and having trouble.
My code:
var ListStore = new Ext.data.ArrayStore({
autoLoad:myData,
autoDestroy: true,
storeId: 'myStore',
// reader configs
idIndex: 0,
fields: [
'product',
{name: 'product', type: 'string'},
{name: 'id' , type: 'string'}
]
});
Code of the Panel which includes the list:
var listPanel = new Ext.Panel({
dockedItems: [{
xtype: 'toolbar',
ui: 'light',
title: 'Product List',
items: [{
text: 'Back',
ui: 'back',
handler: backHandler
}]
}],
layout: 'fit',
scroll: 'vertical',
style: 'background-color:#FFFFF',
items: [
{
xtype:'list',
store:ListStore,
itemTpl: '<div class="product"><strong>{product}</strong></div>',
grouped:true,
indexBar:true
}]
First of all, Swar's answer seems perfectly correct. Create a store like that, pass your data as the data config option when creating an Ext.data.Store instance.
If you've Ext.define()-ed your own store subclass (without a proxy), you can either add the data when you create() your instance, like this:
Ext.define('MyApp.store.MyStore', {
extends: 'Ext.data.store',
model: 'Demo'
});
myStore = MyApp.store.MyStore({data: arrayOfDemoItems});
Or altertanively, if you already have a store instance (e.g. auto-created by a controller):
Ext.define('MyApp.controller.MyController',{
extend: 'Ext.app.Controller',
stores: ['MyStore'],
init: function () {
// You add your items here
var myStore = this.getMyStoreStore();
myStore.data.addAll(this.getMyItemsSomehow(););
// Note that the 'load' event is not fired if you load elements like this,
// you have to do it manually if you have e.g. a DataView tied to the store:
myStore.fireEvent('load', myStore);
},
getMyItemsSomehow: function () {
// Return an array of items somehow...
return [{id: 1, product: 'Spencer'}];
}
});
Create a Model first.
Ext.regModel('Demo', {
fields: [
{name: 'id', type: 'string'},
{name: 'product', type: 'string'}
]
});
Then create the store:
new Ext.data.Store({
model: 'Demo',
data : [
{id: '1', product: 'Spencer'}
]
});
And as far I can understand from your code, in "autoLoad" option of Store, it should boolean or object which is not the data but options for the store load() method.
I'm trying to find an example of how to setup some simple radio buttons in Sencha Touch. Can anyone point me at a good example?
you can try ..
this.viewOne = new Ext.form.FormPanel({
text: 'Form',
iconCls: 'bookmarks',
items: [
{
xtype:'radiofield,
name: 'radiogroup',
value: 'A',
label: 'radio1'
},{
xtype:'radiofield,
name: 'radiogroup',
value: 'B',
label: 'radio2'
}
]
});
The kitchensink demo has a Radio example on the User Experience -> Form example. It's the "Favorite color" of the form. Also, Radio extends Checkbox, so if you can find examples of Checkbox it's similar.
Radio documentation here
The main thing is to give each Radio in a group the same name like the following :
this.viewOne = new Ext.form.FormPanel({
text: 'Form',
iconCls: 'bookmarks',
items: [
new Ext.form.Radio({
name: 'radiogroup',
value: 'A',
label: 'radio1'
}), new Ext.form.Radio({
name: 'radiogroup',
value: 'B',
label: 'radio2'
})
]
});